Waymark Plugin — Installation

The Waymark Plugin can be installed either as an NPM package or via a <script> tag in your HTML.

NPM Package

Tip

This is recommended for most use cases.

npm install --save @waymark/waymark-sdk

The package includes both CommonJS and ESModule builds, as well as TypeScript typings.

After installing the Waymark Plugin SDK, you may import the Waymark class and initialize it like so:

import Waymark from '@waymark/waymark-sdk';

const waymark = new Waymark('partnerID', options);

See the API reference page for more details on how to initialize and use the Waymark class.

HTML script tag

You may use any trusted npm CDN such as https://www.unpkg.com or https://www.jsdelivr.com to load the Waymark SDK via a <script> tag at runtime.

<script src="https://cdn.jsdelivr.net/npm/@waymark/waymark-sdk@3.x.x" async></script>

The async attribute is optional, but recommended as it will allow the script to load asynchronously so that it does not block the page's initial render.

When the script is loaded, the Waymark class will be made available globally on window.Waymark. To be notified when window.Waymark is loaded and available for use, you may set up an event listener in one of two ways:

  1. Set a function on window.onWaymarkInit. This function will be called when the SDK has loaded and is available for use.

    window.onWaymarkInit = () => {
      const waymark = new window.Waymark(partnerID, options);
    };
  2. The SDK will also emit a custom waymark:init event on the document which can be subscribed to.

    document.addEventListener('waymark:init', () => {
      const waymark = new window.Waymark(partnerID, options);
    });

WARNING

If the browser loads your script after the Waymark Plugin script, it is possible that you could miss the waymark:init event.

It is recommended that you check if window.Waymark is already available to perform your setup instead of just listening for the waymark:init event.

const onWaymarkInit = () => {
  const waymark = new window.Waymark(partnerID, options);
};

if (window.Waymark) {
  // If the Waymark SDK is already loaded, run the setup code immediately
  onWaymarkInit();
} else {
  document.addEventListener('waymark:init', onWaymarkInit);
}