> ## 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 BeyondWordsLogoDemo = () => {
  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 [target, setTarget] = useState(null);
  const [player, setPlayer] = useState(null);
  const [analyticsId, setAnalyticsId] = useState(null);
  useEffect(() => {
    if (!target) return;
    let instance;
    const init = () => {
      instance = new window.BeyondWords.Player({
        target,
        content: MOCK_CONTENT,
        widgetStyle: "none",
        showUserInterface: false,
        analyticsConsent: "none"
      });
      const sync = () => setAnalyticsId(instance.analyticsId);
      instance.addEventListener("<any>", sync);
      sync();
      setPlayer(instance);
    };
    if (window.BeyondWords) init(); else window.addEventListener("BeyondWordsReady", init);
    return () => {
      window.removeEventListener("BeyondWordsReady", init);
      if (instance) instance.destroy();
    };
  }, [target]);
  return <div className="not-prose flex w-full items-center justify-center rounded-lg border p-10" style={{
    minHeight: "16rem",
    fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
  }}>
      <div ref={setTarget} style={{
    display: "none"
  }} />
      {player && <a style={{
    cursor: "pointer"
  }} href={`https://beyondwords.io/?utm_source=${encodeURIComponent(window.location.origin)}&utm_medium=player&utm_campaign=${analyticsId}`} target="_blank" rel="noreferrer">
          <svg width={16} height={16} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill="currentColor" d="M29.4,18.59A20.61,20.61,0,0,0,28,15c2.62-5.17,2.8-10.15,0-13a7.49,7.49,0,0,0-5.47-2,14.14,14.14,0,0,0-3.9.6A21,21,0,0,0,15,2,17,17,0,0,0,7.59,0H7.53A7.57,7.57,0,0,0,2.05,2.05,7.59,7.59,0,0,0,0,7.54v0A17,17,0,0,0,2,15C-.58,20.17-.76,25.14,2.05,28A7.54,7.54,0,0,0,7.56,30,16.8,16.8,0,0,0,15,28a20.06,20.06,0,0,0,3.57,1.44,14.08,14.08,0,0,0,3.89.6A7.53,7.53,0,0,0,28,28C30,25.88,30.55,22.55,29.4,18.59ZM19.18,2.67a11.78,11.78,0,0,1,3.29-.52,5.46,5.46,0,0,1,4,1.41c1.5,1.5,1.81,4.08.89,7.25a18.56,18.56,0,0,1-.68,1.88,31.07,31.07,0,0,0-4.17-5.15A31.16,31.16,0,0,0,17.3,3.35,18.56,18.56,0,0,1,19.18,2.67ZM3.56,3.56a5.43,5.43,0,0,1,4-1.41,13.77,13.77,0,0,1,5.19,1.2A31.27,31.27,0,0,0,7.54,7.53a30.81,30.81,0,0,0-4.19,5.18C1.76,8.91,1.69,5.44,3.56,3.56Zm4,24.27a5.44,5.44,0,0,1-3.95-1.4c-1.5-1.5-1.82-4.08-.89-7.25a18.29,18.29,0,0,1,.67-1.87,31.1,31.1,0,0,0,4.19,5.16,31.07,31.07,0,0,0,5.15,4.17A13.85,13.85,0,0,1,7.52,27.83ZM15,25.52A27.82,27.82,0,0,1,9.05,21a28,28,0,0,1-4.57-6,28.51,28.51,0,0,1,4.58-6A27.82,27.82,0,0,1,15,4.48a27.68,27.68,0,0,1,6,4.57A27.86,27.86,0,0,1,25.52,15a27.9,27.9,0,0,1-4.58,6A28,28,0,0,1,15,25.52Zm11.49.93a5.47,5.47,0,0,1-4,1.42,11.78,11.78,0,0,1-3.29-.52,16.79,16.79,0,0,1-1.9-.69,31.29,31.29,0,0,0,5.18-4.2,31.35,31.35,0,0,0,4.2-5.19,16.93,16.93,0,0,1,.69,1.91C28.27,22.36,28,24.94,26.45,26.45Z" />
          </svg>
        </a>}
    </div>;
};

<Tabs>
  <Tab title="Preview">
    <BeyondWordsLogoDemo />
  </Tab>

  <Tab title="Code">
    ```jsx BeyondWordsLogo.jsx theme={null}
    "use client";

    import { usePlayerSelector } from "@/registry/react/PlayerProvider";

    export function BeyondWordsLogo() {
      const analyticsId = usePlayerSelector((p) => p.analyticsId);
      return (
        <a
          className="cursor-pointer pointer-fine:hover:opacity-80"
          href={`https://beyondwords.io/?utm_source=${encodeURIComponent(window.location.origin)}&utm_medium=player&utm_campaign=${analyticsId}`}
          target="_blank"
          rel="noreferrer"
        >
          <svg width={16} height={16} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              fill="currentColor"
              d="M29.4,18.59A20.61,20.61,0,0,0,28,15c2.62-5.17,2.8-10.15,0-13a7.49,7.49,0,0,0-5.47-2,14.14,14.14,0,0,0-3.9.6A21,21,0,0,0,15,2,17,17,0,0,0,7.59,0H7.53A7.57,7.57,0,0,0,2.05,2.05,7.59,7.59,0,0,0,0,7.54v0A17,17,0,0,0,2,15C-.58,20.17-.76,25.14,2.05,28A7.54,7.54,0,0,0,7.56,30,16.8,16.8,0,0,0,15,28a20.06,20.06,0,0,0,3.57,1.44,14.08,14.08,0,0,0,3.89.6A7.53,7.53,0,0,0,28,28C30,25.88,30.55,22.55,29.4,18.59ZM19.18,2.67a11.78,11.78,0,0,1,3.29-.52,5.46,5.46,0,0,1,4,1.41c1.5,1.5,1.81,4.08.89,7.25a18.56,18.56,0,0,1-.68,1.88,31.07,31.07,0,0,0-4.17-5.15A31.16,31.16,0,0,0,17.3,3.35,18.56,18.56,0,0,1,19.18,2.67ZM3.56,3.56a5.43,5.43,0,0,1,4-1.41,13.77,13.77,0,0,1,5.19,1.2A31.27,31.27,0,0,0,7.54,7.53a30.81,30.81,0,0,0-4.19,5.18C1.76,8.91,1.69,5.44,3.56,3.56Zm4,24.27a5.44,5.44,0,0,1-3.95-1.4c-1.5-1.5-1.82-4.08-.89-7.25a18.29,18.29,0,0,1,.67-1.87,31.1,31.1,0,0,0,4.19,5.16,31.07,31.07,0,0,0,5.15,4.17A13.85,13.85,0,0,1,7.52,27.83ZM15,25.52A27.82,27.82,0,0,1,9.05,21a28,28,0,0,1-4.57-6,28.51,28.51,0,0,1,4.58-6A27.82,27.82,0,0,1,15,4.48a27.68,27.68,0,0,1,6,4.57A27.86,27.86,0,0,1,25.52,15a27.9,27.9,0,0,1-4.58,6A28,28,0,0,1,15,25.52Zm11.49.93a5.47,5.47,0,0,1-4,1.42,11.78,11.78,0,0,1-3.29-.52,16.79,16.79,0,0,1-1.9-.69,31.29,31.29,0,0,0,5.18-4.2,31.35,31.35,0,0,0,4.2-5.19,16.93,16.93,0,0,1,.69,1.91C28.27,22.36,28,24.94,26.45,26.45Z"
            />
          </svg>
        </a>
      );
    }
    ```
  </Tab>
</Tabs>

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npx @beyondwords/cli components add beyondwords-logo
  ```

  ```bash pnpm theme={null}
  pnpm dlx @beyondwords/cli components add beyondwords-logo
  ```

  ```bash yarn theme={null}
  yarn dlx @beyondwords/cli components add beyondwords-logo
  ```

  ```bash bun theme={null}
  bunx --bun @beyondwords/cli components add beyondwords-logo
  ```
</CodeGroup>

## Usage

```tsx theme={null}
import { PlayerProvider } from '@/registry/react/PlayerProvider';
import { BeyondWordsLogo } from '@/registry/react/BeyondWordsLogo';

export function Player() {
  return (
    <PlayerProvider args={{ projectId: 9504, contentId: "ba00ef51-03ac-4a85-8b98-e45c957e8ef8", showUserInterface: false }}>
      <BeyondWordsLogo />
    </PlayerProvider>
  );
}
```

Renders the BeyondWords logo as a link to beyondwords.io, tagged with UTM
parameters and the player's `analyticsId` (read from the surrounding
[`PlayerProvider`](/player-ui/react/player-provider)). The SVG uses `currentColor`, so
it inherits the surrounding text color. Style it by setting the text color on a
parent.

## Reference

|                       |                                                                 |
| --------------------- | --------------------------------------------------------------- |
| **Props**             | None                                                            |
| **Player state read** | `analyticsId`                                                   |
| **Events emitted**    | None (display only)                                             |
| **Requires**          | a [`PlayerProvider`](/player-ui/react/player-provider) ancestor |