How To Embed Interactive Experiences

You can embed Interactive experiences you create on Dot.vu onto your Website or Blog.

To embed a Dot.vu interactive experience, you need to:

Start by setting up and linking your project to a custom domain
Determine how to embed based on where you will be embedding
Then configure the embed settings for best results and a seamless embedding.

How To Embed

Here are the possible methods of embedding interactive experiences:

Embed On WordPress

Use the Dot Embed WordPress Plugin if you wish to embed your content on your WordPress website or blog. Here’s how:

Install the Dot Embed plugin on your WordPress site or blog.
Navigate to the Plugins menu and activate the Dot Embed plugin.
Go to your Dot.vu account and edit the project you wish to embed.
In the Dot.vu Editor, click Put On Website, and make sure your project is linked to one of your custom domains – see our Using Custom Domains guide to learn how to setup custom domains
Once your project is linked, select Yes that you wish for it to be embedded
Then select WordPress from the dropdown How do you want your project to be embedded
Use the Embed Settings guide and configure your WordPress shortcode
Once configured, copy the shortcode. You can now use it anywhere on your WordPress site or blog to embed your Dot.vu interactive experience.

Embed on Other CMS

Go to your Dot.vu account and edit the project you wish to embed.
In the Dot.vu Editor, click Put On Website, and make sure your project is linked to one of your custom domains – see our Using Custom Domains guide to learn how to setup custom domains
Once your project is linked, select Yes that you wish for it to be embedded
Then select JavaScript from the dropdown How do you want your project to be embedded
Use the Embed Settings guide and configure your code to embed with JavaScript.
Once configured, copy the first code snippet to either the <head> or <body> of the project where you wish to embed, as long as it appears before any other Dot.vu code. This code should only pasted once on your web page.
Then, copy the second code snippet and place it anywhere after, within the <body> of your web page.

Note: if you are embedding multiple experiences in a single web page, copy the first code snippet in only once, and then copy the second code snippet for each interactive experience onto anywhere after on your web page.

Embed with HTML file

If you wish to embed using a content distribution platform that supports embedding web content via an HTML file, such as Google Ad Manager, create a basic HTML document and follow the steps provided on how to embed on Other CMS.

Embed Types

With Dot.vu, you are able to embed your projects in 2 distinct ways:

Inline: Your Dot.vu project will be embedded in a predefined slot on your website. Your content will, therefore, be inline with your website.
Popup: Your Dot.vu project will be embedded as Popup on your website. When embedding your project as a Popup your content will always show above your website. You will also have the ability to configure when your Popup shall be shown using Triggers.

Inline Embed Settings

There are a few settings available to customize how your interactive experience is embedded.

Width, Height and Ratio

As different interactive experiences occupy screen space differently, you must configure the Width, Height and Ratio based on the type of interactive experience you are embedding:

The Height Changes

In most interactive experiences, the height of the content can vary while a user interacts with it. For example, going from a quiz question with four answers to a question with five answers, or from spinning a wheel of prizes to filling a prize win form. If you embed an experience with changing height, we recommend:

Width: 100% – you can change this as desired
Height: blank – defaults to ‘auto’
Ratio: blank – defaults to ‘auto’

Always Same Ratio

If you wish to embed an experience that always has the same aspect ratio, such as a single Interactive Video or Interactive Image, or an experience built around the Ratio component, or a banner ad with a fixed width and height, we recommend the following configuration:

Width: 100% – you can change this as desired
Height: blank – defaults to ‘auto’
Ratio (%): the ratio of your content in percentage. For example a video with a ratio of 16:9, would be 9 / 16 = 56.25% ratio (height divided by width). This way, the height of your content will always be determined by its width.

Occupy The Whole Screen

Some experiences such as the interactive Flipbook are made to occupy the full height of the screen of whatever device being used. For these experiences we recommend:

Width: 100% – you can change this as desired
Height: 100vh – you can lower this slightly if needed
Ratio (%): blank – defaults to ‘auto’

None Of The Above

If you don’t think your experience does not fit any of the described above, go with The Height Changes. If you still have issues embedding, then please contact our support via LiveChat.

When choosing to embed your project as a Popup, there are several options available to customize its presentation and behaviour.

For a better understanding of the various configuration options of a Popup, please see the below image.

Position and Size

Configure where your Popup will be shown on your website.

Horizontal and Vertical: Choose where your Popup should be shown. You can choose between any of 9 combinations of horizontal and vertical settings
Offset: Give the original position of your Popup, defined in the horizontal and vertical settings, choose if you want to offset the position of your Popup.
Width and Height: Select what shall be the size of your Popup. On any of these settings you can leave blank for an “auto” behaviour. When selecting “auto” your content will determine the size of the Popup.
Max Width and Max Height: Optionally, select what should be the maximum width and height of your Popup. This is usefull if you, for example, have selected the width and height of your Popups in relative units (%, vh or vw) but on bigger screens you want to select a maximum width and/or height.

Presentation and Style

Configure how your Popup will look on your website.

Background Color: Select the background color for your popup.
Shadow: Add drop shadow effects to your Popup frame
Border: Add a border to your Popup frame.
Overlay: The overlay is the layer behind the Popup. When a Popup is shown there is a layer behind it that covers the whole website. Depending on the Gating Strategy you can choose the overlay to be completely transparent and to not block the interaction with your website, or you can choose to completely hide and block your website.
- Gate: Select which gate strategy you want to apply to the Popup.
  - Popup Focus: Whenever the Popup shows, your website will be blocked from interaction but the user will be able to click the background overlay at anytime to close the Popup.
  - Soft Gate: Whenever the Popup is shown, the user will still be able to interact with your website. However, only the Embedded Experience will be able to close the Popup.
  - Full Gate: Whenever the Popup is shown, your website will be blocked from interaction and only the Embedded Experience will be able to close the Popup.
- Color: Select what should be the color of the Popup overlay. For better UI/UX, we recommend choosing the color based on what type of gating was selected.
Animation: Optionally choose the animation effects for when your Popup is shown and hidden.

Customize Triggers

Since a Popup starts hidden, we need a way to show the Popup. The Popup Triggers, are conditions that once met they will show your Popup. Bellow is a list of all Triggers you can use to show your Popup.

Exit Intent: The Exit Intent Trigger will show the Popup when users move their cursor toward closing the tab.
Scroll Percentage: The Scroll Percentage Trigger will show the Popup whenever users scroll your site past a predefined percentage.
Scroll to Element: The Scroll To Element Trigger will show the Popup when a predefined element of your site appears in your users’s viewport.
Time: The Time Trigger will show the Popup whenever a user has been on your site for predefined amount of seconds.
Click: The Click Trigger will show the Popup when a user clicks on predefined element of your site.

Given the most common cases, we have configured the triggers to have the following behaviour:

If you select any of these triggers: Exit Intent, Scroll Percentage, Scroll To Element and/or Time; the popup will be shown whenever the first of these triggers fires. If any other trigger fires within the same session the Popup will not be shown.
The Click trigger, which is bound to a button on your website, will always show the Popup.

As explained in the Popup Overlay section, you can use several gating options that modify how/if a user can close the Popup. If you select the “Full Gate” option, you realized there is no way the user can ever close the Popup. The only way to close the Popup is if your project closes the Popup.

In order for your project to close the Popup you need to use the “Close Popup” action from the Dot Library Addon. Using this action will enable any project to end the Popup flow. This is very useful if you are creating Interactive Experiences like Lead Forms, Quizzes, Guided Selling, or Games. To read more about the “Close Popup” action read the Dot Library Addon’s help article.

Other Embed Settings

Regardless of what type of embed you choose, there are general setting that you always have available.

Title

You can optionally define a title to be compliant with accessibility standards.

Loading

You can enable a simple loading animation. The animation disappears once the interactive experience is loaded. If you are embedding using JavaScript, change the loading parameter from ‘off’ to ‘on’ to enable the loading animation.

Google Analytics Cross-Domain Tracking

Check this article on how to do cross-domain tracking with Google Analytics on Dot.vu.

Live Preview

To help you better design your embed, you can use our Live Preview feature.

When clicking on the Live Preview button, a new tab opens displaying the live version of how your project will look like using your embed settings. If you keep the Live Preview Tab opened, any changes you do on your embed settings will be automatically displayed in this tab.

The Live Preview Tab works with the latest published version of your project. This means that you won’t be able to use the Live Preview feature if you project is not yet published.

Updated on April 26, 2023

Was this article helpful?

Yes No