Integrate Web Player into your website
Last updated
Last updated
Finish the creation of a Web Player by clicking Create new player button.
You will now see your newly created player appear in the Distribution Channels section.
Click on the Integrated Webplayer to see the integration code snippet.
If you don't use our premium feature paywall integration, you just need the Free Article player code. Instructions how to integrate the player with paywall, you'll find here.
Just copy and paste this snippet into your website template.
We recommend placing the player above the fold for the best user engagement. Our statistics show that following our recommendations can lead to a 10% click rate on the play button.
If you want to disable the players autoload and load the player manually, you need to click on the checkbox Disable Autoload. You will receive an extended player version to add your specifications to tricker the player.
One important rule for the Web Player to work is to provide an URL of your articles.
No matter how your articles are added to BotTalk - via RSS feed, API, or manually - please always provide an URL to this article.
BotTalk Web Player will use the URL attribute to match the article with the corresponding audio edition.
In case you chose Parser as a content source, no action is required on your side. BotTalk parser will add the article URL automatically.
Add the global JavaScript function on the page that will handle the event when it is triggered. The function should have the following format:
When embedding the web player on your page, add the data-callback attribute to the player element and set its value to the name of the global callback function you defined in step 1:
Whenever the player sends a message to the server, your callback function will be called with an event object as its parameter. The event object will contain the following properties:
ac: The action performed by the user (e.g. "seen", "click", etc.).
au: The name of the file being played.
u: The user identifier.
In addition, for certain actions (e.g. "click"), the event object may contain additional properties, such as the playback progress or the coordinates of the click.
Inside your callback function, you can add your own code to handle the event data in any way you like. For example, you might want to log the event data to a database or send a message to a third-party service.
For actions "pause", "resume", "progress" and "close" the event object contain additional properties, such as ct (current time in float seconds) and d (total audio duration in float seconds)
By adding the data-callback attribute to the player element and defining a global callback function, you can start receiving and handling events from the web player.
