Create an overlay campaign – Ometria Help Centre

This article explains how to use the Overlay builder to create a website overlay.

Note: Before you start, make sure you have raised a request to our support team so that they can prepare the necessary custom field for your account.

Go to Campaigns > Website Overlay

Screenshot_2021-05-13_at_10.00.28.png

Subscribe form

Set up your subscribe form using the fields available:

Field	Description
Title	This is the header for your overlay. Enter a message that will attract new subscribers, like an exclusive offer, free content or a discount for signing up. E.g. 10% OFF YOUR FIRST ORDER! Use the Text Style button to change the size and line height (spacing) of your text.
Content	Use this box to expand on the main message, e.g. minimum spend or how often you will contact them. Use the Text Style button to change the size and line height (spacing) of your text.
Placeholder text	This is the text that displays in the submission field of the overlay before the visitor enters their email address. Use this field to provide an example of the information they need to enter here, e.g. ‘Email’ or ‘yourname@email.com’
CTA text	Enter the ‘call to action’ text here, e.g. Join, Subscribe, Sign up, etc.
Privacy policy text	Required field that gives your visitors the opportunity to understand how you are using their data.
Privacy policy URL	The URL on your website where your privacy policy is hosted.

Screenshot_2021-05-13_at_10.15.38.png

Next you can customise your overlay subscribe form:

Block name	Description
Font	Select one of the 16 available web safe fonts.The font you choose will be applied to all of the text in your subscribe form.
Colours	Enter the hex code or use the colour picker to define colours for the following: CTA Background - the call to action button CTA Text - the text on your CTA button Title - the header text Content Privacy policy Background - the background colour of your overlay.
Background image	Click Browse image to choose a background image from your files.The image displays behind the text on your form.Image size: Height: 500px Width: 350px 💡 Pro tip: If you have a custom font on your website, you can use this field to upload an image of the text instead of entering the Title and Content.
Alt text	Include a description of your background image for accessibility. This is great for site visitors with visual impairments who may be using screen readers to navigate. See: Accessibility in website overlays

Screenshot_2021-05-13_at_10.06.05.png

Success message

The success message displays when your visitors enter their email and sign up successfully.

You can edit two blocks in the success message:

Field

Description

Title

Use this field to acknowledge that their subscription was successful, e.g. ‘Thank you for signing up!’

Use the Text Style button to change the size and line height (spacing) of your text.

Content

Use this field to provide further instructions as required, e.g. ‘Check your inbox’.

Use the Text Style button to change the size and line height (spacing) of your text.

Screenshot_2021-05-13_at_10.17.02.png

Next you can customise your overlay success form:

Block name	Description
Font	Select one of the 19 available web safe fonts.The font you choose will be applied to all of the text in your success form.
Colours	Enter the hex code or use the colour picker to define colours for the following: Title Content Background - the background colour of your overlay and success message.
Background image	Click Browse image to choose a background image from your files. The image displays behind the text on your form. Image size: Height: 500px Width: 350px 💡 Pro tip: If you have a custom font on your website, you can use this field to upload an image of the text instead of entering the Title and Content.
Alt text	Include a description of your background image for accessibility. This is great for site visitors with visual impairments who may be using screen readers to navigate. See: Accessibility in website overlays

Settings

The Settings tab defines when, where and how you want your overlay to display to visitors on your site:

Screenshot_2021-04-06_at_16.12.13.png

First, choose your Display settings.

Select from the dropdown to either:

Target or exclude pages (e.g. product pages or shopping cart), or;
Show on every page.

If you choose to target or exclude pages, you can specify them using the Contains/Doesn’t contain filters:

If you include more than one option, Ometria uses AND logic. In the example above, the overlay will show on both the earrings and rings pages.

If you want to show your overlay on all pages and exclude only a few of them, use the Doesn’t contain option.

Next, define When to display.

Screenshot_2021-04-07_at_09.58.22.png

Select either:

the Show on entry after x seconds option and set how many seconds after the page has loaded that the overlay should display, or;
the Show on exit option to display the overlay when a visitor is leaving the page - on desktop this means the visitor's mouse leaves the window, on mobile this means the visitor is scrolling upwards quickly.

💡 Pro tip: Timing is important; you don’t want to show your overlay too soon or too late. Check your Google Analytics to see the average time your visitors spend on the page(s) you plan to display your overlay on, or on your website overall, and set it for 10-20 seconds before that average.

Next, set your Frequency rules, i.e. when to stop showing your overlay to visitors. Both of these settings are optional:

Stop showing after overlays displayed x times
Don’t show again if the form is closed

Remember: Your overlay will appear only once every 24 hours, so if a contact visits, leaves, and visits again the next day, they can only see the overlay a maximum of two times.

Once you’re happy with your overlay setup, click Save.

The overlay campaign will automatically be in Paused mode.

Subscribe form

Success message

Settings

Related articles