Interaction Studio Knowledge Base
Space shortcuts

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

You can insert infobars either at the top or bottom of pages on your website. They are commonly used to alert visitors about sales, product updates, and other current or upcoming events. Interaction Studio Infobars are partially responsive by default; any content you add to an infobar takes on a definitive height, width, and position. However, if your site is responsive, you can use custom CSS to make the entire infobar behave responsively.

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 details the process for making your infobar responsive and shows an example of one approach.

Sections in this Article

You should have a basic working knowledge of CSS and an understanding of responsive behavior.

Create an Infobar Message

  1. Create or edit a campaign
  2. Add an infobar message to the campaign
  3. Select the location on the page
  4. Open the Message Source Code
  5. Add a parent container to the infobar
  6. Give the container a class such as eg-container
  7. If your message has a close icon, it can remain outside of the container DIV
  8. Click APPLY


Adjust Sizing and Styling

Assign styles to the container DIV

These settings ensure that as the visitor resizes the window, any content within the parent div will adjust to fit the entire width of the infobar.

  1. With Message Source Code still open, add styles to the container DIV

    1. Width: 100% 

    2. Text-align style: center

  2. Click APPLY


In Top Level Styles, set the height to auto

This setting ensures the infobar will resize based on the height of the content within it instead of retaining its initial fixed height.

At the right of the Message Source Code editor, enter height: auto;

Remove Absolute Positioning Styles

In the style tag in the DIV that contains the message text, remove the absolute positioning styles automatically generated by Interaction Studio and click APPLY:

  1. position
  2. top
  3. left

Now, the source code for your message should look similar to the image at the right





Style the Infobar Message


Adjust the message styling and click APPLY. In this example, the message styling was adjusted as follows:

  1. Message text has been changed to Memorial Day Sale! All Shoes 30% Off!
  2. Font has been changed to 26px, uppercase, bold
  3. Background has been changed to match the color palette of the site



View Your Message

  1. Once your message looks the way you want it to, test your campaign

  2. As you adjust the size of the screen, the message will adjust to accommodate the size of the content within the confines of the screen size


Full size infobar message




Infobar is responsive to smaller screen size



Add Additional Content to the Message

If needed, you can add a CTA to your infobar and it will also behave responsively.

Create a Second Container

  1. Add a second container DIV within the container DIV you created in step 5 of the first section

  2. Give the container a class such as eg-cta

  3. Click APPLY

  1. Add a link within this new div that links to another page on your site
  2. Adjust styling
  3. Click APPLY

Full size infobar message with CTA link

Infobar with CTA is responsive to smaller screen size