CrossTalk 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-chat data-wp="your-webproperty-name" data-page-id="pageID" data-url="URL" data-theme="light"></div>
Sign up for your
CrossTalk
account
to get your unique WebProperty Name and start engaging with your audience
through 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
|
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>