Add and Configure

Easily set up and customize your website's live chat channel, including greetings, agent assignments, and business hours, with step-by-step instructions.

Add and configure your website channel

Step 1. Go to the Inboxes page. Go to Settings → Channels → "Add Channel" button.

Step 3. Enter your website name, URL, and other details as described below.

Once all details are entered, click on the “Create Inbox” Button.

Step 4. "Add agents" to your website inbox.

The conversations will be routed to agents only if they are associated with the inbox. Even if you are an Administrator, you need to add yourself as an agent to the Inbox to see the Inbox on your screen.

Select the Agents from the drop-down and click on Add agents. If agents have not been added, follow the steps to add agents.

Step 5. Hooray! You have successfully created a website inbox. Now, add the widget to your website.

Copy and paste the code snippet shown on the page to your website and start supporting your customers. You can click the Copy button to copy and then paste in the root file of your website.

If you click on the More settings Button, you will be taken to the Additional Settings for Inbox. If you click on the Take me there button, you will be taken to the newly created Inbox directly.

Additional Inbox settings

Settings tab

Scroll down to see more settings, where you can set up the various notifications you would like to receive when your website inbox starts functioning.

Here are a couple of examples for your understanding:

Enable email collect box is enabled by default. This means an automatic message to collect the e-mail id will be displayed once the customer starts a conversation. The customer/end user will receive a prompt to enter an e-mail id.

Enable CSAT. Once you enable this, your Customer Satisfaction survey will be launched every time a ticket is resolved. The CSAT results can be viewed later in the Reports section.

Click on the Update button to save the changes you have made.

Collaborators Tab

1. Accessing Collaborators:
   Click on the Collaborators tab to manage Agents and Teams associated with this inbox.
2. Adding or Removing Agents:

• In the Agent field, select an agent to add them to this inbox.
• Agents added here will be able to access and manage conversations within this inbox via the Conversation module.

3. Adding or Removing Teams:

• Use the Team field to add specific teams to this inbox.
• Only teams listed here will be visible as assignment options in the Conversation module, allowing for targeted distribution of conversations to relevant teams.

4. Automatic Assignment:

• Toggle the Conversation Assignment option to enable or disable automatic assignment of new conversations to the agents in this inbox.

Click on Update it to save the changes.

Pre Chat Form Tab

With this, you can collect information about your customers as soon as they enter your live chat window/website widget. You can use this to collect customer info such as name and e-mail address before beginning the chat.

Click on the Update button. Pre Chat Form is enabled now.

Configuration tab

Click on the “Configuration” tab. You can find the code snippet to be copied to the website here.

You can click on the Copy button to copy the code and paste it into the root file of your website.

Widget Builder tab

1. Website Avatar:

• Upload an image that represents your brand on the widget interface.

2. Website Name:

• Enter a name that will be displayed at the top of the widget (e.g., "Beva").

3. Welcome Heading:

• Customize the greeting message (e.g., "Hi there!") that users see when they open the chat widget.

4. Welcome Tagline:

• Add a tagline that invites users to interact (e.g., "We make it simple to connect with us. Ask us anything or share your feedback.").

5. Reply Time:

• Set an expected reply time (e.g., "In a few minutes") to inform users about response speed.

6. Select Language:

• Choose the language in which the widget will display messages and prompts (e.g., "en" for English).

7. Widget Color:

• Select a color for the widget to match your brand.

8. Widget Bubble Position:

• Choose the widget's position on the screen, either Left or Right.

9. Widget Bubble Type:

• Select between a Standard or Expanded Bubble appearance for the widget.

10. Widget Bubble Launcher Title:

• Define the text that appears on the launcher bubble (e.g., "Chat with us").

11. Preview and Script:

• Preview: View how the widget will look to users.
• Script: Copy the script provided to embed this widget on your website.

12. Updating Settings:

• Once all changes are configured, click Update Widget Settings to save.

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:

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

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

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

SDK settings

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

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

Persist chat sessions across subdomains baseDomain Configuration,

Setting Up

Add the baseDomain configuration to window.bevatelSettings

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

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:

1. 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

.

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.

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

Enable pop out window

1. window.bevatelSettings = {
    // ...Other Config
    showPopoutButton: true,
   }
   
   You can also pop out the chat window programmatically with the `popoutChatWindow()` method.

Programmatically open the pop out window

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

To initiate this, call the method below.

1. window.$bevatel.popoutChatWindow();

Toggle the widget bubble visibility

Example

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

Trigger widget without displaying bubble

1. 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

1. window.$bevatel.setUser("<unique-identifier-key-of-the-user>", {
    email: "<email-address-of-the-user@your-domain.com>",
    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.

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

To generate HMAC, read identity validation

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

Set custom attributes

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

1. 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 side-panel of a conversation.

To delete a custom attribute, use deleteCustomAttribute as follows

1. 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.

1. 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.

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

Set language manually

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

To set the language manually, use the setLocale function.

Set labels on the conversation

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

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

1. window.$bevatel.reset();

Widget errors

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

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

Identity Validation

"Identity validation in Bevatel enhances security by verifying user identities using HMAC-based authentication, ensuring privacy and preventing impersonation in conversations."

Identity validation in Bevatel

Identity verification is an important security feature that helps ensure that conversations between customers and support agents are private and secure. By verifying the identities of both parties, identity validation helps prevent impersonation and unauthorized access.

If your users can log into your app, it's always recommended to enable identity verification. Bevatel uses an HMAC-based identity verification. It is a cryptographic algorithm that uses a secret key (provided by Bevatel) and a unique identifier to generate a code, this code can then be used to verify the user on the front end.

Generating HMAC

To generate the HMAC you need to first get the secret key for your Bevatel inbox. The key can be found in Settings > Inboxes > Settings > Configuration > Identity Validation

HMAC Secret

To use HMAC for identity validation in your web widget, you'll need to generate an HMAC using this key. You can generate this HMAC using any programming language in the backend. Most languages have built-in cryptographic functions to generate the token, if not popular implementations always exist. You can find examples of popular programming languages at the end of this page.

Verifying the HMAC

Verification on the web

4. window.$bevatel.setUser(`<unique-identifier-key-of-the-user>`, {
    name: "", // Name of the user
5. 
    email: "", // Email of the user
6. 
    identifier_hash: "<identifier-hash>" // Identifier Hash generated in the previous step
7. 
   }

If the HMACs match, you can be confident that the person who sent the identifier is authorized to do so. All unverified users will show up with an alert mark, stating that their identity is not verified.

Verification in React Native

1. const App = () => {
    const user = {
      identifier: "john@gmail.com",
      name: "John Samuel",
      email: "john@gmail.com",
      identifier_hash: "<identifier-hash>",
    };
   
    return (
      <bevatelWidget
        websiteToken="WEBSITE_TOKEN"
        baseUrl="https://app.bevatel.com"
        isModalVisible={showWidget}
        user={user}
      />
    );
   };

Enforcing verification

Enforce verification

Sample HMAC Generation for popular languages

PHP

2. <?php
   
   // Define your key and message
3. 
   $key = 'your-secret-token-for-hmac';
   $message = 'some-unique-identifier';
   
   // Generate the HMAC
   $identifier_hash = hash_hmac('sha256', $message, $key);
   ?>

Javascript (Node.js)

3. const crypto = require("crypto");
   
   // Define your key and message
4. 
   const key = "your-secret-token-for-hmac";
   const message = "some-unique-identifier";
   
   // Generate the HMAC
5. 
   const identifierHash = crypto
    .createHmac("sha256", key)
    .update(message)
    .digest("hex");

Ruby

3. require 'openssl'
   
   # Define your key and message
4. 
   key = 'your-secret-token-for-hmac'
   message = 'some-unique-identifier'
   
   # Generate the HMAC
5. 
   identifier_hash = OpenSSL::HMAC.hexdigest('sha256', key, message)

Elixir

3. # Define your key and message
4. 
   key = 'your-secret-token-for-hmac'
   message = 'some-unique-identifier'
   
   # Generate the HMAC
5. 
   signature = :crypto.hmac(:sha256, key, message)
   
   identifier_hash = Base.encode16(signature, case: :lower)

Golang

4. package main
   
   import (
      "crypto/hmac"
      "crypto/sha256"
      "encoding/hex"
      "fmt"
   )
   
   func main() {
      // Define your key and message
5. 
      key := []byte("your-secret-token-for-hmac")
      message := []byte("some-unique-identifier")
   
      // Generate the HMAC
6. 
      hash := hmac.New(sha256.New, key)
      hash.Write(message)
      identifierHash := hex.EncodeToString(hash.Sum(nil))
   
      // Print the HMAC
7. 
      fmt.Println(identifierHash)
   }

Python

4. 
   
5. import hashlib
   import hmac
   
   # Define your key and message
6. 
   secret = bytes('your-secret-token-for-hmac', 'utf-8')
   message = bytes('some-unique-identifier', 'utf-8')
   
   # Generate the HMAC
7. 
   hash = hmac.new(secret, message, hashlib.sha256)
   identifier_hash = hash.hexdigest()

Dark Mode

Enable dark mode effortlessly for your Bevatel live-chat widget and give users the option to switch between light and dark themes with ease.

Enable dark mode on live-chat widget

This guide helps you to set up dark mode for the Bevatel live-chat widget on your website.

Here is a quick glimpse of how dark mode functions on the live chat widget.

To enable dark mode on Bevatel widget, use the darkMode parameter along with the Bevatel Settings.

darkMode parameter supports two values.

1. light - Enable only light mode. This is the default value.
2. auto - Enable dark mode based on the operating system preference.

2. window.BevatelSettings = {
    //... other Settings
3. 
    darkMode: "auto",
   };

Note: dark only is not supported now. We will add the support in future releases.

Conversation Continuity

Enable email-based conversation continuity for customers to continue chat interactions with agents seamlessly.

Conversation Continuity through Email

Your customers can continue their chat conversations with your agents via email threads. This may be required under the following circumstances.

• No agents are available, and the customer leaves a message in the chat.
• The customer leaves the chat before the agent replies.

For this to work, the contact should have an email address associated with it in the Bevatel CRM.

Obtaining email addresses of contacts

You can prompt/update customer emails into Bevatel through the following ways.

1. via Bevatel SDK

2. via PreChat Form

3. via Email Collect Prompt

Conversation Continuity

As a result, if the customer's email address is updated through any of the options mentioned above and they leave the chat while their agent has replied, the following will occur:

• The customer receives an email thread with a conversation summary. They can reply to that email and continue the conversation.
• The agent receives the customer replies from email in their Bevatel dashboard, continuing over the existing conversation thread.

The email icon in the chat bubble indicates that the customer's reply arrived via email.