Single-page apps

The widget loads the player once, when the page loads. If your site changes articles without a full page load (client-side routing), call Everlit.autoAudio.load() each time you show an article — the same pattern as googletag.display(). The script tag stays as it is. Requires widget 3.4.0 or later.

Setup

Create the command queue before the script tag, so your code can call the widget whether or not the script has finished loading:

Copy<script>
  window.Everlit = window.Everlit || {};
  Everlit.autoAudio = Everlit.autoAudio || {};
  Everlit.autoAudio.cmd = Everlit.autoAudio.cmd || [];
</script>
<script
  defer
  src="https://cdn.everlit.audio/libs/everlitAutoAudio.js"
  type="text/javascript"
></script>

Each Time You Show an Article

1. Render the article, including a new everlit-auto-audio-widget div.
2. Update <link rel="canonical"> (or og:url) and the article's meta tags for the new route. The widget reads these to decide which article it is on.
3. Call load():

CopyEverlit.autoAudio.cmd.push(function () {
  Everlit.autoAudio.load().then(function (result) {
    if (result.status === 'ready') {
      console.log('Player ready', result.articleId, result.element);
    }
  });
});

It's safe to call load() for every article, including the first: a call for the page the widget has already loaded (or is loading) returns the same result without another request. Pages without a widget div resolve with status: 'none' and make no request.

What load() Does

• Removes the player or click-to-create button from the previous article if it is still on the page, along with the audio metadata it added to <head>.
• Finds the widget div and loads the player for the current article, exactly as on a full page load. The usual JavaScript events fire.
• If you call load() for a new article before the previous one has finished, the earlier call stops without touching the page and resolves with status: 'superseded'.
• After an error, calling load() again for the same page retries.

Result

The Promise always resolves — it never rejects — with an object whose status is one of:

Frameworks

The widget replaces the widget div with its own element. If a framework (React, Vue, Svelte…) rendered that div, it will later try to update or remove a node that is no longer there. Render the div as raw HTML inside an element the framework owns, and give that element a key tied to the article so each article gets a fresh one:

Copy// React
<div
  key={article.url}
  dangerouslySetInnerHTML={{
    __html: '<div id="everlit-auto-audio-widget" data-publication-id="YOUR-PUBLICATION-ID"></div>'
  }}
/>