Freshdesk Messaging Facade
Inspired by the awesome Lite YouTube Embed by Paul Irish I created a lightweight embed which is 1/1000th of the size.
|Freshdesk Messaging JS||Freshdesk Messaging Facade|
|Number of assets||28||2|
|Network Transfer size||1097 KB||1 KB|
|Page Complete Time||6.3 s||1.1 s|
A div with an inline SVG of the Freshdesk Messaging icon is displayed in the bottom-right corner - appearing just like the real thing. When a user hovers within 300 pixels it starts to download the Freshdesk Messaging script. A simple animated icon is displayed as the script loads.
Load the CSS and JS in your head:
<link rel="stylesheet" href="css/freshdesk-messaging-facade.min.css"> <script src="js/freshdesk-messaging-facade.min.js" type="module" async></script>
Load the web component within your page:
<freshdesk-messaging-facade id="freshdesk-messaging-facade" data-token="" data-siteid="" hidden> <div id="freshdesk-messaging-icon" tabindex="0" role="button"></div> </freshdesk-messaging-facade>
Add your 36-digit Freshdesk Messaging token to the
data-token and your site’s id to
Q. How can I customize the chat widget’s color?
A. You can modify the background-color value of
Q. Can I load this from a CDN?
A. Yes, it’s available on JSDelivr .
Q. Does it work in IE 11?
A. No, but you can easily load the standard Freshdesk Messaging widget and add the
nomoduleattribute to it as a fallback for legacy browsers. View Gist
Some content blockers on iOS may block the Freshdesk Messaging widget leading to the facade being non-functioning.
The Freshdesk Messaging widget and assets are large so it can take a couple of seconds for them to load.
This project is open source and contributions are welcome!