Logic Bars

Quick Reference


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

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