CrossTalk Video Player with Live Chat JavaScript Documentation
This documentation helps you add Live Chat to your webpage with CrossTalk's JavaScript SDK.
Import the SDK
Add the below script tag to your HTML file. You can add this either in the
<head> or <body> section of your HTML file.
<script src="https://unpkg.com/crosstalk-comments-js"></script>Add the CrossTalk div where you want to display live chat
You can add style and class to this div to customise its positioning, margins within your webpage. The inner content won't be affected by your CSS
<div data-crosstalk-video-player data-wp="your-webproperty-name" data-yt-id="youtube_video_ID"></div>
Sign up for your
CrossTalk
account
to get your unique WebProperty Name and start engaging with your audience
through video stream's live chat!
List of params for CrossTalk Live Chat:
| Variable Name | Definition | Expected Values |
|---|---|---|
data-wp |
Your unique WebProperty Name. You can create Web Properties from the Dashboard | Example: 'crosstalkDemo'. String value expected |
data-page-id |
A PageID that uniquely identifies a page in your WebProperty. If you have a CMS
system, an article's slug would be a good PageID.
If you embed CrossTalk in your app, sharing the PageID would make sure the same live chat load if the same page is opened on your Website or App Send either pageID or url. If both are sent,
pageID takes precedence.
|
Example: 'some-Slug-123'. String value expected |
data-url |
If you don't maintain PageIDs, sending the canonical URL works as well. This will
dynamically load live chat based on the URL of the website. Send either pageID or url. If both are sent,
pageID takes precedence.
|
`${window.location.origin}${window.location.pathname}`
|
data-theme |
Whether to load the widget in Light mode or Dark. If your website supports dynamic themes, pass this variable onto the widget so it blends right in |
Either light or dark. String value expected
|
data-src |
Source URL of the video | String value expected |
data-src-type |
MIME type of the video (optional) | String value expected |
data-yt-id |
Video ID for YouTube video (after watch?v=) or the video ID from its embed code. | String value expected |
data-vimeo-id |
Video ID for Vimeo video | String value expected |
data-rt-id |
Video ID for RuTube video (after video/) | String value expected |
data-vk-id |
Video ID for VK Video video (video-000000_999999 format) | String value expected |
Use the sample web property
crosstalkDemo to test the widget right away.
Add the below code to your webpage for embedding Live Chat to your webpage:
<script src="https://unpkg.com/crosstalk-comments-js"></script><div data-crosstalk-chat data-wp="crosstalkDemo" data-page-id="test" data-theme="light"></div>
Use PageID with VideoIDs so it's easier to track user engagement. Eg: live_tv_en for English Live Stream