Overlay

An Overlay is an element that displays additional content or interactive features on a webpage without interfering with the main page layout. It is a layer placed on the layout, allowing a dynamic display of information, engagement prompts, and user interaction. You can customize and manage your website overlays and add triggers through its intuitive interface. They can be used to achieve specific website goals, like announcements, pop-ups, promotions, email sign-ups, content previews, etc.

Creating an Overlay

To create an Overlay for your website, follow these steps:

Click Page located on the left side of the navigation bar.
Select the Overlay section from the options.
Click the Add New Overlay.
Fill in the required fields with your overlay content.
Click Save to create an overlay.

You can create as many overlays as you need to enhance your website functionality and engagement.

Once you have created overlays on your list:

Navigate to the Widgets section on the left sidebar.
Click the Overlays section.
Drag and drop the desired Overlay onto your webpage layout canvas.
Make the necessary configurations on the Overlay.
Click Publish Overlay at the top right corner to publish it.

Overlays are added to full-page content, so there is no need for specific drop zones in the main layout. When you drop an overlay, it automatically creates an empty container to which you can add widgets to create your requested layout.

Customizing the Overlay

Once you have added the Overlay, you can add widgets and configure its Styles and Settings from the Property Panel. To add widgets within the Overlay, hold down Ctrl/Cmd and drag and drop the required widget.

To configure the Overlay:

Go to Styles to modify the styling features (see Global Styles).

2. Go to Settings to:

Edit the Title field to change the title of the overlay.
Update the URL field to change the URL associated with the overlay.
Change or Add New Triggers - control when and where overlays appear on the website.
Click Save to save all changes.

Trigger Configuration

You can adjust the Triggers to change or add new behavior when the Overlay appears on the website. Clicking Add New Trigger offers a dropdown menu containing trigger types:

Page Triggers type:
- On Load - specify pages where the Overlay should appear (e.g., All pages, Main pages, System pages, Ecommerce pages, etc.).
Data type:
- Customer group - define triggers based on a specific customer group.
- Scroll position - define the specific scroll count at which the Overlay becomes visible on the webpage.

Note: If you choose the Page Triggers → On load → All Pages, the Is or Is not dropdown is not visible.
If you select On load → a specific page, the Is or Is not dropdown appears to refine trigger conditions.

Is - includes the page.
Is not - excludes the page.

Adding a Close Icon to the Overlay

You can add a close icon to the Overlay using a Button widget. This adds functionality to dismiss the overlay when the button is pressed, providing a more intuitive user experience.

To do so:

Add the Button by dragging and dropping it into the Overlay.
Click the Button to open its right-side Property Panel.
Go to Styles → General and set the Type to Icon Only state.
Navigate to Content, click Add Link, select Overlay, and choose from the dropdown Close Overlay.
Save changes.
Select a close icon (e.g., a cross or "X") for the Button.
Add a Label Text to the Overlay if needed.
Publish the Overlay.

This will add a close icon to your Overlay, allowing users to dismiss it easily.

Additional CTAs

In addition to the Close Overlay, you can create various other CTAs for your Overlay, such as:

Submit Form - Link a button to submit a form added in the Overlay.
Redirect to Page - Configure a button that redirects users to another page.
Download File - Set up a button to allow users to download a file.

These different CTA options can significantly improve user engagement and make their experience on your platform more intuitive.

Viewing Overlays for the Current Page

To see the overlays available on the current page, click the Structure Tree on the left panel or go to the Widgets section and click the Overlays tab.

This will display all overlays available for the current page, making it easy to manage and configure them as needed.