Dot Embed Library

The Dot.vu Embed Library is a javascript library which enables you to embed your interactive experiences on your website.

The basic and most common use of the Dot.vu Embed Library is to simply embed a page on your website. However, you can also use it to communicate between your embedded Dot.vu experience and your website, by using the Dot Embed Library Add-On.

There are several options for sending and retrieving information from the embedded dot.vu page, which are:

  • Initialize the Dot.vu page with URL Data
  • Subscribe to triggered events
  • Get the value of a session data field
  • Set the value of a session data field
  • Run a Custom Action

All possible use cases of the Dot Embed Library are exemplified in the code below. Note that when the load method is called, a callback will then be called, once the page is ready, with a Page instance as function argument. Once you have access to the Page instance, you can start to use it to handle events, actions and data fields.

// Dot.vu page's config
var config = {
  dotId: 155,
  pageId: '60ab77612d249b5070590e07',
  loading: 'on',
  height: 'auto',
  width: '100%',

  // optional url data to send to the page (requires URL Data Add-On)
  urlData: {
    customerId: '123',
  },
}

window.dotEmbed.load(el, config, function (page) {
  var events = page.events
  var actions = page.actions
  var datafields = page.datafields

  // Subscribe to triggered events.
  events.subscribe('new-lead', function (lead) {
    console.log(lead)
  })

  // Get a session data field value
  datafields.get('counter').then(function (value) {
    console.log(value)
  })

  // Set a session data field value
  datafields.set('counter', 10)

  // Run a custom action
  actions.run('showButton')
})

Updated on May 19, 2022

Was this article helpful?

Related Articles