1. Home
  2. Embed Interactive Content
  3. Embed API: Communicate Between Your Website And Its Interactive Experiences

Embed API: Communicate Between Your Website And Its Interactive Experiences

Contents

When you embed a project on your website, Dot.vu provides a client side API that enables you to communicate between your website and the embedded Dot.vu experience. To enable this, you must use the Dot Embed Library Add-On in your experience.

There are several options for sending and retrieving information:

  • 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 this is only available for the event type “projectLoad”. That is the default event you obtain when copying a project tag from your project’s “Put on Website” editor setting.

Once the project has loaded and is ready, the optional callback in the details property will be called, with a possible error as first argument, and the Page instance as second argument, on success.

Once you have access to the Page instance, you can start to use it to handle events, actions and data fields.

window["dotVu"]({
  eventType: "projectLoad",
  accountId: 155,
  details: {
    options: {...},
    config: {
      ...,
      // optional url data to send to the page (requires URL Data Add-On)
      urlData: {
        customerId: '123',
      }
    },
    callback: function (error, page) {
      if (error) {
        // handle loading error

      } else if (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')
      }
    },
  },
});

Did you know? You can use the callback parameter to handle loading errors, so you can inform and/or redirect your users for continuous engagement in case of loading errors.

Legacy API

If you are using the Legacy API please see the example below. If you are unsure if you are using the Legacy API or not, look for window.dotEmbed on your Dot.vu embedding snippet.

// 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 June 20, 2024

Was this article helpful?

Related Articles