coliff/freshdesk-messaging-facade

A faster Freshdesk Messaging (formerly Freshchat) embed

Maintainers

Details

github.com/coliff/freshdesk-messaging-facade

Source

Issues

Documentation

Fund package maintenance!
Paypal

Installs: 7

Dependents: 0

Suggesters: 0

Security: 0

Stars: 15

Watchers: 3

Forks: 5

Open Issues: 2

Language:JavaScript

pkg:composer/coliff/freshdesk-messaging-facade

v1.3.2 2025-06-10 11:16 UTC

MIT 291dae2fcb6a5b82612bb1da7fd02233b2ef39c5

This package is auto-updated.

Last update: 2025-10-02 00:23:30 UTC

README

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.

Comparison

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 https://github.com/coliff/freshdesk-messaging-facade.git
  • 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

Usage

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

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.

Credits and thanks