Teaser

What is the Teaser, and what is it good for?

The Teaser is a complementary page for your campaign, which helps grab visitors’ attention before or after seeing your popup. If the teaser appears before the popup, it has a recommending and teasing function. If you choose the teaser to appear after the popup is closed, it serves as a reminder for your campaign. Our sticky teasers will follow your visitors all the way through your website (taking into account the other display and targeting settings, of course), and don't let them forget about your message. But visitors can easily close offers if they are uninterested with the annoyance-proof closing x, which ensures a better user experience on your website.

Please follow these steps to edit the Teaser of your Campaign:

1. First, log in to your OptiMonk account at https://app.optimonk.com/login/en 

2. Select the Campaigns menu on the left, then select the Campaign you want to edit or click New campaign on the right-hand side:

3. Select the Variant you want to edit:

4. You will arrive in the Campaign Editor. Select the Teaser page at the bottom to edit it:

You will also have the option to disable the Teaser by clicking on the icon with three dots:

1) Page settings

Once you select the Teaser page, you will see the available page settings on the left. There are 4 main settings menu for the Teaser page: Theme, Display, Add elements, and Code:

 

1a) Theme: Themes are account-level collections of styles and layouts you can reuse in your campaigns.

1b) Teaser Position: You can set the teaser position on the right settings bar:

1c) Add elements: You can add new Elements to your Teaser page under the Elements menu.

There are currently 3 Elements that you can use for the Teaser page: Text, Image, and Floating image.

1d) Code: Under Code, you can add custom CSS or JavaScript code to your teaser:

2) Teaser-specific settings

Once you select the Teaser page on the bottom, you will see the Teaser-specific settings on the right:

2a) Show teaser: you can decide when to show the teaser: before the popup is displayed, when the popup is closed, or you can choose to enable both options. You can also modify how many seconds should pass before the teaser appears and you can also specify if you want the teaser to appear on only Desktop, only Mobile, or both devices:

When is it going to show up?

• 💡 If you enable the option ,,Before the popup is displayed", the teaser will show up 6 seconds after your webpage finished loading by default, but you can customize the time. If the visitor continues to explore your website and visit different pages, the teaser will continue to show up on your website for that visitor 1,5 seconds after each page finishes loading, based on the segmentation rules you have set for your Campaign.
• 💡 If you enable the option ,,After the popup is closed", the teaser will shop up 2 seconds after you close the popup by default, but you can change the time. If the visitor continues to explore your website and visit different pages, the teaser will continue to show up on your website for that visitor almost instantly after each page finishes loading, based on the segmentation rules you have set for your Campaign.

2b) Size and Spacing: Here, you can set up the width, minimum height, background, border, and shadow options, or you can add some animations:

To set up an animation for the Teaser, look for the “Animations” menu, where you will find the “Attention seeker” drop-down:

You can even set up the attention seeker frequency.

Changing the background and the text 

You can also change the background of the Teaser under the Style tab. If you click on the icon next to Fill, you will have the following options:

If you select an image as a background, you will see additional options:

You can also edit the text of the teaser by clicking on the text:

You can change the font style, font type, colour, size, line height, and alignment.

As the text is on a Text Element, you will see additional settings on the right when you click on the text:

2c) Advanced: Under the Advanced dropdown of the Teaser settings, you can find the Spacing settings, background color, and Padding:

If you need any further help or have any questions, just let us know at support@optimonk.com, and we would be happy to help :)