Embed Comments on your Website using JavaScript

Place the following Code where you want CrossTalk Comments to load:
    <div id="crosstalkCommentsHolder"></div> <!--Inside <body> where you want the Comments Widget to appear...-->
    <script src="https://widgets.crosstalk.cc/crosstalk_comments.js"></script>
    <script type="application/javascript">
        const ct_comments_settings = {
            wp: "YOUR-WEBPROPERTY-NAME-HERE",
            pageID: "YOUR-PAGE-ID", //Provide either 'pageID' OR 'url', not both.
            url: `${window.location.origin}${window.location.pathname}`, //Provide either 'pageID' OR 'url', not both.
            theme: "light" //OR 'dark'
        }
        crossTalkCommentsInit(ct_comments_settings);
        window.addEventListener('message', (e) => {
            if (e.origin.includes('crosstalk.cc')) {
                try {
                    const msg = JSON.parse(e.data+'');
                    if(msg.csize) document.getElementById("ctcommentsiframe").style.height = `${msg.csize}px`;
                }
                catch{}
            }
        });
    </script>  
            

CrossTalk Comments HTML Widget embed variables:
Variable Name Definition Expected Values
wp Your unique WebProperty Name. You can create Web Properties from the Dashboard Example: 'crosstalkDemo'. String value expected
pageID 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 pageID or url. If both are sent, pageID takes precedence.
Example: 'some-Slug-123'. String value expected
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 pageID or url. If both are sent, pageID takes precedence.
`${window.location.origin}${window.location.pathname}`
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

If you want to try this without Registering, use crosstalkDemo as the wp i.e., WebProperty Name and put whatever URL or PageID you want.
It's our shared Public Demo WebProperty, so not ideal to use in Production


Code you can copy-paste right now and it'll work:
    <div id="crosstalkCommentsHolder"></div>
    <script src="https://widgets.crosstalk.cc/crosstalk_comments.js"></script>
    <script type="application/javascript">
        const ct_comments_settings = {
            wp: "crosstalkDemo",
            url: `${window.location.origin}${window.location.pathname}`,
            theme: "light"
        }
        crossTalkCommentsInit(ct_comments_settings);
        window.addEventListener('message', (e) => {
            if (e.origin.includes('crosstalk.cc')) {
                try {
                    const msg = JSON.parse(e.data+'');
                    if(msg.csize) document.getElementById("ctcommentsiframe").style.height = `${msg.csize}px`;
                }
                catch{}
            }
        });
    </script>  
            

The Code Snippet above isn't ideal for production and uses our Public Demo WebProperty.
Register Now for a free CrossTalk account and create your own WebProperty!