Getting Started

Displaying InfoToggle messages on your website requires four steps:

  1. Configuring a website on InfoToggle
  2. Adding the InfoToggle script on your website
  3. Creating a placement for your message
  4. Creating a message

1. Configuring a website on InfoToggle

Site settings window displaying name, site domain, and site timezone settings.
Figure 1. Adding a new site
  • Fill in your website's details:
    • Your website's name can be whatever. It's not displayed outside InfoToggle. If you have multiple sites it's best to make it something easy to recognize.
    • Your website's domain should include the protocol, possible subdomain, and domain name. For example:
      - https://example.com
      - https://www.example.com
    • The timezone is the timezone where your site operates. The default value is your company's timezone. The timezone affects when your timed messages are shown: if you set a message to be visible from 11 am on 9th of December, it will be shown at 11 am on your website's timezone.
  • Click on
  • After your site has been saved the form will display a new section, JavaScript files which has HTML code to include the JavaScript files InfoToggle needs on your website. Copy the code snippet, we'll need it in the next step.

2. Adding the InfoToggle script on your website

This part requires you know where your website's templates are and that you know how to edit them. Ask a developer friend if you are unsure!

The 'JavaScript files' code in your Site Settings needs to be copied into your website's <head> element. The code can be inserted at the end of the head element, just before </head>.

An example:

<html>
  <head>
    [ other scripts and styles ]

    <script async defer src="https://cdn.infotoggle.com/mods/loader.js"></script>
    <script defer src="https://cdn.infotoggle.com/mods/3ef58b-mods.js"></script>
  </head>
  <body>

Info: The code does not have to be in the <head> element. There are technical considerations around file loading order and you might want to include the files at the end of the <body> element instead. InfoToggle will absolutely work either way.

As a rule of thumb including JavaScript in the <head> makes the JavaScript functionality available sooner but it might slow the page load in some cases. Including JavaScript in the <body> keeps page load as fast as possible but the scripts are loaded only after the page has been loaded and in InfoToggle's case this might delay the messages being shown.

Info: You can use Google Tag Manager to include InfoToggle's scripts on your site. However, this introduces a small delay to loading InfoToggle and messages might appear only a bit after the page has been loaded.

You are now ready to create your first message placement!