How to set-up an overlay component

You can use overlay components to engage your visitors with personalized offers and capture leads.

With overlays you can show personalized offers to your visitors and capture leads at just the right time. You can think of them as the low-key version of on-site experiences since they require less planning, and bring results quickly.

Unless offers three types of overlay components: popups, sideboxes, and bars. You can use them to highlight content pieces like articles or gated whitepapers, collect email addresses and demo or newsletter sign-ups, and much more.

You can preview the different overlay components before choosing the one you would like to use. Keep in mind that the visual aspects and functionality are both customizable so focus on the type first. Once edited, your final overlay will be something unique to your business and website.

1-components-overlay-overview

Overlay component types

Popups: As the name suggests, popups appear as an additional layer on top of your page, focusing your visitors' attention on a single message. Often, they reach conversion rates 2-3 times higher than the website's average. When triggered on exit intent they are a great way to convert visitors who are about to leave your website. You can use a popup to show personalized discounts, capture leads by offering content upgrades, offer a product demo, reduce shopping cart abandonment, and so much more.

Sideboxes: With a sidebox you can capture your visitors’ attention without interrupting their browsing experience. They are ideal for showcasing related content and to create targeted offers. You can use a sidebox for self-segmentation, to recommend content, create lead magnets, make announcements, promote events and webinars, etc.

Bars: With bars you can create non-intrusive header or footer bars that stay visible as visitors scroll through your website. They are a great way to guide your visitors through the conversion funnel and to focus their attention. You can use a bar to welcome visitors, capture email addresses, highlight important information, update customers about new features, grow your social following, and more.

How to set up an overlay component

When at the Experiences tab, you can click Create experience and then select Create new component. By default, you will see inline components, however you can click the Overlay button to see the relevant components. Now that you know the different types available, you can make a choice easier.

Simply click on an overlay to preview it. On this screen, you will already see some of the settings that you can adjust if you decide to use this overlay. Most important here is to select one of your predefined themes. (If you haven't set-up a theme that matches your company branding yet, you can do that in the next screen.) Once you've made your choice, click Create component to get started.

2-components-overlay-preview

Overlay component settings

This will take you to the Settings tab. You might notice that the settings for a component are very similar to on-site experiences. You give your component a name, define the page(s) it should appear on as well as the audience(s) that should see it.

Additionally, when it comes to an overlay component, you can define when the overlay is shown (no delay, time on page, scroll distance, or exit intent) and how long it remains hidden after a visitor interacted with it (ie closed the overlay or clicked the CTA button).

Ps. If you haven't already defined your themes to match your business and website, you can do that here using the Edit theme button. This is something you (or a designer from the team) has to do once and then your theme(s) can be applied to all your components.

3-components-overlay-settings

Once you are ready, first click Save and then click Open experience editor. Once your selected overlay has loaded within the editor, as in the example below, you can click Configure component.

4-components-overlay-editor1

Overlay component design

Once here, you can start configuring your overlay to make it fit your particular use case. To begin with, you decide on the positioning of the component and the image. Then you can adjust the text as well as fonts, colors, etc. (if you want to steer away from your preset theme).

Lastly, establish whether there should be an email collector and if you want to have a CTA button or two, what the buttons should say and where they should take a visitor to and so on. If you need further customization, you can also use the Other section to add custom CSS and Javascript and to switch on Expert mode.

5-components-overlay-editor2

Once you've made all the changes you need and your overlay is ready, make sure to save, create new version and publish before exiting the editor. Then click start experience at the Settings tab for this component which we've seen earlier.

Frequently asked questions

We have inline components that include testimonials, content, CTAs, and more. There are also overlays you can use such as bars, pop-ups, side-boxes, and self-segmentation. If you have an idea for a component, contact us!

Overlay components render on top of your web page and include bars, pop-ups, side-boxes, and such. Inline components on the other hand are elements that can be placed directly within a page, without breaking the experience. They can include testimonials, content, CTAs, and more.