In this tutorial you’ll see a simple example of how to override the default style of the widget launcher icon and add a simple animation on hover.
You can use this example to override and change any element of the widget. Remember to subscribe to the native Tiledesk onInit event and append your custom styles to the already loaded files inside the widget iframe.
Preview of the custom launcher icon override:
Custom launcher icon
This example uses Tiledesk’s onInit event to access the widget iframe and inject a <style> element into its <head>. Keep your project ID placeholder <<TILEDESK_PROJECT_ID>> as needed.
Here is the full code example:
Notes:
Keep all URLs and query parameters unchanged.
You can adapt the CSS rules to target any widget element—just ensure the styles are injected into the widget iframe after it has initialized (via onInit).