Placements

A Placement is a set of rules that determine where on your site a message is shown. A message can have multiple placements, for example a message about special opening hours could be on the front page and on a contact information page.

A placement has three main settings:

Element selector

InfoToggle uses a CSS selectors as an "anchor" on a web page to attach messages. A message can only be inserted using a placement's selector that matches an element on a web page.

For example adding a message to this page under the navigation bar could use nav.navbar as a selector and relation "insert after element".

If a selector points to multiple elements, InfoToggle will insert the message to all matching elements.

Limitations

InfoToggle will let you use a selector that matches the whole document like <html>. However, not all browsers support replacing the page's root element with another element.

Relation

Relation setting on a placement has five options:

  • Insert after element
  • Insert before element
  • Append inside element
  • Prepend inside element
  • Replace element

These control where your message is inserted to the page in relation to the selected element.

These examples show what happens when a message <div class="message" /> is inserted in relation to a an element with the id #element:

Insert after element

Message is inserted immediately after the matched element(s):

<div>
  <div id="element" />
  <div class="message" />
  <div id="other-element" />
</div>

Insert before element

Message is inserted immediately before the matched element(s):

<div>
  <div class="message" />
  <div id="element" />
  <div id="other-element" />
</div>

Append inside element

Message is inserted as the last child inside the matched element(s):

<div>
  <div id="element">
    <p>Other content inside element</p>
    <div class="message" />
  </div>
</div>

Prepend inside element

Message is inserted as the first child inside the matched element(s):

<div>
  <div id="element">
    <div class="message" />
    <p>Other content inside element</p>
  </div>
</div>

Replace element

Message replaces the matched element(s):

<div>
  <div class="message" />
  <div id="other-element" />
</div>

URL Match

By default InfoToggle messages will be shown on any page that contains an element specified in the element selector. Often a message is only needed on a single page and this is where URL matchers come in.

URL matchers can define a set or rules regarding the page URL that need to match for a message to be shown.

The rules can look at the whole page URL or one of its parts, like domain, path, or query. Rules can also be made based on the page title or previous page (referrer), or a global JavaScript variable present on the page.

Each of these can be tested to either contain, equal, start with, or end with a string. A regular expression tester is also available. Each of these can also be inverted, testing for example that the page URL does not contain a word.