Before you've configured the necessary elements for an on-site campaign, the first step is to configure the settings available for the overlay screen.

The overlay screen contains settings that are applied to the entire campaign, but vary based on the template type (fullscreen, popup, infobar, and inline). Some of these settings include defining the size of your popup or banner, background colors, animations, and delays. Overlay screen settings can be configured by using the design tab, CSS, or JavaScript.

  • TIP: When building your campaign, be sure to click Save Template in the upper right-hand corner frequently to save your work!

Configure an overlay screen by following the below steps.

1. Navigate to the flag icon on the left-hand navigation.
2. Go to Site.
3. Then Campaigns.
4. Navigate to the message tab of a campaign.
5. Then the Overlay Settings tab.

FULLSCREEN

  • Animation Effect: Select an animation from the drop-down menu to add it to the campaign. Add a start delay to the animation and configure the speed to control when the animation will appear with the popup.

  • Background: Select a color (flat or gradient) or use an image for the background. 

  • Position: Select where on the screen you'd like the popup to display.

  • Animation Effect: Select an animation from the drop-down menu to add it to the campaign. Add a start delay to the animation and configure the speed to control when the animation will appear with the popup.

  • Dim Website Background: This is what's seen and displayed behind the popup on your website. Control the visibility of your website by adding a color (flat or gradient) or use an image as the background. Select the checkbox to enable close on dim click (when a user clicks outside the popup).

  • Preview Website: Enter your website here that the popup will display on. This is for previewing purposes in the canvas only.

  • Width/Height: Enter a number (pixels) for the height and width of the popup to adjust the sizing.

  • Background: Select a color (flat or gradient) or use an image for the background. 

  • Border: Select solid, dashed, or dotted.

  • Shadow: Enter an overlay shadow (pixels) along with a color.

 INFOBAR

  • Position: Select where on the screen you'd like the campaign to display (top or bottom).

  • Animation Effect: Select an animation from the drop-down menu to add it to the campaign. Add a start delay to the animation and configure the speed to control when the animation will appear with the popup.

  • Preview Website:  Enter your website here that the popup will display on. This is for previewing purposes in the canvas only.

  • Maximum Height: Enter a number (pixels) for the banner settings to apply.

  • Background: Select a color (flat or gradient) or use an image for the background. 

  • Margin: Top, bottom, left, and right (pixels)

  • Border: Select solid, dashed, or dotted.

  • Shadow: Enter an overlay shadow (pixels) along with a color.

INLINE

  • Animation Effect: Select an animation from the drop-down menu to add it to the campaign. Add a start delay to the animation and configure the speed to control when the animation will appear with the popup.

  • Maximum Width/Height: Enter a number (pixels) for the overlay settings to apply.

  • Background: Select a color (flat or gradient) or use an image for the background. 

  • Border: Select solid, dashed, or dotted.

  • Overlay Shadow: Enter a number (pixels) for the overlay shadow.

Did this answer your question?