How can change the font size of the Tiledesk widget

Community Support
1

I want to increase the font size of the messages sent from the agent/bot of the Live Chat Widget. How can do that?

2

Currently you must use Javascript and CSS to customize the UI.

Moreover you must use the Tiledesk JS SDK tileDeskAsyncInit function and the events lifecycle described Tiledesk JS SDK events

After importing the standard tiledesk script you must write inside the onInit event (to be sure the Tiledesk iframe is created) a JS script that create on the fly a custom css for the specific div.

Below you can find an example:

<script type="application/javascript">
window.tiledeskSettings =
 {
 projectid: "XXXXXXXXXXXXXXX"
 };
 (function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "https://widget.tiledesk.com/v4/launch.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'tiledesk-jssdk'));


 window.tileDeskAsyncInit = function() {
    window.tiledesk.on('onInit', function(event_data) {
       console.log("tiledesk started");
       var iframeTiledesk = document.getElementById("tiledeskiframe");

       var style = iframeTiledesk.contentWindow.document.createElement('style');
       style.type = 'text/css';
       style.innerHTML = '.message_innerhtml.marked.ng-star-inserted { font-size: 17!important; }';

       iframeTiledesk.contentWindow.document.getElementsByTagName('head')[0].appendChild(style);
     });
   }
</script>
1 Like