Before you design a Site campaign in the Visual Template Editor (VTE), first configure the settings for the overlay screen.
Configure an overlay screen by following the below steps.
Navigate to the Campaigns tab (flag icon) on the left-hand navigation.
Under the Site section, select Campaigns.
Open a campaign and navigate to the Message tab.
Select to create new template in the Site Visual Template Editor (VTE), or edit an existing template.
Then select the Settings tab.
The overlay screen contains settings that are applied to the entire campaign, but vary based on the template type (fullscreen, popup, banner/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!
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.
POPUP
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.
BANNER / 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.
