A faster Freshdesk Messaging (formerly Freshchat) Facade
MIT License
The Freshchat widget loads more than 1.1 MB (gzipped) of JavaScript on page-load.
This facade (less than 1 KB gzipped) prevents Freshchat's JavaScript from loading until the chat widget is hovered over saving your users a lot of bandwidth and substantially improving page-load times.
Freshchat JS | Freshchat Facade | |
---|---|---|
Number of assets | 28 | 2 |
Page Complete | 6.3 s | 1.1 s |
Network Transfer size | 1097 KB | 1 KB |
A div with an inline SVG of the Freshchat icon is displayed in the bottom corner - appearing just like the real thing. When a user hovers within 200 pixels of it loads the Freshdesk Messaging script. A simple animated icon is displayed as the script loads.
Several quick start options are available:
git clone https://github.com/coliff/freshdesk-messaging-facade.git
npm install freshdesk-messaging-facade
yarn add freshdesk-messaging-facade
composer require coliff/freshdesk-messaging-facade
Load the CSS and JS in your head:
<link rel="stylesheet" href="css/freshdesk-messaging-facade.min.css" media="screen">
<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" aria-label="Chat"></div>
</freshdesk-messaging-facade>
Add your 36-digit Freshchat token to the data-token
and your site's id to data-siteid
.
You can optionally add a data-host
attribute to set the host of the widget. The default is https://wchat.freshchat.com
.
https://coliff.github.io/freshdesk-messaging-facade/
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