How to embed a campaign in a popup on your website

1. Introduction.

2. Ideas and examples.

3. Step by step.

3.1. Include the campaign in a popup.

3.2. Popup display options.

4. Other specifications.

5. Related content.

1. Introduction.

In addition to embedding your campaign in a website, blog, or microsite, through a content widget, Cool Tabs allows you to add a campaign in a popup window or a button to display it in the part of the screen you want.  When the user accesses the website, the campaign will pop up.

2. Ideas and examples.

The objective of this feature is to encourage the participation of the user that arrives at your website. And it is very useful to complement the information shown on a website. The possibilities can be endless. Here are some examples.

• You want to promote an event, and you are going to raffle tickets, through the campaign you have created in Cool Tabs. If you embed the campaign with a popup, for example in your blog, when a user accesses it, the information about the event and the raffle will pop up.

• You want to promote a new fashion collection. To do so, you have created a personality quiz such as 'What trends can't be missing in your closet? Depending on the user's answers, you will display one result or another, along with a discount for purchases in the new collection. By embedding the quiz with a popup, every user who accesses, for example, the 'New in' section, will be presented with the campaign.

• You want to get data from users accessing your website or blog. That's why you have created a simple registration form where they can leave their email address. When they access your site, the popup will appear. When they fill in their data in the form, they will get a free e-book or a discount voucher.

• You want to know the interest in the content/product/service of the users who access your website or blog. To do so, you have created a quiz with paths. Depending on the answers given by the users, you show them one question or another. So, for example, a travel agency can display on its website, through a popup, a small quiz, with which to know what kind of trip a user is interested in, destination preferences, duration, budget ... At the end of the quiz, you can show certain packs, offers ... In addition, you can then work on that information and include it in your marketing strategy.

3. Step by step.

3.1. Include the campaign in a popup.

1) From the main list of campaigns, access the 'Publish' section of the campaign you want to embed.

2) Go to the section 'Widget to embed in a pop-up'.

3) Choose which page of your campaign you want to display on the website, blog, or microsite where you are going to embed it: landing, form, entries list, or winners page. 

4) Copy the HTML of the popup you want to embed.

We recommend always copying the code directly from this section, without editing it manually. If you had already embedded the popup on your website before, see section 4.4.

3.1.1. Campaign Landing.

If you copy this HTML, you will display the main screen of your campaign. You can modify any aspect, from adding a title and/or main image to adding or removing any button with CSS...

Below, you can see an example of how the popup with the landing page of a campaign embedded in a blog would look like.

3.1.2. Form.

You have the option to show the participation form directly. Select the option 'Form', and copy and paste the HTML. For this screen to be shown, you must have the anonymous login activated in the campaign registration.

Below, you can see an example of how the participation form of a campaign, embedded in a blog post, would be displayed in the popup.

3.1.3. Entries list.

Select this option and copy the HTML if you want to display the list of participants. Note that in order for it to be displayed, you must activate the option 'Enable public participation' in the 'Participation' section.

Below, you can see an example of how the entries list of your campaign would be displayed in the popup.

3.1.4. Winners page.

With this code, you will embed the winner's page on any website.

Don't forget to set the winners page in public mode. Also, the dates of the campaign (not of the participation) must be active.

Below, you can see an example of how the winners' page would be displayed in the popup.

3.2. Popup display options.

In addition to selecting the campaign section you want to display, you can choose how the popup will appear on your website: automatic, automatic after interaction, or when a button is clicked. You can also choose whether the popup is displayed as a floating or modal window.

3.2.1. Automatic mode.

By enabling this mode, you will be activating the option for the popup to appear directly when the user accesses your website or blog.

• Height and relative width (%). By default, the popup appears with this size: 70% high and 25% wide. If you want it to be displayed smaller or larger, change the percentages.

• Relative height and width on mobile (%). By default, on mobile the popup takes up the whole screen (100% height and width). If you'd rather have part of your website visible behind it, reduce these percentages, for example to 90% width and 70% height. If the user rotates their phone while the popup is open, the size adjusts automatically.

• Position. Choose where you want the popup to be displayed (in the center of the screen, top right, bottom left...).

• Cookie expiration time (days). You can define how many days it will take for the campaign to be displayed again. For example, if you set 7 days, even if the user returns to your site before that time, the popup will not pop up. During the specified time, the same user will not see the popup with the campaign again. If the user deletes cookies or is in private browsing, he will see the campaign popup again. If you are testing your campaign, do not forget to delete the cookies, to display the popup again.

• Timeout (seconds). This is the time it will take for the popup to be displayed once the user enters the page where you are going to show it.

3.2.2. Automatic mode after interaction.

It works just like automatic mode, but the delay doesn't start counting until the user interacts with the page: when they scroll, click, tap the screen or press a key. This way, the popup doesn't appear as soon as the page loads, before the user has even started reading it.

It's a good option if SEO is a concern for you, as some search engines consider popups that appear right away to be intrusive. Even so, it doesn't guarantee that Google will stop considering the popup intrusive.

The additional settings are the same as in automatic mode: size, position, cookie expiration and delay.

Keep in mind: if the user reloads the page or goes back and the page had already been scrolled, the browser restores that position and this already counts as an interaction, so the delay starts counting right away.

3.2.3. Button Mode.

A) Floating button

With this mode, a button will appear. The user will have to click in order for the campaign popup to appear. A less intrusive option that gives control to the user, allowing him/her to choose whether to open the popup.

• Button position. By default, the button is always displayed at the bottom of the screen. You can configure it to appear on the left or on the right.
• Button text. This is the text displayed on the button. Think of an attractive call to action!
• Button color. You can change the color of the button.

B) Inline button

This option allows you to place the button anywhere in the text. When you click on it, the popup will be displayed.

3.2.4. Window type: floating or modal.

With the 'Window type' option, you choose how the popup behaves in relation to the rest of your website:

• Floating (default option). The popup appears over your website, but the user can keep browsing it while the popup is open.

• Modal. The background is dimmed and the rest of the page is blocked until the user closes the popup. It can also be closed by clicking on the dimmed background.

We don't recommend using the modal type with the automatic modes. A popup that covers the page without the user asking for it can hurt your website's Google ranking on mobile. The modal type works better with the button modes, where the user decides whether to open the popup.

If your website shows a cookie banner when a modal popup opens, the banner remains usable with the most common cookie management platforms (OneTrust, Cookiebot, Didomi, Usercentrics…). With other platforms, the banner may stay blocked until the user closes the popup.

4. Other specifications.

4. Track the traffic of your popup campaign with UTMs.

Do you have the same campaign published as both a standard embed and a popup, and want to know which one converts better? Or do you need to differentiate traffic by partner or by the website where it's embedded? You can add UTM parameters to the popup code and Cool Tabs will automatically capture them so you can analyze them in statistics.

In the tutorial How to track the traffic of an embedded campaign with UTM parameters we walk you through it step by step, along with the hierarchy the system follows when there are UTMs both in the widget and in the URL where it's embedded.

5. Related content.

How to embed a campaign on your website.