CrossTalk Comments JavaScript Documentation
This documentation helps you add Comments 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 comments
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-comments data-wp="your-webproperty-name" data-page-id="pageID" data-url="URL" data-theme="light" data-reactions="false"></div>
Sign up for your
CrossTalk
account
to get your unique WebProperty Name and start engaging with your audience
through comments!
List of params for CrossTalk Comments:
| 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 comments load if the same page is opened on your Website or App Send either page-id or url. If both are sent,
page-id 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 comments based on the URL of the website. Send either page-id or url. If both are sent,
page-id 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-reactions |
Whether to enable image reactions on top of the comments |
Either true or false. Boolean value expected
|
Use the sample web property
crosstalkDemo to test the widget right away.
Add the below code to your webpage for working CrossTalk Comments:
<script src="https://unpkg.com/crosstalk-comments-js"></script><div data-crosstalk-comments data-wp="crosstalkDemo" data-page-id="test" data-theme="light"></div>