Freshdesk Messaging Facade
Contents
The Freshdesk Messaging
chat widget loads 1.1 MB (gzipped) of JavaScript and assets on page load increasing the time for the page to complete loading by 5 seconds. Typically only a small percentage of users will interact with the chat widget meaning that most users have needlessly downloaded a lot of data. It’d be better if the code for the widget loaded when hovered over instead.
"A facade is a static element which looks similar to the actual embedded third-party, but is not functional and therefore much less taxing on the page load."
Inspired by the awesome Lite YouTube Embed by Paul Irish I created a lightweight embed which is 1/1000th of the size.
Comparison
| 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 |
How it works
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.
How to use
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 data-siteid.
Demo
https://coliff.github.io/freshdesk-messaging-facade/
FAQs
-
Q. How can I customize the chat widget’s color?
A. You can modify the background-color value of
#freshdesk-messaging-icon. -
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
Known Issues
-
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.
Contributing
This project is open source and contributions are welcome!
