Skip to content


Repository files navigation

LICENSE GitHub Super-Linter code style: prettier NPM Version NPM Downloads

Freshdesk Messaging (Freshchat) Facade

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

How it works

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.

Quick start

Several quick start options are available:

  • Download the latest release
  • Clone the repo git clone
  • Install with npm npm install freshdesk-messaging-facade
  • Install with yarn yarn add freshdesk-messaging-facade
  • Install with Composer composer require coliff/freshdesk-messaging-facade


  1. 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>
  2. 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>

    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



  • 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.

Credits and thanks