Table of Contents
Updated by Randall Theil
Estimated Reading Time: 15 Minutes
Required Permissions: Announcements
- Log into your site's admin panel.
- Click on the Content tab at the top of the page, then on the Announcement Builder button.
- Click the Edit Templates button in the upper right of the page.
- Click the New Announcement button in the upper right.
- Fill out the New Template form with the options you want for your new announcement template.
- Click the Save button at the bottom of the page.
About Announcement Builder Templates
The Announcement Builder tool has a feature called templates that allow you to create re-usable announcements that you can load in when adding new announcement pop-ups to your website. Making a template is also currently the only way to create announcements with custom HTML code, which allows you to get more creative with the announcement's formatting and add elements like embedded Youtube videos to the pop-up. This guide will show you how to create and edit announcement templates.
- Start off by signing into your website's Admin Panel. If you need instructions on signing in, click here.
- Next go to the Announcement Builder page. To get there, click the Content tab on the top bar, then on the Announcement Builder button from the panel that slides down.
- On the Announcement Builder page, click the Edit Templates button in the upper right to switch from the Announcement Builder to the Template Builder.
- On the Template Builder page you'll see a list of templates for your website. There are a few built-in example templates you can use as a starting point if you'd like. Click the Edit button next to a template's name to start editing it. Otherwise click the New Template button in the upper right to start a fresh template.
- The form for creating a template is very similar to the form for creating a new one-off announcement through the Announcement Builder. If you choose a text or image announcement, you'll find the same set of fields and options for creating your template that you would get if you were making a text or image announcement. The HTML toggle is unique to templates, though, and allows you to set up an announcement with your own HTML code inside, giving you a lot more options for what kind of content and formatting to use in the pop-up.If you pick the HTML option, you'll see a Content field appear similar to the one for text announcements, but this one has a Code View (<>) button at the end of the toolbar. Clicking this will switch the block to HTML mode where you can see the content you've entered as HTML tags and write HTML directly into the field.
- When you're finished setting up your new template, remember to hit the Save button at the top or bottom of the page! After you've saved, you can click the Preview button to see a mock-up of what your template would look like.
Using HTML in Announcement Builder Templates
When you're working with an HTML-type template and click the Code View button, you'll see the content of your template displayed in HTML tags. "HTML (Hyper Text Markup Language) uses specific word and character tags to tell your computer how to display content like images, text, and embedded audiovisual media on every website on the internet.
- Some features of HTML have been disabled for security reasons or to safeguard the formatting of the announcement pop-up. You can't use <script> tags for example, or the SVG image code format. Generally it's best to stick to relatively simple HTML tags like <p>, <image>, <span>, and <iframe>.
- HTML is a very broad topic. If you want to learn more, Mozilla has a comprehensive guide available here. There's also some tips for writing HTML in the snippet editor and certain inventory fields here.
- If you aren't very confident with HTML you can also use the buttons on the editing toolbar in the Content field to format your template content and then switch to Code View mode to see how the editor automatically modified the HTML.
- If you're just trying to add an embedded Youtube video to the template, find the video you want to add, click the Share button below the video player, then click the Embed button in the pop-up that comes up, and click on and copy the code that appears on the right. If you paste this into the Content field for your announcement template while in Code View mode, the video you want should get added to the announcement.