SDK Setup

"Send additional user information to Bevatel using the Bevatel Website SDK for enhanced customer engagement and widget customization."

Sending information to Bevatel

Additional information about a contact is always useful. The Bevatel Website SDK ensures that you can send additional information that you have about a user.

If you have installed our code on your website, the SDK will expose window.$bevatel object.

In order to make sure that the SDK has been loaded completely, please make sure that you listen to bevatel:ready the event as follows:

window.addEventListener("bevatel:ready", function () {
  // Use window.$bevatel here
  // ...
});

If you would like to listen to the messages in the widget you can use the following event.

window.addEventListener("bevatel:on-message", function (e) {
  console.log("bevatel:on-message", e.detail);
});

SDK settings​

To hide the bubble, you can use the setting mentioned below.

Note: If you use this, then you’ll also have to trigger the widget.

window.bevatelSettings = {
  hideMessageBubble: false,
  position: "left", // This can be left or right
  locale: "en", // Language to be set
  useBrowserLanguage: false, // Set widget language from user's browser
  baseDomain: '.mydomain.com'
  type: "standard", // [standard, expanded_bubble]
  darkMode: "auto", // [light, auto]
};

Persist chat sessions across subdomains baseDomain Configuration,​

The baseDomain config retains user chat sessions across sub-domains, ensuring a seamless chat experience as users navigate through your domain's pages.

Setting Up​

Add the baseDomain configuration to window.bevatelSettings

window.bevatelSettings = {
  //other settings
  baseDomain: ".yourdomain.com",
};

Replace yourdomain.com with your domain, keeping the preceding dot.

Notes

• The configurationEnsure SSL is set for all sub-domains.

• Configuration applies to sub-domains, not different domains.

Example:

baseDomain: '.bevatel.com'

Use browser language in your live chat widget automatically​

To show the live chat widget in the user's browser locale, set the useBrowserLanguage to true in the window.bevatelSettings mentioned above.

Note: If useBrowserLanguage is set to true, The locale mentioned will be ignored. If the browser language is not supported by bevatel, the locale mentioned under locale will be used. If that's also missing, the widget will fall back to locale of the agent dashboard.

Dark Mode​

Bevatel live-chat widget supports dark mode from v2.4.0. To enable the dark mode, follow the steps mentioned here.

Widget designs​

Bevatel supports two designs for the widget.

1. Standard (default)

1. Expanded bubble

If you are using an expanded bubble, you can customize the text used in the bubble by setting launcherTitle parameter on BevatelSettings as described below.

window.bevatelSettings = {
  type: "expanded_bubble",
  launcherTitle: "Chat with us",
};

Enable popout window​

In order to enable the popout window, add the following configuration to bevatelSettings. This option is disabled by default.

window.bevatelSettings = {
  // ...Other Config
  showPopoutButton: true,
}

You can also pop out the chat window programmatically with the `popoutChatWindow()` method.

Programmatically open the popout window​

You can open the popout window programmatically with the popoutChatWindow() method.

To initiate this, call the method below.

window.$bevatel.popoutChatWindow();

Toggle the widget bubble visibility​

If you want to hide/show the bevatel widget bubble, you can do so with toggleBubbleVisibility('show/hide')

Example

window.$bevatel.toggleBubbleVisibility("show"); // to display the bubble
window.$bevatel.toggleBubbleVisibility("hide"); // to hide the bubble

Trigger widget without displaying bubble​

window.$bevatel.toggle();

// Toggle widget by passing state
window.$bevatel.toggle("open"); // To open widget
window.$bevatel.toggle("close"); // To close widget

Set the user in the widget​

window.$bevatel.setUser("<unique-identifier-key-of-the-user>", {
  email: "<[e-mail]>",
  name: "<name-of-the-user>",
  avatar_url: "<avatar-url-of-the-user>",
  phone_number: "<phone-number-of-the-user>",
});

setUser accepts an identifier which can be a user_id in your database or any unique parameter which represents a user. You can pass email, name, avatar_url, phone_number as params. Support for additional parameters is in progress.

Make sure that you reset the session when the user logs out of your app.

Identity validation using HMAC​

To disallow impersonation and to keep the conversation with your customers private, we recommend setting up identity validation in Bevatel. Identity validation is enabled by generating an HMAC(hash-based message authentication code) based on the identifier attribute, using SHA256. Along with the identifier you can pass identifier_hash also as shown below to make sure that the user is the correct one.

window.$bevatel.setUser(`<unique-identifier-key-of-the-user>`, {
  name: "", // Name of the user
  avatar_url: "", // Avatar URL
  email: "", // Email of the user
  identifier_hash: "", // Identifier Hash generated based on the webwidget hmac_token
  phone_number: "", // Phone Number of the user
  description: "", // description about the user
  country_code: "", // Two letter country code
  city: "", // City of the user
  company_name: "", // company name
  social_profiles: {
    twitter: "", // Twitter user name
    linkedin: "", // LinkedIn user name
    facebook: "", // Facebook user name
    github: "", // Github user name
  },
});

To generate HMAC, read identity validation

Note that implementing HMAC authentication will allow chat history to persist across sessions.

Set custom attributes​

For a contact​

In order to set additional information about the customer you can use customer custom attributes field. Read more about custom attributes here

To set a custom attributes call setCustomAttributes as follows

window.$bevatel.setCustomAttributes({
  accountId: 1,
  pricingPlan: "paid",

  // Here the key which is already defined in custom attribute
  // Value should be based on type (Currently support Number, Date, String and Number)
});

You can view these information in the sidepanel of a conversation.

To delete a custom attribute, use deleteCustomAttribute as follows

window.$bevatel.deleteCustomAttribute("attribute-key");

For a conversation​

You can also set custom attributes for the active conversation from the SDK. To set the custom attributes, call setConversationCustomAttributes as follows.

window.$bevatel.setConversationCustomAttributes({
  productName: "iPhone",
  productCategory: "Smartphone",
});

You can view this information in the side panel of a conversation.

To delete a custom attribute, use deleteConversationCustomAttribute as following.

window.$bevatel.deleteConversationCustomAttribute("productName");

Set language manually​

window.$bevatel.setLocale("en");

To set the language manually, use the setLocale function.

Set labels on the conversation​

Please note that the labels will be set on a conversation if the user has not started a conversation. In that case, the following items will not have any effect:

window.$bevatel.setLabel("support-ticket");

window.$bevatel.removable("support-ticket");

Refresh the session (use this while you log the user from your app)​

window.$bevatel.reset();

Widget errors​

In order to see any errors in the widget, please make sure that you listen to bevatel:event the event as follows:

window.addEventListener("bevatel:error", function () {
  // ...
});

Note: This feature is available in v2.3.0 or later.