Creating placements for your messages

A Placement is a set of rules that determine where on your site a message is shown (read more).

To create a placement:

Placement settings window displaying name, description, element selector, and relation settings.
Figure 1. Adding a new placement

Fill in name and description. Placement names are used when picking a placement for a message so make it something memorable and easy to understand.

Element selector

Element selectors are codes that point to HTML elements on a web page. InfoToggle uses a selector as an "anchor" on a web page to attach messages.

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 you don't want to write selectors by hand, all modern browsers (Safari, Chrome, Firefox) let you copy an element's selector:

  1. Right click the element you want and click "inspect" or "inspect element" from the context menu. This will open a web inspector that shows the structure of your page.
  2. The element you clicked should be highlighted in the inspector. Right click the element in the inspector, and
  3. Select "Copy > Copy selector" (Chrome), "Copy > CSS Selector" (Firefox), or "Copy > Selector path" (Safari).

This will produce a selector that points to the exact element. For example this paragraph's selector would be #content > main > div > div > article > p:nth-child(12). (That's a very specific selector but it doesn't matter unless your page structure changes.)

Enter the selector to the placement's "Element selector" field.

Relation

Pick one of the relations that determine where around the selected element your message will be inserted. See Placement page for more details.

Placement URL Match settings window
Figure 2. Placement URL Matchers

URL Matchers

By default InfoToggle messages will be shown on any page that contains an element specified in the element selector. If you want to display a message only on some pages you can specify a set of rules for the URL that have to met.

Parts of an URL: protocol, domain, path, query, and fragment
Figure 3. Parts of an URL

Each URL matcher has three options:

  • The part of the URL it applies to: the whole URL, protocol, domain, path, query, or fragment. You can also check against the page title or the previous page URL.
  • Method for checking: should the selected part equal, contain, begin with, or end with a value
  • The value the selected part should match to

A couple of examples:

  • To show a message on only the documentation pages of InfoToggle, a matcher could be specified as
    "Path" "Begins with" "/docs".
  • To show messages only on front page could be done with
    "Path" "Equals" "/" or
    "URL" "Equals" "https://infotoggle.com/"
  • To have a message shown when page title contains either the word "Cowabunga" or "Shredder" could be done with a regular expression matcher:
    "Page title" "Matches regexp" "Cowabunga|Shredder"

Once you have added the rules you want click on . You are now ready to add a message to your site.