Creating message templates

Templates are sets of HTML, CSS, and JS code that can be used to create multiple messages. An example of a template would be an alert banner which could be used for different purposes depending on the situation. Read more on Templates.

Info: Creating a template requires some knowledge of HTML and CSS code.

To create a template:

Info: Messages are added to your website as part of the page - meaning the page's styles will be applied to messages created with InfoToggle. If your website has suitable styles for your message you don't need to add any CSS code and you can add common HTML classes for styling your elements.

Specifying variables

The template's HTML and CSS code can include variables that can be filled for each message. To specify a variable wrap a word in curly braces like {title}.

  • Variables are one word, no spaces or special characters. OK: {longText}, NOT OK: {long text}, {long-text}
  • If the same variable appears multiple times in a template each of them will be replace by the same value
  • If a template variable is not filled, it won't show up on the message.
  • Give your variables names that describe their function

You can select a type for each variable. Currently supported options are 'text' and 'long text'. A long text variable will show a text area input when editing a message.

Template settings

Some messages only need to be seen once. For example you might have a message about customer service being busy. There's no need to rub that into your customers' face on each page load.

You can make the messages that use the template hide automatically by selecting 'Show message only on first page load'.

You can also have the message be visible until user closes it via a close button on the message. This option requires placing a link element with class 'close' to the template's HTML and rigging it to close the message via JavaScript.

Both of these options will hide messages using this template for the remainder of the session (until user closes the tab). Messages are hidden individually even if they use the same template.

Click on and you are done!

Info: Editing a template will automatically update all messages that use the template.