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:
-
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); }; -
The SDK will also emit a custom
waymark:initevent 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);
}