Messaging Elements

Messaging personalizations are used to change text, images, and links, and entire sections of one or multiple pages on your website.

Add Messaging Element:

  1. Navigate to the campaign and audience where you want your personalization to appear
  2. Click the "Add Personalization" button
  3. In the modal that appears, name your personalization and click on the "Messaging" button
  4. Click "Edit" next to the new personalization you just created
  5. Add the URL of the page(s) you want the personalization to appear on and click on the green Personalize [URL] button. If you don't see button, make sure you have our Chrome extension installed.
  6. Hover over any elements - text, links, images, etc to edit
  7. The edits automatically save so when finished with the edit, you can close the page
Personalizing the text, links, and CTAs for your target audiences is a great way to boost engagement and conversion.

Choosing Location

Messaging elements have two location options: single location and multi location.

  • Single Location: Update any element on one page of your website
  • Multi-Location: Update an element that is on all pages of your website, such as navigation bar or footer. Multi-location elements can be written using Regular Expressions.

Editing text

  1. Open the on-page messaging editor
  2. Hover over the text you want to edit and click it when there is a green outline
  3. Select "Edit Text"
  4. Type in the new text to appear on the page

Editing links

  1. Open the on-page messaging editor
  2. Hover over the link you want to edit and click it when there is a green outline
  3. Select "Edit Link" or "Make Link"
  4. Type in the new link to direct the visitor towards
  5. If applicable, hover over the link text, click "Edit Text", and update the CTA for the link

Editing Images

Swapping out images is a great way to visually personalize the website for an audience.  
To change images using the element selector:
  1. Open the on-page messaging editor
  2. Hover over an image until a green box appears around it and click on the image
  3. Select 'Edit Image'
  4. Paste in the URL for a new image or upload it from your compute

Editing Navigation Bars

Triblio allows you to use a single campaign to change the navigation across the entire site -- for any audience. Common use cases include swapping out the primary CTA based on funnel stage of the  audience,  or personalizing certain links for your verticals.

To edit the navigation on your site:

  1. Navigate to the campaign and audience that your navigation menu will change for
  2. Start a messaging personalization
  3. Set the location as "Multi-location" and use a regular expression to indicate where these changes should apply (to apply it everywhere, just enter a period)
  4. Open the on-page messaging editor and select the navigation menu
  5. Edit the HTML of the navigation menu and add or remove the section of code

Using the advanced section

Sometimes the WYSIWYG on-page editor won't select the exact element you are looking to change or you want to update a large code block. That's when you can use the advanced editor.

  1. Open the Element Editor (where you select the location for your messaging element)
  2. Towards the bottom of the page, expand the 'Advanced' section
  3. In the right corner, click 'Add'
  4. For the 'Directive' choose the type of element you want to customize
    1. Text, Image, Link, HTML, Append HTML, Custom JS, Class, Attribute, Remove Element
  5. To grab the selector, navigate to the page you are personalization, hover over the element you want to change, right-click and choose 'Inspect Element'. In the inspector, make sure you are on the right element and right-click on the code and choose 'Copy Selector'. Paste the selector into Triblio's Advanced Messaging Editor.
  6. In the 'Data' column, write in the new text, link, HTML, etc you want the page to update to.

Note: The on-page WYSIWYG editor doesn't by default contain all Advanced Directives(such as HTML) but once the directive has been added in the advanced section, it will appear and can be edited with the on-page editor.