Web widget

The web widget is a live chat bubble on your site. Visitors message you, search your help center and book appointments from it. Each widget is its own inbox; create one per site if you have several.

Create a widget#

1. Open Web widget in the left menu.
2. Type a name and click Create widget.
3. Configure the tabs and click Save.

Outside business hours the widget shows as offline and requires an email address.

Install#

Add the line from the Install tab to every page of your site, before the </body> tag:

<script
  src="https://getclickfix.com/widget.js"
  data-widget="WIDGET_ID"
  async
></script>

WIDGET_ID is the widget ID shown in the dashboard; just copy the line from there. Use Try on this page to try the widget in the dashboard before you publish it.

Allowed domains#

On the Security tab, enter one domain per line. *.example.com covers every subdomain. When the list is empty, the widget works on any site.

JavaScript API#

Once loaded, the widget is controlled through window.ClickFix. Calls made before the script loads are queued:

<script>
  window.ClickFix =
    window.ClickFix ||
    function () {
      (window.ClickFix.q = window.ClickFix.q || []).push(arguments);
    };
  ClickFix("init", { widgetId: "WIDGET_ID", hideLauncher: true });
</script>
<script src="https://getclickfix.com/widget.js" async></script>

init options: widgetId, locale (tr / en), position (left / right), color (#rrggbb), hideLauncher (hide the bubble and open the chat from your own button), user (identify the user at start) and debug.

TypeScript types are published at https://getclickfix.com/widget.d.ts.

Identifying signed-in users#

You can securely tell the widget who your signed-in users are, so their conversations are linked to the right contact and company.

1. On the Security tab, click Generate secret. The secret is shown only once; copy it to your server.

2. On your server, compute a user_hash for each user:

   user_hash = hex(HMAC-SHA256(identity_secret, user_id))
   

3. Call identify on the page:

   <script>
     ClickFix("identify", {
       user_id: "USER_ID",
       user_hash: "USER_HASH",
       name: "Ada Yılmaz",
       email: "ada@example.com",
       company: { id: "acme", name: "Acme Inc.", domain: "acme.com" },
     });
   </script>
   

Never send the secret to the browser. For example, in Node.js:

import crypto from "node:crypto";

const userHash = crypto
  .createHmac("sha256", process.env.CLICKFIX_IDENTITY_SECRET)
  .update(String(user.id))
  .digest("hex");

Turn on Identified users only to stop anonymous visitors from sending messages; this suits sites that require sign-in, like a customer portal. Use Rotate secret to replace the secret, and update it on your server too.

Help center and booking#

If your knowledge base has published public articles, visitors can search them from the widget. With the appointments module on, the widget links to your public booking page. Details: Knowledge base, Appointments.