Custom widget style

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

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>

PreviousInstalling widget on selected pages NextCustom attributes

Last updated 6 months ago

Was this helpful?

<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>