Dot.vu provides two modes for embedding Interactive Experiences onto your website:
- a project tag, to embed a single project at a time
- or a site tag, to manage where and how you embed your Interactive Experiences on your website, from a single dashboard on your Dot.vu account.
When to use Site Tag?
Are you piloting your first Dot.vu Interactive Experience? Or have you not yet set up a Site Tag but want to embed a project quickly? – then the project tag is the right choice. It’s a straightforward way to embed an individual Interactive Experience on your site. You can read more about it here.
However, if you’d like to:
- Have an overview of what Interactive Experiences are embedded on your site and under what location;
- Manage embedding from a single dashboard, with minimal to no changes on your website, each time you wish to embed an Interactive Experience;
- Deploy Interactive Experiences using location controls and smart rules to trigger your Interactive Experiences where and when it matters.
Then, the Site Tag is what you want.
How to set up Site Tag?
Before you can start embedding your experiences on your site, you must first register it, and then get and install the site tag. Here’s how:
- Navigate to your Dashboard > Websites > Sites
- Click Add Site
- Type your Site Domain (e.g. mycompany.com) and click Save
- Click Get Tag Code for the added site
- Follow the on-screen instructions to install the tag code.
Once your tag is installed on your site, you can now use it to embed Interactive Experiences!
How to embed with a Site tag?
Once your site tag is installed, you can embed Interactive Experiences from your Dot.vu dashboard. Here’s how:
- Navigation to your Dashboard > Websites > Embedding
- Locate the site where you want to embed an experience
- Click Publish Experience – a slider will open
- Click Select a LIVE project – this will open a dialog where you can select a LIVE project
- Select the project you wish to embed
Inline or Popup?
Once you have selected a project, you have two options:
- Inline. Choose this if you want your experience to load within and between your site’s content, inline with your layout.
- Popup. Choose this if you want your experience to load on a popup, over your site’s content.
Inline Settings
| Location | Define under /what/path on your site, the inline experience should load? You must declare at least one location. You can use a wildcard character (e.g. /products/category-a/*). You must also declare on which container of your site’s layout the experience should load. This can be any CSS selector, but just using an id selector (e.g. #some-id) is a straightforward choice. |
| Metadata | You can a set a title for accessibility purposes. |
| Size and Style | Configure how the experience will load inline |
| Loading | Configure if the experience should load using a loading animation. |
Popup Settings
| Location | Define under /what/path on your site, the popup should load? You must declare at least one location. You can use a wildcard character (e.g. /products/category-a/*). |
| Metadata | You can a set a title for accessibility purposes. |
| Popup Trigger | Configure which trigger or triggers should be used for showing the popup. The popup will be shown whenever the first trigger happens. |
| Position, Size and Presentation | Define the size, position and style options of your popup. Configure also if the popup should block the site with an overlay, while opened. And configure also if there should be a loading animation, and if there should be a transition animation when the popup is shown or is closed. |
Testing
Click Live Preview to test your configuration once you are done configuring how your experience will be embedded on your site.
This will open a new tab and demo how the embed will look. Make any adjustments and preview until you are satisfied!
Publishing
Click Publish Experience when you’re satisfied with your setup and are ready to publish. A confirmation popup will appear. Review the information and make sure that everything is correct:
- The site domain
- The mode of embed – i.e. inline or popup
- And the site path or paths where your experience will load!
Then hit Yes! Publish it! and enjoy the confetti!
Please allow a few minutes for full propagation and for the configuration to take effect on your site.
Changes after Publishing
You can make changes and republish the configurations for an embedded experience at any time. Just click the 3-dot menu for that experience and click Edit. Then follow the steps above for changing the settings, testing, and publishing.
After publishing your changes, allow again a few minutes for full propagation.
Removing an embedded experience
Let’s say you were running a campaign, and now it should end. Make sure to:
- Navigate to your Dashboard > Websites > Embedding
- Locate the site domain
- Locate the experience you wish to remove from the site
- Click the 3-dots menu for that experience and select Remove
- Confirm the removal
- You can now go into the experience’s editor and put the experience Offline
Project Tags vs Site Tag compatibility
If you’re already a Dot.vu client, with one or more Interactive Experiences embedded on your site, fear not!
You can install and use a site tag, as described above, and your already embedded experiences will not be affected.
You should, of course, consider at this point migrating from individual project tags to just a site tag, so your site overview is complete and all features site tag unlocks become available for all your embedded experiences.
Feel free to reach out to support via Live Chat or email if you have any questions.