Freshdesk Messaging Facade

Posted on
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."
Google web.dev

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 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!

You might also like