1. Home
  2. Embed Interactive Content
  3. How To Embed Interactive Experiences

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:

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:

  1. Install the Dot Embed plugin on your WordPress site or blog.
  2. Navigate to the Plugins menu and activate the Dot Embed plugin.
  3. Go to your Dot.vu account and edit the project you wish to embed.
  4. 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
  5. Once your project is linked, select Yes that you wish for it to be embedded
  6. Then select WordPress from the dropdown How do you want your project to be embedded
  7. Use the Embed Settings guide and configure your WordPress shortcode
  8. 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

  1. Go to your Dot.vu account and edit the project you wish to embed.
  2. 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
  3. Once your project is linked, select Yes that you wish for it to be embedded
  4. Then select JavaScript from the dropdown How do you want your project to be embedded
  5. Use the Embed Settings guide and configure your code to embed with JavaScript.
  6. Once configured, copy the first code snippet to either the <head> or <body> of the page where you wish to embed, as long as it appears before any other Dot.vu code. This code should only pasted once on a page.
  7. Then, copy the second code snippet and place it anywhere within the <body> of your page.

Note: if you are embedding multiple experiences in a single page, copy the first code snippet in only once, and then copy the second code snippet for each interactive experience onto anywhere on your 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 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.

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.

Updated on July 20, 2021

Was this article helpful?

Related Articles