Documentation du SDK JavaScript du lecteur vidéo avec chat en direct CrossTalk
Cette documentation vous aide à ajouter un lecteur vidéo avec chat en direct à votre page web avec le SDK JavaScript de CrossTalk.
Importer le SDK
Ajoutez la balise script ci-dessous dans votre fichier HTML. Vous pouvez l'ajouter dans la section
<head> ou <body> de votre fichier HTML.
<script src="https://unpkg.com/crosstalk-comments-js"></script>Ajouter la div CrossTalk à l'endroit où vous souhaitez afficher le lecteur vidéo et le chat en direct
Vous pouvez ajouter du style et des classes à cette div pour personnaliser son positionnement et ses marges dans votre page. Le contenu intérieur ne sera pas affecté par votre CSS.
<div data-crosstalk-video-player data-wp="votre-nom-de-propriete-web" data-yt-id="id_vidéo_youtube"></div>
Inscrivez-vous pour un
compte CrossTalk
afin d'obtenir votre nom de propriété web unique et commencez à interagir avec votre audience
via le chat en direct de votre flux vidéo !
Liste des paramètres pour le lecteur vidéo avec chat en direct CrossTalk :
| Nom de la variable | Définition | Valeurs attendues |
|---|---|---|
data-wp |
Votre nom de propriété web unique. Vous pouvez créer des propriétés web depuis le Tableau de bord. | Exemple : 'crosstalkDemo'. Valeur de type chaîne attendue. |
data-page-id |
Un PageID qui identifie de manière unique une page dans votre propriété web. Si vous avez un système
de CMS, le slug d'un article serait un bon PageID.
Si vous intégrez CrossTalk dans votre application, partager le PageID garantira que le même chat en direct se charge si la même page est ouverte sur votre site Web ou votre application. Envoyez soit pageID soit url. Si les deux sont envoyés,
pageID a la priorité.
|
Exemple : 'some-Slug-123'. Valeur de type chaîne attendue. |
data-url |
Si vous ne gérez pas de PageIDs, envoyer l'URL canonique fonctionne également. Cela
chargera dynamiquement le chat en direct en fonction de l'URL du site web. Envoyez soit pageID soit url. Si les deux sont envoyés,
pageID a la priorité.
|
`${window.location.origin}${window.location.pathname}`
|
data-theme |
Indique si le widget doit être chargé en mode clair ou sombre. Si votre site supporte les thèmes dynamiques, passez cette variable au widget pour qu'il s'intègre parfaitement. |
Soit light soit dark. Valeur de type chaîne attendue.
|
data-src |
URL source de la vidéo. | Valeur de type chaîne attendue. |
data-src-type |
Type MIME de la vidéo (optionnel). | Valeur de type chaîne attendue. |
data-yt-id |
ID de la vidéo pour YouTube (après watch?v=) ou l'ID vidéo de son code d'intégration. | Valeur de type chaîne attendue. |
data-vimeo-id |
ID de la vidéo pour Vimeo. | Valeur de type chaîne attendue. |
data-rt-id |
ID de la vidéo pour RuTube (après video/). | Valeur de type chaîne attendue. |
data-vk-id |
ID de la vidéo pour VK Video (format vidéo-000000_999999). | Valeur de type chaîne attendue. |
Utilisez la propriété web exemple
crosstalkDemo pour tester le widget immédiatement.
Ajoutez le code ci-dessous à votre page web pour intégrer le lecteur vidéo avec chat en direct :
<script src="https://unpkg.com/crosstalk-comments-js"></script><div data-crosstalk-chat data-wp="crosstalkDemo" data-page-id="test" data-theme="light"></div>
Utilisez PageID avec les IDs vidéo pour faciliter le suivi de l'engagement des utilisateurs. Exemple : live_tv_fr pour un flux en direct en français.