> ## Documentation Index > Fetch the complete documentation index at: https://docs.beyondwords.io/llms.txt > Use this file to discover all available pages before exploring further. # BeyondWords Logo > A BeyondWords logo that links back to beyondwords.io with analytics attribution. export const WebComponentsDemo = ({name}) => { const MOCK_CONTENT = [{ id: "demo-1", title: "How AI voices are changing publishing", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 124, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 124 }], video: [], summarization: { audio: [], video: [] }, segments: [] }]; const MOCK_PLAYLIST = [{ id: "7a974fb1-1b89-4be3-a25d-4ad286d5305b", title: "Part 1: The newsroom shift", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 124, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 124 }], video: [], summarization: { audio: [], video: [] }, segments: [] }, { id: "129e7681-fa4d-4526-8be9-d27c946a5023", title: "Part 2: Voices at scale", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 98, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 98 }], video: [], summarization: { audio: [], video: [] }, segments: [] }, { id: "e9f2257c-14cf-46c0-bab6-bcaa9e229775", title: "Part 3: What comes next", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 152, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 152 }], video: [], summarization: { audio: [], video: [] }, segments: [] }]; const MOCK_ADVERTS = [{ id: "advert-1", type: "native", placement: "pre-roll", vastUrl: null, clickThroughUrl: "https://sponsor.example.com", imageUrl: "/images/player-ui/demo-cover.svg", textColor: "#ffffff", backgroundColor: "#943bfc", iconColor: "#ffffff", audio: [{ id: "advert-audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 8 }], video: [] }]; const content = JSON.stringify(MOCK_CONTENT).replace(/'/g, "'"); const playlistContent = JSON.stringify(MOCK_PLAYLIST).replace(/'/g, "'"); const adverts = JSON.stringify(MOCK_ADVERTS).replace(/'/g, "'"); const DEMOS = { "play-pause-button": ``, "time-indicator": ``, "prev-segment-button": ``, "next-segment-button": ``, "prev-seconds-button": ``, "next-seconds-button": ``, "playback-rate-button": ``, "content-title": ``, "call-to-action": ``, "download-button": ``, "beyondwords-logo": ``, "prev-track-button": ``, "next-track-button": ``, "playlist": ``, "feature-image": `
`, "progress-bar": `
`, "advert-link": ``, "standard-player": ``, "minimal-player": ``, "playlist-player": ``, "video-player": ``, "vertical-video-player": `` }; const markup = DEMOS[name]; return
{markup ?
:

No preview available for “{name}”.

}
; }; ```js BeyondWordsLogo.js theme={null} import { BwPlayerConsumer } from "@/registry/html/PlayerProvider"; const LOGO_SVG = ``; export class BwBeyondWordsLogo extends BwPlayerConsumer { _link = null; _listener = null; constructor() { super(); this._link = document.createElement("a"); this._link.target = "_blank"; this._link.rel = "noreferrer"; this._link.style.display = "inline-flex"; this._link.style.cursor = "pointer"; this._link.innerHTML = LOGO_SVG; } #render() { const analyticsId = this._player?.analyticsId ?? ""; this._link.href = `https://beyondwords.io/?utm_source=${encodeURIComponent(window.location.origin)}&utm_medium=player&utm_campaign=${analyticsId}`; } connectedCallback() { super.connectedCallback(); this._listener = this._player?.addEventListener("", () => this.#render()); this.#render(); this.appendChild(this._link); } disconnectedCallback() { this._player?.removeEventListener("", this._listener); this._listener = null; super.disconnectedCallback(); } } customElements.define("bw-beyondwords-logo", BwBeyondWordsLogo); ``` ## Installation ```bash npm theme={null} npx @beyondwords/cli components add beyondwords-logo --html ``` ```bash pnpm theme={null} pnpm dlx @beyondwords/cli components add beyondwords-logo --html ``` ```bash yarn theme={null} yarn dlx @beyondwords/cli components add beyondwords-logo --html ``` ```bash bun theme={null} bunx --bun @beyondwords/cli components add beyondwords-logo --html ``` ## Usage Import the modules (each calls `customElements.define`), then use the element inside a ``. ```html theme={null} ``` `` renders the BeyondWords logo as a link to beyondwords.io, tagged with UTM parameters and the player's `analyticsId` (read from the nearest [``](/player-ui/html/player-provider) ancestor). The SVG uses `currentColor`, so it inherits the surrounding text color — style it by setting the color on a parent. 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** | `analyticsId` | | **Events emitted** | None | | **Requires** | a [``](/player-ui/html/player-provider) ancestor and the player UMD global loaded |