# Conviva
Tip: open your browser's developer console and use the `player` and `THEOplayer` variables to interact with this demo.
**Stream template**HLS VOD (Big Buck Bunny) (hls-vod)**Customer key**876a2328cc34e791190d855daf389567c96d1e86**Gateway URL**https\://876a2328cc34e791190d855daf389567c96d1e86.ts-testonly.conviva.comLoad stream
No events reported yet.
This example reports playback to [Conviva](https://pulse.conviva.com/) using the [Conviva connector for THEOplayer](https://www.npmjs.com/package/@theoplayer/conviva-connector-web) ([API reference](https://theoplayer.github.io/web-connectors/api/modules/Conviva_Connector.html)). The connector bridges player events to the Conviva SDK: it starts a session when playback begins and reports content metadata, buffering and errors automatically. The connector must be created before any source is set on the player.
```js
const convivaIntegration = new THEOplayerConvivaConnector.ConvivaConnector(player, convivaMetadata, {
debug: true,
customerKey,
gatewayUrl,
});
// Source-specific metadata does not carry over to the next source,
// so set it again after every sourcechange.
player.addEventListener('sourcechange', () => {
convivaIntegration.setContentInfo({
['Conviva.assetName']: 'Big Buck Bunny',
['Conviva.streamUrl']: source.sources.src,
['Conviva.streamType']: 'VOD',
});
});
```
The Customer key and Gateway URL inputs accept your own credentials; an empty input falls back to the demo's test values (omit `gatewayUrl` for production). Pressing **Load stream** calls `convivaIntegration.destroy()` to close the previous session, creates a new `ConvivaConnector` with the entered credentials, and then sets the selected source. Use the stream templates to switch between HLS/DASH and VOD/live sources; the content metadata is updated on each `sourcechange`.
> **Note**
>
> With `debug: true`, Conviva SDK debug logs are printed in the browser's DevTools console.
Code
demo.html
```html
Conviva
```