Brevo chat integration

Ask us anything How do I?
1

Hi, I’m integrating a brevo Chat within my app, with Google tag manager.
Once i integrated the basic script, it appears as intended.
Now i would like to modify this chat windows. Brevo shares some documentation on how to, it mainly rely on integrating HTML code on the app.
one customisation interests me a lot with Open the widget by clicking on a button :slight_smile:

HTML

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

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

HTML

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

Also, you can use any valid CSS selector as the customWidgetButton to assign the chat button behavior to the element of your choice (this will also hide the default chat button). The first step is to place the following snippet before the main widget code:

HTML

*<script>*
*    window.BrevoConversationsSetup = {*
*        customWidgetButton: '.custom-chat-button'*
*};*
*</script>*

<!-- Brevo Conversations widget code -->

Then add this selector to any element on the page:

HTML

* *<!-- Custom button anywhere on the page -->* *<button class="custom-chat-button">Chat with us</button>* *

Blockquote

The answer is maybe simple but where should I implement on my app, where do I find the CSS selector of a specific button i already designed on my page.

2

HTML

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

image
image421×637 26.1 KB

1 Like
3

Thank you pour your aanswer Ryanev, I was wondering how can i play with the CSS selector as mentionned in Brevo documentation.

4

hfref link is the better route so you don’t have to add another script, will also make your buttons / links appear clickable.

But css selector is easy if you still want to go that route:
image