Download the PHP package coliff/freshdesk-messaging-facade without Composer
On this page you can find all versions of the php package coliff/freshdesk-messaging-facade. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download coliff/freshdesk-messaging-facade
More information about coliff/freshdesk-messaging-facade
Files in coliff/freshdesk-messaging-facade
Package freshdesk-messaging-facade
Short Description A faster Freshdesk Messaging (formerly Freshchat) embed
License MIT
Informations about the package freshdesk-messaging-facade
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
-
Load the CSS and JS in your head:
-
Load the web component within your page:
Add your 36-digit Freshchat token to the
data-tokenand your site's id todata-siteid.You can optionally add a
data-hostattribute to set the host of the widget. The default ishttps://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-colorvalue 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
nomoduleattribute 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
- This project is inspired by the Lite YouTube Embed project by Paul Irish.
- Thanks to Yoksel for the useful SVG to CSS converter