search
Ctrlk

square-jsChat Widget - Custom Buttons & Programmatic Control

Embed the klink.cloud chat widget on your site, hide the default launcher, and open chat from your own buttons or events.

hashtag
Installation

Add the script inside the <head> tag of your HTML. It uses async and defer, so it won't block page rendering.

html

<head>
  <script>
    (function (d, t) {
      var timestamp = new Date().getTime();
      var SCRIPT_PATH = "https://webchat.klink.cloud/widget/klink-chat-widget.umd.js";
      var g = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      g.src = SCRIPT_PATH + '?v=' + timestamp;
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function () {
        window.klinkChatSDK.run({
          serverUrl: "https://apigw.klink.cloud",
          scId: "YOUR_SC_ID_HERE",
        });
      };
    })(document, 'script');
  </script>
</head>

Framework notes: In Next.js, use <Script strategy="afterInteractive"> in your root layout. In Vite or CRA, paste the snippet into public/index.html. In WordPress, use a headers plugin or edit header.php.

hashtag
Configuration Options

Option
Type
Required
Description

serverUrl

string

Yes

Always https://apigw.klink.cloud

scId

string

Yes

Your Social Channel ID from klink.cloud settings

showLaunchButton

boolean

No

Set to false to hide the default floating button

authUser

object

No

Pre-fills visitor identity (email, name)

hashtag
Hide the Default Button & Open Programmatically

To integrate chat into your own UI — a nav link, hero CTA, or custom icon — hide the default launcher and call openWidget() when you need it.

javascript

Then trigger it from any click:

html

React / Next.js

jsx

Link

html

hashtag
Passing Authenticated Users

For logged-in visitors, pass their identity so conversations attribute to a known contact instead of an anonymous session.

javascript

In React, wait for the session to hydrate before initializing:

jsx

hashtag
Notes

  • Initialize once per page — calling run() multiple times creates duplicate instances.

  • Only pass authUser when you have real values; omit the field otherwise.

  • If window.klinkChatSDK is undefined, the script hasn't finished loading yet.

Last updated