If you want to make your messenger widget unique or matching your product and brand, you can always customize your messenger launcher icon.
The steps to make messenger work with the custom icon are as follows:
1. Login to your Kayako Help Center with your admin credentials.
2. Disable default messenger in the Help Center (Customize > Settings > Show messenger > No)
3. Embed the messenger code at the bottom of the footer template.
(You can get the messenger code from within your Kayako Administration > Messenger > Configure > go through the customization process and on Step 5. Embed code you will get the snippet you can use in your help center and on your website.)
4. Add the following code under the messenger snippet in footer template - it hides the default icon and makes it pop-up when you call toggleMessenger function:
<script>
kayako.ready(function () {
kayako.config = {
hideLauncher: true
}
})
</script>
<script>
function toggleMessenger (e) {
if (kayako.visibility() === 'minimized') {
kayako.maximize()
} else {
kayako.minimize()
}
e.preventDefault()
}
</script>
5. Paste the custom button code into the footer template. For example the one used for https://lettuce-experts.kayako.com is:
<a href='' onclick="toggleMessenger(event)"><img class="kmess" src='https://i.imgur.com/FJEgklH.png'></img></a>
Please note you will need to replace the image source with your own chat button image link.
6. Add the custom styles that will put the button and messenger itself in place into Custom CSS tab of the Customize menu:
Messenger placement:
#kayako-messenger {
right: 10px !important;
bottom:40px !important;
}
Button placement:
.kmess {
bottom: 10px;
right:20px;
position: fixed;
}
That's it! You can now customize the messenger the way that suits you best.
Vasil Vasilev