A Lightweight Freshdesk Messaging Embed

2 min readOct 26, 2021

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 façade 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.” — — Google web.dev

Inspired by the awesome Lite YouTube Embed by Paul Irish I created a lightweight embed which looks identical but is 1/1000th of the size.

Comparison

Original JavaScript
Number of assets: 28
Network Transfer size: 1097 KB
Page Complete Time: 6.3 seconds

Freshdesk Messaging Facade
Number of assets: 2
Network Transfer size: 1 KB
Page Complete Time: 1.1 second

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. Yep, 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 nomodule attribute 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!