In this tutorial we will show to you a simple tutorial of how to override the default style of the widget icon, and how to add a simple animation on hover event on the same element
You can use this example to override and change every element of the widget and customize it as you want. Simply remember to subsribe to 'onInit' navite Tiledesk event and append style to the and of the already loaded files
Here is a preview of the custom launcher icon override
Custom launcher icon
Here is the full code example
<html>
<head>
<script type="application/javascript">
var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
window.tiledeskSettings =
{
projectid: PROJECT_ID,
};
(function (d, s, id) {
var w = window; var d = document; var i = function () {i.c(arguments);};
i.q = []; i.c = function (args) {i.q.push(args);}; w.Tiledesk = i;
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id; js.async = true; js.src = "https://widget.tiledesk.com/v6/launch.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'tiledesk-jssdk'));
window.Tiledesk('onInit', function (event_data) {
var iframeTiledesk = document.getElementById("tiledeskiframe");
var style = iframeTiledesk.contentWindow.document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.message_innerhtml.marked { font-size: 17!important;}\n';
//add custom stype to launcher-button (image + border + background-image)
style.innerHTML += '#c21-launcher-button > div > svg { display: none !important; }\n';
style.innerHTML += '#c21-launcher-button .launcher-button { background-image: url("https://panel.tiledesk.com/v3/dashboard/assets/img/avatar_bot_tiledesk.svg"); background-repeat: no-repeat;}\n';
style.innerHTML += '#c21-launcher-button { padding: 6px;background-color:unset !important; border: 1px solid rgb(182, 20, 22);}\n';
//add custom animation to launcher button on hover
style.innerHTML += '#c21-launcher-button .launcher-button:hover { animation: fade-in 1.2s ease-in both;}'
style.innerHTML += '@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }'
iframeTiledesk.contentWindow.document.getElementsByTagName('head')[0].appendChild(style);
})
</script>
</head>
<body>
This Tiledesk example will change the default style of widget launcher icon and add a simple animation hovering it
</body>
</html>
