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 determine how to embed based on where you will be embedding, and 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:

  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, then navigate to the WordPress Plugin tab
  5. Use the Embed Settings guide and configure your WordPress shortcode
  6. 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, then navigate to the Embed with JavaScript tab and follow the instructions provided.
  3. Use the Embed Settings guide and configure the code generated on step 2. of the Embed with JavaScript tab

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 ManagerPoints, 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.

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 January 25, 2021

Was this article helpful?

Related Articles