Skip to content

Get Started with Antourage Viewer JavaScript SDK

Pre-requisites

For a successful integration please find our requirements below and make sure that you are compatible.

Supported Browsers:

  • Chrome - 2 last versions
  • Safari - 2 last major versions
  • Firefox - 2 last versions + ESR
  • Edge - 16-18 and 2 last Chromium-based versions

Install

The following code should be added to a web-site:

<script>
  // NOTE: Parameter below is REQUIRED. This has to be requested from Antourage team and specified.
  var PARTNER_ID = 'PARTNER_ID';

  //NOTE: Parameter below is OPTIONAL. If not specified or not supported browser locale will be used. If browser locale is not supported English locale will be used.
  var LANGUAGE_LOCALE = 'LANGUAGE_LOCALE' // should be in format - 'en-US', 'en'. Also can have multiple values - 'en-UA, es, sv-SE';

  // NOTE: Parameters below are purely OPTIONAL. If not specified, default colors will be used. The color should be specified in '#000000' format (HEX).
  // var COLOR_WIDGET_BORDER = '#000000';
  // var COLOR_WIDGET_PING_BORDER: '#000000';
  // var COLOR_CTA_BG = '#000000';
  // var COLOR_CTA_TEXT = '#000000';
  // var COLOR_LIVE = '#000000';
  // var COLOR_TITLE_BG = '#000000';
  // var COLOR_TITLE_TEXT = '#000000';
  // var COLOR_NAME_BG = '#000000';
  // var COLOR_NAME_TEXT = '#000000';

  window._ANTOURAGE_CONFIG = {
    partner_id: PARTNER_ID,
    language_locale: LANGUAGE_LOCALE
    // color_widget_border: COLOR_WIDGET_BORDER,
    // color_widget_ping_border: COLOR_WIDGET_PING_BORDER,
    // color_cta_bg: COLOR_CTA_BG,
    // color_cta_text: COLOR_CTA_TEXT,
    // color_live: COLOR_LIVE,
    // color_title_bg: COLOR_TITLE_BG,
    // color_title_text: COLOR_TITLE_TEXT,
    // color_name_bg: COLOR_NAME_BG,
    // color_name_text: COLOR_NAME_TEXT
  };
</script>
<script>
  !(function () {
    window._ANTOURAGE = new EventTarget();
    const t = window,
      e = document,
      n = function () {
        const t = e.createElement('script');
        (t.type = 'text/javascript'), (t.async = !0), (t.src = 'https://widget.antourage.com/v3/widget.js');
        const n = e.getElementsByTagName('script')[0];
        n.parentNode.insertBefore(t, n);
      };
    t.attachEvent ? t.attachEvent('onload', n) : t.addEventListener('load', n, !1);
  })();
</script>

It is recommended to place this code at the end of <head> element. The script will inject all other necessary elements.

Parameters

This data will be provided before integration:

  • PARTNER_ID - The 'ID' that has been assigned to the partner. This 'ID' can be requested from the Antourage partner's account manager.
  • LANGUAGE_LOCALE - The preferred locale in which portal should be displayed. If not supported or not specified browser locale will be used. If browser locale not supported English will be used.
  • COLOR_WIDGET_BORDER - The main background color for the portal.
  • COLOR_WIDGET_PING_BORDER - The color of the order of the portal.
  • COLOR_CTA_BG - The background color for the call to action button that includes the copy 'Join for Full Experience'.
  • COLOR_CTA_TEXT - The color of the font used inside the call to action button that includes the copy 'Join for Full Experience'.
  • COLOR_LIVE - The colour of the 'LIVE' label, which is used when content is live.
  • COLOR_TITLE_BG - The color used in the background of the stream name label.
  • COLOR_TITLE_TEXT - The color of the font used inside the stream name label.
  • COLOR_NAME_BG - The color used in the background of the content creator or show name label.
  • COLOR_NAME_TEXT - The color of the font used inside the content creator or show name label.