This article explains how to use the Overlay builder to create a website overlay.
Go to Campaigns > Website Overlay
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. |
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:
|
| Background image |
Image size:
Click Browse image to choose a background image from your files. The image displays behind the text on your form. You can use our Best practice example - .psd as a template - this is safe for devices with a view port width of 360px or more:
💡 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. |
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. |
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:
|
| Background image |
Click Browse image to choose a background image from your files. The image displays behind the text on your form. Image size:
💡 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. |
Settings
The Settings tab defines when, where and how you want your overlay to display to visitors on your site:
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.
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.
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
Once you’re happy with your overlay setup, click Save.
The overlay campaign will automatically be in Paused mode.
Comments
0 comments
Please sign in to leave a comment.