Log In

Book A Demo

GUIDE

AudioPlayer
Implementation Guide

Set up your AudioPlayer in minutes.

Follow these simple steps to start engaging your readers with audio.

  1. Introduction

Welcome to the Powerbeans Player Automatic Integration Guide!  This guide will walk you through setting up the Powerbeans Player on your website quickly and easily.  The Powerbeans Player is a powerful AI solution that automatically converts your existing articles into engaging audio content, giving your users a new way to consume your content, either in full or as a concise summary.

We understand that every website is different, and you might not have dedicated engineering resources. That's why we've created Automatic Integration. It requires minimal coding – just a few lines added to your website– and we handle the rest. We'll automatically extract your content and generate audio, so you can focus on what you do best: creating great content.

If you need more control, or advanced features, we also offer an API integration.

1.1 Integration options comparison

There are two main ways of integrating the Powerbeans player on your website. The automatic version, which greatly simplifies things for you, and an API method that gives you more control over the creation and display aspects of the player.

We recommend the automatic implementation as it supports:

  • Automatic summary generation

  • Automatic content categorization

  • Use any voice you'd like

  • Player customization

  • Reporting

1.2 Getting started: Obtain your Powerbeans Token

For any of the integrations you first must obtain an integration Token. The Powerbeans team will create tokens by domain/subdomain that will remain constant across all interactions with the Powerbeans player.

The token should look something similar to this: 7fa9148-82df-4554-b05f-bg19e8cc8953

For any of the integrations you first must obtain an integration Token. The Powerbeans team will create tokens by domain/subdomain that will remain constant across all interactions with the Powerbeans player.

The token should look something similar to this: 7fa9148-82df-4554-b05f-bg19e8cc8953

For any of the integrations you first must obtain an integration Token. The Powerbeans team will create tokens by domain/subdomain that will remain constant across all interactions with the Powerbeans player.

The token should look something similar to this: 7fa9148-82df-4554-b05f-bg19e8cc8953

  1. Player implementation

2.1 Widget version – RECOMMENDED

This is the simplest and most recommended integration method.

Add the following script to your article template, precisely where you want the player to appear. We recommend placing it immediately after the article title or before the first paragraph for optimal user experience.

<script id="pb-scr">!function(){var t=document.createElement("script");t.src="https://dev.powerbeans-ai.com/powerbeans-widget-latest.js",document.body.appendChild(t);var r=document.createElement("div");r.id="powerbeans-widget",r.setAttribute("apiKey","YOUR_POWERBEANS_TOKEN");var a=document.getElementById('pb-scr');a.parentNode.insertBefore(r,a.nextSibling)}();</script>

where YOUR_POWERBEANS_TOKEN is the token generated by the Powerbeans team for you. Notice that the token will be different for each domain/subdomain.

The Powerbeans player will automatically process and render the content of each article upon every visit, after an initial setup period of a few hours. Your Powerbeans team will let you know once the verification process is complete. To use the player, add the script to all your article pages. 

where YOUR_POWERBEANS_TOKEN is the token generated by the Powerbeans team for you. Notice that the token will be different for each domain/subdomain.

The Powerbeans player will automatically process and render the content of each article upon every visit, after an initial setup period of a few hours. Your Powerbeans team will let you know once the verification process is complete. To use the player, add the script to all your article pages. 

where YOUR_POWERBEANS_TOKEN is the token generated by the Powerbeans team for you. Notice that the token will be different for each domain/subdomain.

The Powerbeans player will automatically process and render the content of each article upon every visit, after an initial setup period of a few hours. Your Powerbeans team will let you know once the verification process is complete. To use the player, add the script to all your article pages. 

2.1.1 Information we'll need

To set up Automatic Integration, please provide the following information to the Powerbeans team:

  • Default Language: The primary language of your content: We'll assume all articles are in this language unless otherwise specified.

  • Default Voice: The voice you'd like to use for your audio content by default.

  • Sample Article URLs: Provide 3-5 sample article pages from your website.  This helps us ensure accurate content extraction.  For example:

    • demo.yourdomain.com/article1

    • demo.yourdomain.com/article2

    • demo.yourdomain.com/article3

  • HTML Cleanup (if needed): Let us know if your article pages contain extraneous text (like navigation links, social sharing buttons, etc.) within the main content area.  We can help clean this up to ensure only the relevant article text is converted to audio.

2.2 Google Tag Manager version

Click here to expand or collapse the Google Tag Manager version guide.

Click here to expand or collapse the Google Tag Manager version guide.

Click here to expand or collapse the Google Tag Manager version guide.

2.3 API version

For all implementations where you need more control or make use of advanced features, using the Powerbeans player through the API could be a good idea. This will require you to send the content of your articles so we can process them as audio. Then, the player will be automatically rendered in all those URLs whose content has been created.

Click here to expand or collapse the API guide.

Click here to expand or collapse the API guide.

Click here to expand or collapse the API guide.

  1. AMP Implementation Guide

If you use Accelerated Mobile Pages (AMP), follow these steps:

STEP 1– Add the following code to your site's head section (<head>).

STEP 1– Add the following code to your site's head section (<head>).

<!-- Import AMPs amp-iframe component -->
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Note: you might have this line already integrated into your site's AMP version. In that case, you can skip this step.

STEP 2– Add the following code exactly where the player should show (we recommend below the title or above the image):

<amp-iframe
id="powerbeans-iframe"
layout="responsive"
width="480"
height="180"
resizable
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"      
src="https://dev.powerbeans-ai.com/player/latest/index.html?apikey=TOKEN&playerlang=LG&contenturl=YOUR_CONTENT_URL_ENCODED">
<div placeholder>Loading...</div>
<div overflow></div>
</amp-iframe>

Please replace the following placeholders::

  • TOKEN: Your Powerbeans-provided token (the same one used for non-AMP implementation)

  • LG: The language of the page ("en" for English or "es" for Spanish).

  • YOUR_CONTENT_URL_ENCODED: the URL-encoded version of the page. Example: if your AMP URL is https://www.example.com/category/your-article/amp , the encoded URL would be https%3A%2F%2Fwww.example.com%2Fcategory%2Fyour-article. If your AMP URL includes a query parameter (e.g., ?amp=1), you don't need to remove it before encoding. The encoded URL will not always be identical to the displayed URL. Ensure you are using a proper URL encoding tool or library.

  1. FAQ

What if I only want to generate audio for some of my articles?
Simply add the code from the widget Implementation section only to the pages where you want audio content generated.


Is there a limit to the number of audio contents I can create?
Yes.  Your agreement with Powerbeans includes fair use daily and monthly limits on the number of articles and total characters you can convert to audio.  Once you reach this limit, audio creation and regeneration will be paused until the next period begins.  Your Powerbeans account manager can provide details on your specific limits.


Are audios regenerated after I update the text of my articles?
The audio version of your articles will be automatically regenerated when you update the text. This feature uses the article's update date to trigger reprocessing and each instance will count towards your usage limits. By default, this feature is disabled. Please contact your Powerbeans team if you wish to enable it.


What happens if I redesign my website?
If you plan to redesign your website, please reach out to the Powerbeans team ahead of time and provide us with early access to the new version. This will ensure that the player integrates seamlessly with the redesigned site.

For any further technical questions, please refer to your Powerbeans team.

Thanks for choosing us!

Last edited: 24/03/2025

Last edited: 24/03/2025