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

1

Embed the player script

Copy the Magic Embed script and add it to your web page.
<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 or summary to embed the audio summary, video summary, or video article instead of the default full audio article.
2

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 to the embed code.
By setting a sourceId, the audio will only be generated once even if the same content appears at multiple URLs.
3

Navigate to Magic Embed settings

Go to Project > Settings > Integrations > Magic Embed.
4

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
5

Set request headers (optional)

For paywalled or protected content, you may need to provide authentication headers to grant our servers access to your content.
  • Add a Header Name and Header Value.
  • Click + to add multiple headers if needed.
  • Ensure the headers grant full access to your content.
Requests will be made with User-Agent: BeyondWords Importer
6

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.
Requests will be sent from 20.234.8.180 or 176.34.249.78
7

Enable Magic Embed

After configuring all settings:
  1. Turn on the Magic Embed switch.
  2. Click Save changes.
For more control over content extraction and generation, you can use data attributes to dynamically change the voice on a per-article basis, control publish dates, feature images, and other metadata.