# Chat box design
Adjust texts, colors and logo on single or multiple domains.
⛔ Legacy API
You are browsing legacy API. Current version you can find here.
# Bubble types
In Dashboard Settings > Chat box > Text (opens new window) you can set Bubble type.
This feature only works when chat status is ONLINE
. Does not work when chat is Offline
.
We provide 3 types:
Bubble
Arrow
Image
(My Picture)
# Bubble
Dashboard settings is Bubble type: Bubble
. You can set your own text.
<script>
smartsupp('translate', {
banner: {
bubble: {
text: 'Can we help?'
}
}
}, 'en');
</script>
# Arrow
Dashboard settings is Bubble type: Arrow
. You can set your own text.
<script>
smartsupp('translate', {
banner: {
arrow: {
title: 'Any questions?',
desc: 'We are here to help.'
}
}
}, 'en');
</script>
# Image
Dashboard settings is Bubble type: Image
(My picture). You can define set own picture.
How chat box panel width works:
- default chat panel width is
220px
- open panel width is
300px
- banner image width affects the entire panel width
Let's say in our example we use banner width
of 240px
as it fits better to our design. It is also good to mention that there is no limit on banner height
at this moment.
Our example end result will look like this.
<script>
smartsupp('banner:set', 'image', {
src: 'IMAGE_URL'
})
</script>
# Chat banner, texts and colors
Imagine you have 2 websites but 1 Smartsupp account. You want to adjust chat box design for both of them.
# Website 1
We change banner, texts and colors in Online state and only one text, title of the window, in Offline state.
<script>
// banner (logo)
smartsupp('banner:set', 'image', {
src: 'IMAGE_URL',
});
// texts
smartsupp('chat:translate', {
online: {
title: 'The best support',
infoTitle: 'The best company',
},
offline: {
title: 'We are offline now ...',
},
});
// colors
smartsupp('theme:colors', {
widget: '#c0392b',
primary: '#c0392b',
});
</script>
# Website 2
No custom banner, same texts but different colors.
<script>
// texts
smartsupp('chat:translate', {
online: {
title: 'The best support',
infoTitle: 'The best company'
},
offline: {
title: 'We are offline now ...'
}
});
// colors
smartsupp('theme:colors', {
widget: '#9b59b6',
primary: '#9b59b6'
});
</script>
# Chat box colors based on status
Chat box colors can change based on chat status if set to Online or Offline.
<script>
smartsupp('on', 'status', function (status) {
if (status == 'online' || status == 'away') {
smartsupp('theme:colors', {
widget: '#2ecc71',
primary: '#2ecc71'
});
} else {
smartsupp('theme:colors', {
widget: '#c0392b',
primary: '#c0392b'
});
}
});
</script>