JavaScript API

Once the widget has loaded, it exposes window.Kerabie, so you can control it from your own buttons, links and scripts.

Wait for the widget to load

The widget script loads async, so window.Kerabie doesn't exist yet when your own page scripts first run. Use either of these to run code once it's ready.

onReady in your install snippet:

<script>
  window.KERConfig = {
    widgetKey: "wk_yourkey_here",
    onReady: function (kerabie) {
      // kerabie === window.Kerabie
      kerabie.setPosition("bottom-left");
    }
  };
</script>
<script async src="https://cdn.kerabie.com/widget.js"></script>

The kerabie:ready event, from anywhere on the page:

window.addEventListener("kerabie:ready", function () {
  window.Kerabie.open();
});

For code that runs on a user action (like a click), it's usually loaded already. Guard the call in case it isn't:

window.Kerabie?.open();

Methods

| Kerabie.agent.configure(config) | Sets up the AI agent, in the chat as well as by voice. Once set up, every chat message carries the customer's token and your screens and actions, and the AI can use them in the conversation: name, getUserToken, ui (your screens) and actions (things your page does for the agent, such as adding to its cart). | | Kerabie.agent.start() | Starts the AI agent: a voice call that can use your tools as the signed-in customer. |

setPosition and hideLauncher apply to the current page only. Your dashboard setting under Settings → Widget Settings → Style stays the default everywhere else.

Cookie Consent mode

The widget doesn't use cookies, visitor/session data (a session id, conversation id, name/email if given, and appearance) is kept in localStorage. When your org enables Cookie Consent in Settings, the widget still works normally, but stops writing any of that to localStorage until you call setConsent(true), so nothing persists across page loads for a visitor who hasn't consented. Call it from your own cookie bar's callbacks:

// wherever your cookie/consent bar calls back on accept/decline/withdraw
window.Kerabie?.setConsent(true)  // start persisting the visitor's session locally
window.Kerabie?.setConsent(false) // stop, and clear whatever was already stored

Install snippet options

These set the same things before the widget first appears, so there's no flicker:

Examples

Open the chat from your own button

Hide the bubble and use a button that fits your design instead:

<button id="support-btn" type="button">Chat with support</button>

<script>
  window.KERConfig = {
    widgetKey: "wk_yourkey_here",
    hideFloatingButton: true
  };
  document.getElementById("support-btn").addEventListener("click", function () {
    window.Kerabie?.open();
  });
</script>
<script async src="https://cdn.kerabie.com/widget.js"></script>

Open the chat from a link

<a href="#" onclick="window.Kerabie?.open(); return false;">Talk to us</a>

Move the widget on one page

For example, out of the way of a "Buy" bar on product pages:

window.addEventListener("kerabie:ready", function () {
  if (location.pathname.startsWith("/products/")) {
    window.Kerabie.setPosition("bottom-left");
  }
});