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-token
and your site's id todata-siteid
.You can optionally add a
data-host
attribute 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-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
- This project is inspired by the Lite YouTube Embed project by Paul Irish.
- Thanks to Yoksel for the useful SVG to CSS converter