Embedding #
To add the WebChat on any website just add the following code before the closing tag </body>.
<script src="https://webchatapi.robbu.global/v3/chat.js"></script>
<script defer="defer">
chatRobbu.init('public-token')
</script>
If you want to pass some configuration to WebChat, just add the following code with the desired configurations:
<script src="https://webchatapi.robbu.global/v3/chat.js"></script>
<script defer="defer">
chatRobbu.init('public-token', {
delay: 1000,
new_message_sound: true,
open: true,
whatsapp: '559999999999',
whatsapp_message: 'Olá, seja bem-vindo ao nosso webchat!',
whatsapp_position: 'top',
})
</script>
avatar #
Type
String
Default
null
If necessary, it is possible to display an avatar/logo in the header of the WebChat.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
avatar: 'https://www.site.com/avatar.png'
})
</script>
button_icon
Type
String
Default
null
By default the chat button already has an icon, if the user wants he can specify another one using the button_icon option.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
button_icon: 'https://www.site.com/icon.svg'
})
</script>
buttons_bubble
Type
Boolean
Default
false
If this option is enabled, the chat buttons will be displayed in bubble mode.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
buttons_bubble: true
})
</script>
call
Type
String
Default
null
The default call button text is: Iniciar atendimento
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
call: 'Falar com atendente'
})
</script>
delay
Type
Integer (milliseconds)
Default
5000
By default the WebChat has a delay of 5 seconds, it is possible to change this option by passing the delay configuration:
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
delay: 1000
})
</script>
Warning
Note, the minimum accepted value is 1000, that is, 1 second.
feedback
Type
Boolean
Default
true
By default the chat will display a feedback form for the user when the chat is finished. If the value is false the feedback form will not be displayed.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
feedback: false
})
</script>
logo
Type
String
Default
null
It is possible to define a logo that will be at the top of the WebChat authentication process.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
logo: 'https://www.site.com/logo.jpg'
})
</script>
mobile_width
Type
Integer
Default
768
new_message_sound
Type
Boolean
Default
false
If you want, when receiving new messages, if the user does not have the tab containing the WebChat open, it is possible to play a notification sound.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
new_message_sound: true
})
</script>
new_message_sound_file
Type
String
Default
null
If necessary, it is possible to provide a customized sound for notification of new messages.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
new_message_sound_file: 'https://www.site.com/new-message.mp3'
})
</script>
open
Type
Boolean
Default
false
By default the WebChat is called with the authentication screen closed, it is possible to start with it open using the open option.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
open: true
})
</script>
persist_sessions
Type
Boolean
Default
true
By default the WebChat keeps chat sessions when refreshing the page.
To start a new WebChat session whenever the page is refreshed, just use the persist_sessions option.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
persist_sessions: false
})
</script>
theme
Type
String
Default
default
Themes can be found at: /dist/themes
To create a new theme, just duplicate any of the existing themes in the /public/themes folder and change the desired variables.
The filename defines the name of the theme.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
theme: 'sunset'
})
</script>
Warning
When specifying the theme option, if WebChat fails to load the requested theme, it will load the default theme by default.
tooltip
Type
String
Default
null
To display a floating warning next to the WebChat opening button, just use the tooltip property, it is possible to use the HTML tag <br> to get line breaks.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
tooltip: 'Oi, podemos ajudar?<br>Clique aqui para obter ajuda.'
})
</script>
Warning
If the buttons_bubble option is enabled, open option is enabled or whatsapp_position is equal to left, the floating warning will not be displayed.
tooltip_show_delay
Type
Integer (milliseconds)
Default
2000
The floating warning is displayed after loading the WebChat by default after 2 seconds, it is possible to change this time according to the example:
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
tooltip: 'Oi, podemos ajudar?<br>Clique aqui para obter ajuda.',
tooltip_show_delay: 10000 // 10 seconds
})
</script>
tooltip_auto_hide
Type
Boolean
Default
false
By default the floating warning will be displayed until the user interacts with the warning or with any WebChat button, it is possible to hide the warning automatically:
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
tooltip: 'Oi, podemos ajudar?<br>Clique aqui para obter ajuda.',
tooltip_auto_hide: true
})
</script>
tooltip_auto_hide_delay
Type
Integer (milliseconds)
Default
5000
If the tooltip_auto_hide option is enabled, the floating warning will be automatically hidden after 5 seconds, it is possible to change this time according to the example:
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
tooltip: 'Oi, podemos ajudar?<br>Clique aqui para obter ajuda.',
tooltip_auto_hide: true,
tooltip_auto_hide_delay: 10000 // 10 seconds
})
</script>
user
Type
Object
Default
null
wallet_customer_code
Type
String
Default
null
It is possible to pass a specific thread in the chat authentication process.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
wallet_customer_code: 'ACC573B8D801473C'
})
</script>
whatsapp
Type
String
Default
null
If a WhatsApp number is entered, a button to start a WhatsApp conversation will be displayed.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
whatsapp: '5511999999999'
})
</script>
whatsapp_message
Type
String
Default
null
Default message when clicking the WhatsApp button.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
whatsapp_message: 'Olá, eu gostaria de tirar uma dúvida.'
})
</script>
whatsapp_position
Type
String
Default
left
This option defines the position of the WhatsApp button.
<script type="text/javascript">
chatRobbu.init('C62B7BA6BE980E44', {
whatsapp_position: 'top'
})
</script>
