Page tree
Skip to end of metadata
Go to start of metadata

Inline messages can help you replace or update existing content on your website or create new content areas. For example, you can update your call to action (CTA) for one or all pages on your site, or offer different CTAs for different segments. Or you can replace an image carousel with a static image.

Interaction Studio Classic Only

Please note, the contents of this article are intended for customers using Interaction Studio (formerly Evergage Classic). Do not adjust your beacon version to downgrade or upgrade.

This Article Explains

This article will give you an overview of how to update existing content and how to create new content areas as well as how to adjust message settings on the Type tab, and save changes. 

Sections in this Article

Get Started

  1. If you haven’t already, open any page of your website, click the Visual Editor logo to the right of the address bar in Chrome, and click the Visual Editor slider to enable it

    If you do not see the Visual Editor logo, you need to install the Visual Editor
  2. Create or Edit a campaign

Update Existing Content

  1. Click the section you want to replace
  2. Click   
  3. Select Add Inline Message 
  4. Select replace selection 
  5. Click  to view message source code. Refer to Style Interaction Studio Messages  for more information

  6. Click  to adjust message appearance and position, select a template appearance, set rules, options, and/or promoted content

    Message format is not controlled in Message Settings. Refer to  Style Interaction Studio Messages   for more information
  7. At any time, click OK to save changes or CANCEL to close Message Settings without saving


Create New Content Areas

Before you begin creating new content areas, it is important to understand two HTML terms: Siblings are page elements on the same level as the selected page element. Children are sub-elements contained within another parent element.

  1. Find the area on the page where you want to add the new section 
  2. Mouse over the page to find an element that would place the message correctly (see example at right)

    Depending on how your site is configured and coded, finding an element to anchor a message can take a few tries. You may have to find an alternate location for your message that works with the current configuration of your site.
  3. Select the element 
  4. Click 
  5. Select Add Inline Message 
  6. Select the location of the message:
    1. Previous sibling–selecting this option will locate the element next to and in front of, to the left of, or before the selected element
    2. Next sibling–selecting this option will located the element next to and in back of, to the right of, or after the selected element
    3. Previous child–selecting this option will locate the element before any other child elements
    4. Next child–selecting this option will locate the element after any other child elements
       
  7. Click  to view message source code. Refer to Style Interaction Studio Messages  for more information

  8. Click  to adjust appearance and position, select a template appearance, set rules, options, and/or promoted content

    Message format is not controlled in Message Settings. Refer to Style Interaction Studio Messages for more information
  9. At any time, click OK to save changes or CANCEL to close Message Settings without saving



Example: add a message in the blue, highlighted area below the large image and above the 4 sections of clothing items.


Mousing over the 4 sections shows an orange dotted bounder around all 4 rectangles of content–a parent of those content elements.


Select that area and add a new message as a previous sibling of that section.


The message is above the 4 items and below the large image.

Message Settings


This article details information about Inline-specific Message Settings on the Type tab only. For more information please see the articles on  Adjust Message Settings  and  Add Rules for Campaigns, Experiences, and Messages .

Type Settings

  1. Message Type  is pre-selected as Within Page Structure

    Click the drop-down to change the type
  2. jQuery selector is pre-filled with the name of the anchor element you selected in step 1 above

    If you select option 4b below, this will automatically change to CSS selector
  3. The following options are pre-selected:
    1. Replace existing content —replaces the content within the selected element
    2. Replace target —replaces the entire element along with the content contained within it
    3. Use message size —replaces content in the same size as previous content
  4. Select other options as needed:
    1. Show only when target callout is in view —when selected, the message will remain hidden until the anchor element you selected in step 3 above is in view of the user. For example, if this option is selected and the target is "below the fold," the message is hidden until the viewer scrolls to it
    2. Hide message target while page is loading —when selected, ZeroFlicker™ protection code will run for this message.

      You must be using the synchronous JavaScript beacon and have the ZeroFlicker™ technology enabled
    3. If you have multiple Interaction Studio messages that may come up simultaneously, select Stack or Rotate from the drop down
    4. Select Invisible Message if needed



Save Your Changes

  1. When you have finished updating Message Settings, click OK 
  2. Click SAVE or SAVE & CLOSE at the top right of the campaign window to save your campaign changes