> ## 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.

# Overview

> Easily embed BeyondWords on any web page.

Magic Embed is a **lightweight, client-side solution** that lets you automatically
generate and embed audio into your articles. It will:

1. Extract the article content from your web page.
2. Generate the audio.
3. Load the **BeyondWords Player** on your web page.

Many of our customers choose Magic Embed because it is easy to set up. Once
Magic Embed has been added to your web page, the integration can be managed
through the BeyondWords dashboard.

## How it works

Magic Embed is built into the standard BeyondWords Player.
It can be enabled by setting a flag when initializing the player.

When enabled, the player will load as normal but it will send a signal to our
servers containing the URL of the page on which it was loaded.

Initially, no audio will be available and the player is hidden. However,
in the background our servers will fetch the HTML of your web page.

Content will be extracted using open-source tools and proprietary algorithms
to determine which article content is relevant.

Audio will begin generating in the background. Once it is ready, the player
will show for new visitors to the web page.

BeyondWords will continue to receive signals from the player and
automatically update the audio if your article has changed.

## Setup

<Steps>
  <Step title="Embed the player script">
    Copy the **Magic Embed script** and add it to your web page.

    ```html theme={null}
    <script async defer src="https://proxy.beyondwords.io/npm/@beyondwords/player@latest/dist/umd.js"
      onload="new BeyondWords.Player({
        target: this,
        projectId: <ID>,
        clientSideEnabled: true,
      })">
    </script>
    ```

    * Replace `<ID>` with your project ID.
    * Add other settings, such as [video](/docs-and-guides/content/preferences/video) or [summary](/docs-and-guides/content/preferences/summarization) to embed the audio summary, video summary, or video article instead of the default full audio article.
  </Step>

  <Step title="Set the source ID (optional)">
    We recommend that you associate the audio with your own ID, e.g. the
    article ID from your CMS.

    * Add the `sourceId: <ID>` [identifier](/docs-and-guides/distribution/player/overview#identifiers) to the embed code.

    <Note>
      By setting a sourceId, the audio will only be generated once even if the same content appears at multiple URLs.
    </Note>
  </Step>

  <Step title="Navigate to Magic Embed settings">
    Go to **Project → Settings → Integrations → Magic Embed**.\
    Toggle **Magic Embed** on to activate it.
  </Step>

  <Step title="Allow website domains">
    Add the domains where you want Magic Embed to work. This ensures BeyondWords only processes content from your authorized domains, not from any random domain where someone might embed your player.

    * Enter your domain (e.g., `yourwebsite.com`) and click **Add**.
    * Magic Embed will only function on pages under these domains.
    * Subdomains will need to be added separately:
      * e.g. `www.yourwebsite.com`
      * e.g. `app.yourwebsite.com`

    <Note>Make sure to save your changes once you have added the allowed domains.</Note>
  </Step>

  <Step title="Set request headers (optional)">
    For **paywalled or protected content**, you may need to provide
    authentication headers to grant our servers access to your content.

    To set this up navigate to [Extraction settings](/docs-and-guides/integrations/extraction/content-extraction): **Project > Settings > Extraction**

    * Add a **Header Name** and **Header Value**.
    * Click **+** to add multiple headers if needed.
    * Ensure the headers grant full access to your content.

    <Note>
      Requests will be made with `User-Agent: BeyondWords Importer`
    </Note>
  </Step>

  <Step title="Enable Static IP (optional)">
    If your website requires **IP allowlisting**, you may need to enable this
    option to grant our servers access to your content.

    * Enable **Static IP**.
    * Ensure your server allows full access to your content.

    <Note>
      Requests will be sent from `20.234.8.180` or `176.34.249.78`
    </Note>
  </Step>

  <Step title="Enable Magic Embed">
    After configuring all settings:

    1. Turn on the **Magic Embed** switch.
    2. Click **Save changes**.
  </Step>
</Steps>

<Note>
  For more control over content extraction and generation, you can use [data attributes](/docs-and-guides/content/data-attributes) to dynamically change the voice on a per-article basis, control publish dates, feature images, and other metadata.
</Note>