AutheosUI

The AutheosUI class exposes functions to embed video into your webshop quickly and conveniently.

AutheosUI (constructor)#

new AutheosUI([config]);
// or
new AutheosUI(base, [config]);

Arguments#

  • base (Autheos): An instance of Autheos.
  • config (Object): A configuration object.

It is possible to omit the base argument. In that case a default instance of the Autheos class is used.

Supported config properties:

{
  // Popup configuration.
  popup: {
    // Set the type of navigation. This can be:
    // - 'thumbnails' (Default): This will show a carousel containing the
    //   thumbnails of videos.
    // - 'arrows': This will show a left and right arrow with a video count in
    //   the popup like this: < 1 of 3 >
    navigation: 'thumbnails'
  },

  // Event tracking configuration. By default, this object is empty. You can add
  // items here that will be passed along to `Autheos.attachListener` when
  // videos have been returned.
  events: {
    'add-to-cart': '#your-add-to-cart-selector'
  },

  // Template configuration. By default we add 3 helpers: thumbnail, button and
  // inline.
  templates: {
    thumbnail: function (ctx, config) {
      // `ctx` is the context of the video result.
      // `config` is a copy of this config object.
      // Return a DOM element.
    }
  },

  // Function that actually renders the created UI into the page.
  doRender: function (ctx, template, target) {
    // `ctx` is the context of the video result.
    // `template` is a DOM element created by the templates.
    // `target` is the currently targeted node.
  }
}

AutheosUI.embed#

This function allows you to embed videos

embed(query, [target]);
// or
embed(query, [config], [target]);

Arguments#

  • query (Object): A query object. Requires a templateId property to be set to resolve what template should be rendered. This template ID should match your config.templates.<templateId> configuration. See examples for more detail.
  • config (Object): A configuration object. This will merge with the instance config and be used instead for this specific embed.
  • target (Element): The target element to embed the videos into. If not provided, document.currentScript is used, when available.

If the config argument is omitted, a target argument may be provided instead.

Returns#

Returns a promise that resolves with a new context after the request completes.

Example#

const instance = new AutheosUI();
instance.embed({
  ean: '1234567890123',
  templateId: 'thumbnail'
});

AutheosUI.thumbnail, AutheosUI.button and AutheosUI.inline#

These are a few proxy functions for AutheosUI.embed to make embedding even easier. All they do is add the necessary templateId to the query object and forwards remaining arguments to AutheosUI.embed.

Example#

const instance = new AutheosUI();
instance.thumbnail({
  ean: '1234567890123'
});