Logic Bars

Quick Reference

• Overview
• Creating a Logic Bar
• Logic Bar Settings
• Data Logic Tags in Logic Bars
• Logic Bar Dismiss CSS Class

Overview

Logic Bars are dynamic, personalized banners that can be added to your site in minutes.

Use our default conditions, or craft your own custom conditions.

Creating a Logic Bar

Logic Bar Settings

• Condition
  • The Condition which determines if the Logic Bar is displayed
• Condition Option
  • Toggle to display the Logic Bar if:
    • The Condition is met (or true)
    • The Condition is not met (or false)
• Logic Bar Content
  • The HTML content displayed within your Logic Bar
• Add Data Variable
  • Opens the Logic Hop Tool Palette for adding Data Variables to the Logic Bar Content
• Background Color
  • Logic Bar background color HEX code
• Font Color
  • Logic Bar font color HEX code
• Link Color
  • Logic Bar link color HEX code
• Button Color
  • Logic Bar button color HEX code
    • Applied to any HTML element within the Logic Bar Content with the CSS class logic-bar-btn
• Sticky Header
  • Sticky Header Enabled
    • Keeps Logic Bar at the top of the page when scrolled
  • Sticky Header Disabled
    • Allows the Logic Bar to move with the page when scrolled
• Drop Shadow
  • Toggles a drop shadow below the Logic Bar
• Display Option
  • Determines when the Logic Bar is displayed once the Condition is met
    • Display Immediately
      • Logic Bar appears immediately when page loads
    • Display On Scroll
      • Logic Bar appears when the user scrolls the page
    • Display On Click
      • Logic Bar appears when the user clicks anywhere on the page
    • Display On Exit Intent
      • Logic Bar appears when the user moves the cursor outside the browser area
    • Display After # Seconds
      • Logic Bar appears after the specified number of seconds have past since the page loaded
• Display Type
  • Display As Header Bar
    • Logic Bar is rendered as a horizontal bar at the top of the page
  • Display As Pop Up
    • Logic Bar is rendered as a pop up window over the page
• CSS Class Name
  • CSS class name applied to the Logic Bar for applying custom styles
• Additional CSS Styles
  • CSS added to the page when the Logic Bar is rendered

Data Logic Tags in Logic Bars

Data Logic Tags are supported in Logic Bars and will display properly with or without caching enabled.

Note: Data Logic Tags are not supported within HTML elements when caching is enabled. To use Logic Hop data within HTML elements, use Javascript Variables.

The following code will properly render the UTM Code utm_content in the anchor link, replacing #VAR# with the value of utm_content:

<a href="https://stage.logichop.com/tutorial/#VAR#" data-var="utm_content">Click here to learn more</a>

Logic Bar Dismiss CSS Class

To close a Logic Bar you can use the .logic-bar-dismiss CSS class in any HTML element within the Logic Bar.

When the element with the .logic-bar-dismiss CSS class is clicked, the Logic Bar will close and no longer be visible on the page.

With the following code, clicking Close me will close the Logic Bar:

Everything is awesome! <span class="logic-bar-dismiss">Close me</span>