Embed Live Chat on your Website using JavaScript

Place the following Code on the page where you want CrossTalk Live Chat to load:
    <script src="https://widgets.crosstalk.cc/crosstalk_livechat.js"></script>

    <script type="application/javascript"> <!--Inside <body>...</body>-->
      const chat_settings = {
          wp: "YOUR-WEBPROPERTY-NAME-HERE",
          pageIDs: [{
              title: "YOUR PAGE TITLE",
              collapsed: true, //OR false
              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.
            },{
              title: "YOUR ANOTHER PAGE TITLE",
              collapsed: false, //OR true
              pageID: "ANOTHER-PAGE-ID" //Provide either 'pageID' OR 'url', not both.
          }],
          theme: "light" //OR 'dark'
      }
    crossTalkChatInit(chat_settings);
    </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
pageIDs An array of PageIDs. You can load multiple chat rooms in a single page, for example: If your website hosts TV Shows, you can load 1 chat room for people watching the current show, and another for the people on the specific episode
So, if your URL is of the sort somewebsi.te/shows/AwesomeShow/EP03, you can put PageIDs 'AwesomeShow' and 'AwesomeShow_03'. This is just an example, you can use any nomenclature used within your organisation that helps you sort your audience to maximise Audience Engagement.

You can use any number of chat rooms on 1 page, but if you over-do it, the User Experience would be affected. We recommend 1 to 3 chat rooms at most. Any more and the audience might get overwhelmed.

You can mix-and-match PageID and URL chat rooms within the same Array of PageIDs.

Array of PageID Objects 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 chat room loads 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 chat rooms 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
collapsed Whether to load the chat popup open, or collapsed. Either true to keep chat room collapsed on page load or false to keep chat room open on page load. Boolean value expected

If you want to try this without Registering, use crosstalkDemo as the wp i.e., WebProperty Name and put whatever URLs or PageIDs 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:
    <script src="https://widgets.crosstalk.cc/crosstalk_livechat.js"></script>
    <script type="application/javascript">
        const ct_chat_settings = {
            wp: "crosstalkDemo",
            pageIDs: 
                [{
                    title: "Some Title",
                    pageID: "imp_page",
                    collapsed: false 
                }, 
                {  
                    title: "~another title",
                    url: `${window.location.origin}${window.location.pathname}`,
                    collapsed: true 
                }],
            theme: "light"
            }
        crossTalkChatInit(ct_chat_settings);
    </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!

Updated January 2025