Customize the chat widget

Simple customizing

Open the widget by clicking on a button

<!-- Custom button anywhere on the page -->
<button onclick="SibConversations('openChat', true)">Chat with us</button>

Or you can create a link with the address #sibConversationsExpanded:

<!-- Link anywhere on the page -->
<a href="#sibConversationsExpanded">Chat with us</a>

Change the widget’s width and height

Specify chatWidth and chatHeight (in pixels) before the widget code:

<script>
    window.SibConversationsSetup = {
        chatWidth: 400,
        chatHeight: 550
    };
</script>

<!-- Sendinblue Conversations widget code -->

Change the widget’s z-index

Use the zIndex setting to update the default z-index (set to 9999):

<script>
window.SibConversationsSetup = {
    zIndex: 10
};
</script>

<!-- Sendinblue Conversations widget code -->

See also the setZIndex method.

Change the chat button colors

Specify the colors before the widget code:

<script>
    window.SibConversationsSetup = {
        colors: {
            buttonText: '#f0f0f0', /* chat button text color */
            buttonBg: '#565656'    /* chat button background color */
        }
    };
</script>

<!-- Sendinblue Conversations widget code -->

Use a color picker to generate hex color codes.

Change the chat button position based on the screen width

<script>
window.SibConversationsSetup = {
    buttonPosition: window.innerWidth < 1024 ? /* width threshold */
        'bl' : /* chat button position on small screens */
        'br'  /* chat button position on big screens */
};
</script>

<!-- Sendinblue Conversations widget code -->

Use the following codes to set the chat button position:

  • 'bl' – at the bottom of the screen, on the left
  • 'bc' – at the bottom of the screen, in the middle
  • 'br' – at the bottom of the screen, on the right
  • 'lt' – on the left side of the screen, at the top
  • 'lm' – on the left side of the screen, in the middle
  • 'lb' – on the left side of the screen, at the bottom
  • 'rt' – on the right side of the screen, at the top
  • 'rm' – on the right side of the screen, in the middle
  • 'rb' – on the right side of the screen, at the bottom

Embed the widget into a block

Specify id of the block you want to embed the chat widget into before the widget code:

<script>
window.SibConversationsSetup = {
    mode: 'frame',
    /* id of the block you want to embed chat into */
    injectTo: 'conversations-wrapper'
};
</script>

<!-- Sendinblue Conversations widget code -->

injectTo also accepts direct links to HTML nodes and array-like node collections (including NodeLists and jQuery collections). See injectTo description.

Place the block anywhere on the page:

<div id="conversations-wrapper"></div>

The only thing left is to set an appropriate block size, e.g.

<div id="conversations-wrapper" style="width: 100%; height: 500px;"></div>

Conversations will occupy the whole block.

Disable Conversations on mobile devices

Insert this code before the widget code:

<script>
window.SibConversationsSetup = {
    disabledOnMobile: true
};
</script>

<!-- Sendinblue Conversations widget code -->

Or look for “Mobile button” option in your widget settings and uncheck it.

Identifying existing users

Passing user details to Conversations

Use the updateIntegrationData method to update the visitor's details in Conversation's right pane. Use null to remove properties.

/* Anywhere after Sendinblue Conversations widget code */
SibConversations('updateIntegrationData', {
    email: '[email protected]', /* e-mail changed */
    firstName: 'John', /* first name changed */
    lastName: 'Doe', /* last name changed */
    phone: null, /* phone number removed */
    notes: 'Looking for courage...', /* notes property created */

    /* any number of custom properties */
    'trip wish list': 'Going to Oz with friends'
});

If custom properties set in updateIntegrationData match existing contact attributes, they will be synced in your Contacts database. If not, they will be available in Conversations only.

📘

Any tech-savvy person can change the data identifying them sent to Conversations using JS API. Therefore, any data sent to Conversations using JS API must be considered as auxiliary information, not as a method of unambiguous user identification.

Binding conversations to user accounts

Conversations can recognize logged-in users regardless of the device or browser they use, so that a single conversation thread will be maintained. Also, if the user logs out and another logs in on the same device, the two different conversation threads will be kept separated.

To bind the widget to user accounts on your site:

  1. Generate a unique random string for each user and save it to your database.

  2. When the user is logged in, specify their string before the widget code like this:

    <script>
    window.SibConversationsSetup = {
        /* current user’s generated string */
        visitorId: 'kZMvWhf8npAu3H6qd57w2Hv6nh6rnxvg'
    };
    </script>
    
    <!-- Sendinblue Conversations widget code -->
    

❗️

visitorId must be unique and secret (i.e. not available to other users) as someone might use it to get access to a private conversation. It’s best to use randomly generated string. Do not use publicly known data such as user’s ID, name, email, etc.

Translating the widget

You can choose the widget language from Conversations’ settings and use Javascript API for more granular control (see language setting).

If the desired language is not supported or you wish to change some of the strings of an existing language, you can override one of the existing languages with your set of strings.

Here’s our current locale file:
locale.json

Let’s say you want to change chat input placeholder text. Here’s how you can do it:

<script>
window.SibConversationsSetup = {
    locale: {
        chat: {
            input: {
                placeholder: 'Scrivi un messaggio...'
            }
        }
    }
};
</script>

<!-- Sendinblue Conversations widget code -->

To change more strings, just add all of them to the locale property of SibConversationsSetup (adhere to the structure of the original locale file):

<script>
window.SibConversationsSetup = {
    locale: {
        chat: {
            input: {
                placeholder: {
                    en: 'Message...',
                    fr: 'Scrivi un messaggio...'
                }
            }
        },
        name: 'Nome',
        yourName: 'Il tuo nome',
        messageTypes: {
            joinedFirst: 'entrato in chat',
            joined: '{{#username}} entrato in chat',
            agentsOffline: 'Operatore Offline'
        }
    }
};
</script>

<!-- Sendinblue Conversations widget code -->

You can change as many strings as you want. Bear in mind that strings with keys starting with _ are protected from changing.

You can also change the locale dynamically using setLocale method:

/* Anywhere after Sendinblue Conversations widget code */

SibConversations('setLocale', {
    chat: {
        input: {
            placeholder: 'Scrivi un messaggio...'
        }
    }
});

Did this page help you?