# Integrate 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.
Click on the **Integrated Webplayer** to see the integration code snippet.
BotTalk Audio CMS - Web Player Integration Code Snippet
If you don't use our premium feature [paywall integration](/docs/monetization/paywall-integration.md), you just need the **Free Article player code.** Instructions how to integrate the player with paywall, you'll find [here](/docs/monetization/paywall-integration.md).
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.
{% hint style="warning" %}
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.
{% endhint %}
### 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](https://bottalk.io/learn-with-bottalk/how-to-create-and-configure-text-to-speech-projects/#rss-feed), [API](https://bottalk.io/learn-with-bottalk/how-to-create-and-configure-text-to-speech-projects/#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.
### Custom statistics collector
1. Add the global JavaScript function on the page that will handle the event when it is triggered. The function should have the following format:
```javascript
function some_name_of_callback(event) {
// your code to handle the event goes here
}
```
1. 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:
```html
```
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.
2. 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.
3. 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.
4. 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.
{% hint style="info" %}
Following events are available:
`click`
`play`
`pause`
`resume`
`progress`
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.bottalk.io/docs/text-to-speech/integrate-web-player/integrate-web-player-into-your-website.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.