3 min read Guides

[Docs] How to Publish Audio Articles with Native Web Player

[Docs] How to Publish Audio Articles with Native Web Player

Learn how to embed text-to-speech audio into your website.

Native Web Player

BotTalk Native Web Player allows your readers to have an audio version embedded into every (any) article.

BotTalk Native Webplayer integrated into each article at Augsburger Allgemeine

Native means that BotTalk player is supported natively on all mobile devices as well - Android and iOS. The users can listen to the articles in the background or even when their device's screen is turned off.

BotTalk Player will appear on the lock screen of the device - with all usual native controls.

BotTalk Web Player supports both iOS and Android native audio controls
BotTalk Web Player supports both iOS and Android native audio controls

Native Web Player is required if you chose Parser as a content source for your audio articles during the project set-up process.

Create a Web Player

To create and configure a Web Player, scroll down to the Distribution Channels section in your project overview.

BotTalk Audio CMS - Distribution Channels
BotTalk Audio CMS - Distribution Channels

Click the Add channel button. You will see the multitude of distribution channels available to you.

BotTalk Audio CMS - Distribution Channels Selection
BotTalk Audio CMS - Distribution Channels Selection

For now, we only need a web player, so click Add Web Player button to begin the set-up process.

Configure a player's look and feel

The Web Player's look and feel must match your website design.

You can choose the accent colors of the Web Player by clicking on the color palette selection Color of your player.

BotTalk Audio CMS - Web Player Customizations

You can also provide a little guide to your readers that might not understand what the player button on your article's page means. We recommend describing an appealing call to action in the Player title section.

BotTalk values the privacy of your users; that is why our Web Player is fully GDPR compliant.

BotTalk is an official partner of the leading cookies consent management provider - https://www.consentmanager.net/.

By selecting the Cookies consent manager provider in the dropdown, BotTalk vendor id will be automatically added.

BotTalk Audio CMS - Cookies Consent Manager Provider
BotTalk Audio CMS - Cookies Consent Manager Provider 

All you need to do now is select BotTalk as a vendor in the cookies consent management settings.

Integrate a Web Player into your website

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.

BotTalk Audio CMS - Web Player in Distribution Channels Section
BotTalk Audio CMS - Web Player in Distribution Channels Section

Click on the Integrated Webplayer to see the integration code snippet.

BotTalk Audio CMS - Web Player Integration Code Snippet
BotTalk Audio CMS - Web Player Integration Code Snippet

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.

URL Matching

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.