Create A Pop-Up Dynamic Ribbon

You can use Pop-Up Manager to design and display a call to action ribbon that can be used to access your pop-ups.

About this task

When implemented, the ribbon is displayed at the top or bottom of a page. Clicking on the ribbon will display the pop-up.

Pop up ribbon
There are several advantages to using a ribbon instead of just displaying a pop-up:
  • Providing a ribbon instead of a pop-up greatly improves the mobile user experience for your customers. A ribbon is a non-intrusive banner at the top of your page while, on mobile, a pop-up often covers most of what someone is trying to see.
  • Google changed the mobile pop-up game and using a ribbon can help prevent your pop-ups from hurting your mobile SEO score.
  • When a user discards the pop-up, the ribbon will continue to be displayed at the top of the page. This provides continuous access to the pop-up until it has been submitted.

You can only create and design one ribbon each, for mobile and desktop, but you can choose when and how to use the ribbon when you activate the pop-up. During activation you can use the ribbon for mobile and/or desktop and indicate whether the ribbon will be displayed initially or only be displayed if the pop-up is dismissed. For things like display triggers and cookie usage, the ribbon will use whatever settings you configured for the pop-up.

Procedure

  1. Go to Contacts > Grow > Pop-Up Manager.
  2. Click Create Ribbon.
  3. Enter a name for the dynamic ribbon in the Name box and click Create Ribbon.
  4. Choose to create a mobile or desktop ribbon.
    Note: Both the mobile and desktop ribbon will have the same name.
  5. Click Ribbon Setup.
    1. Choose the Position of the ribbon.
      • Pinned-Page Top: The ribbon stays pinned to the top of the webpage and scrolls up/down with the webpage.
      • Floating- Page Top: The ribbon stays at the top edge of the browser window and does not scroll up/down with the webpage.
      • Floating- Page Bottom: The ribbon stays at the bottom edge of the browser window and does not scroll up/down with the webpage.
    2. Choose the Height for your ribbon.
      For a mobile ribbon, you can only choose a dynamic height. For a desktop ribbon, you can choose a dynamic or a static height.
      Note: Dynamic height can only be set to between 1% and 10% of the screen size.
  6. Click Background to configure the ribbon's border, background color, and arrow settings:
    1. Select a color for the Background.
    2. Set a Border Radius.

      The border radius controls how rounded the corners of the ribbon are. The larger the border radius the more rounded the corners will appear.

    3. Select whether or not to Show Arrow.

      The arrow serves as a visual indicator that a ribbon click provides more content without redirecting visitors to another page, but the arrow is not required.

    4. If you set Show Arrow to yes, select an Arrow Color.
  7. Click Text Elements to configure the ribbon's text:
    1. Enter the ribbon's text in the Title box.
    2. Select a text color, font, and styling from the Title Font options.
    3. Select a Title Size.
      Note: If you are creating or editing a desktop ribbon and you have static height selected in the Ribbon Setup section, you will select your text size in pixels.
  8. Click Close Links.
    1. Select a Position for the close link.
    2. Select a Close Link Color to set the color of the close button.
  9. Click Preview to see how your ribbon will look on different desktop sizes or mobile devices.
    If you are not happy with how your ribbon looks, you can click Discard Changes and choose to revert to the default ribbon or to the last saved version of your ribbon.
  10. When you are happy with the ribbon's design and settings, click Save & Close.