Website chat SDK

Once the website chat snippet is on your page (see Add website chat), your own JavaScript can control it. Everything lives under three names: window.hadirSettings, window.hadirSDK and window.$hadir.

Start the chat

The snippet loads https://app.hadir.chat/packs/js/sdk.js and then calls:

window.hadirSDK.run({ websiteToken: '…', baseUrl: 'https://app.hadir.chat' });

Keep the snippet as the dashboard gives it; the websiteToken is your channel's own.

Settings before it loads

Set window.hadirSettings in a script that runs before the snippet:

<script>
  window.hadirSettings = {
    locale: 'ar',            // the chat's language
    position: 'auto',        // 'left', 'right', or 'auto' (follows the page direction)
    darkMode: 'auto',        // 'light', 'dark' or 'auto'
    hideMessageBubble: false // true hides the chat button; open it with toggle()
  };
</script>

Also available: useBrowserLanguage: true uses the visitor's browser language instead of locale.

Methods

Call these only after the chat is ready (see hadir:ready below).

• $hadir.toggle('open') or toggle('close'): opens or closes the chat window; with no argument, it switches.
• $hadir.toggleBubbleVisibility('hide') or ('show'): hides or shows the chat button.
• $hadir.popoutChatWindow(): opens the chat in its own browser window.
• $hadir.setUser(identifier, user): tells the chat who the signed-in customer is (below).
• $hadir.setCustomAttributes({ plan: 'gold' }) and deleteCustomAttribute('plan'): the contact's custom attributes.
• $hadir.setConversationCustomAttributes({ order_id: '1001' }) and deleteConversationCustomAttribute('order_id'): the current conversation's attributes.
• $hadir.setLabel('vip') and removeLabel('vip'): a label on the current conversation. The label must already exist in your workspace.
• $hadir.setLocale('en'): switches the chat's language.
• $hadir.setColorScheme('dark'): 'light', 'dark' or 'auto'.
• $hadir.reset(): clears the visitor and their conversation from this browser. Call it when a customer signs out.

Attribute keys must match custom attributes you created; see Custom attributes.

Pass the signed-in customer

window.addEventListener('hadir:ready', function () {
  window.$hadir.setUser('cust-1001', {
    name: 'Sara',
    email: 'sara@example.com',
    phone_number: '+966500000000',
    identifier_hash: 'computed on your server'
  });
});

• The first argument is the customer's ID in your system, as a string or number.
• The object needs at least one of name, email or avatar_url, or the call throws an error.
• identifier_hash is the HMAC SHA256 of that same ID, keyed with your channel's secret key. Compute it on your server only. How to get the key and compute it: Verify visitor identity.

Events

The chat fires these events on window. Where there is data, it is in event.detail.

• hadir:ready: the chat has loaded and the methods can be called.
• hadir:opened and hadir:closed: the visitor opened or closed the window.
• hadir:on-message: a message arrived in the chat.
• hadir:on-start-conversation: the visitor started a new conversation.
• hadir:postback: the visitor pressed a button in a message.
• hadir:error: something failed, such as a setUser call with a wrong identifier_hash.

window.addEventListener('hadir:on-message', function (e) {
  console.log('New chat message', e.detail);
});

Note: only the hadir names above work. If you copied code for another chat product, rename its calls; there are no aliases.