Call To Action - Docs and guides

Preview
Code

CallToAction.js

import { BwPlayerConsumer } from "@/registry/html/PlayerProvider";

export class BwCallToAction extends BwPlayerConsumer {
  _listener = null;

  #render() {
    this.textContent = this._player?.callToAction ?? "Listen to this article";
  }

  connectedCallback() {
    super.connectedCallback();
    this._listener = this._player?.addEventListener("<any>", () => this.#render());
    this.#render();
  }

  disconnectedCallback() {
    this._player?.removeEventListener("<any>", this._listener);
    this._listener = null;
    super.disconnectedCallback();
  }
}

customElements.define("bw-call-to-action", BwCallToAction);

Installation

npx @beyondwords/cli components add call-to-action --html

pnpm dlx @beyondwords/cli components add call-to-action --html

yarn dlx @beyondwords/cli components add call-to-action --html

bunx --bun @beyondwords/cli components add call-to-action --html

Usage

Import the modules (each calls customElements.define), then use the elements. Nest the element inside a <bw-player-provider>.

<bw-player-provider
  data-project-id="9504"
  data-content-id="ba00ef51-03ac-4a85-8b98-e45c957e8ef8"
  data-show-user-interface="false"
>
  <bw-call-to-action></bw-call-to-action>
</bw-player-provider>

<script type="module">
  import "@/registry/html/PlayerProvider";
  import "@/registry/html/CallToAction";
</script>

<bw-call-to-action> finds its nearest <bw-player-provider> ancestor and reads callToAction from it, updating on every player event. When the source has no call-to-action configured, it falls back to "Listen to this article". Edit the fallback or the markup to match your UI.

These components expect the BeyondWords player to be available as a global BeyondWords (the player UMD script). Load it before the provider connects.

Reference


Attributes	None
Player state read	`callToAction`
Events emitted	None (display only)
Requires	a `<bw-player-provider>` ancestor and the player UMD global loaded