{"id":16412482,"url":"https://github.com/coliff/freshdesk-messaging-facade","last_synced_at":"2025-03-16T16:32:49.882Z","repository":{"id":37833855,"uuid":"419621135","full_name":"coliff/freshdesk-messaging-facade","owner":"coliff","description":"A faster Freshdesk Messaging (formerly Freshchat) Facade","archived":false,"fork":false,"pushed_at":"2024-10-01T18:32:41.000Z","size":342,"stargazers_count":14,"open_issues_count":9,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-20T01:42:24.120Z","etag":null,"topics":["facade","freshchat","freshdesk","hacktoberfest"],"latest_commit_sha":null,"homepage":"https://coliff.github.io/freshdesk-messaging-facade/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coliff.png","metadata":{"funding":{"github":"coliff","ko_fi":"coliff","custom":"https://paypal.me/coliff"},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-21T07:19:47.000Z","updated_at":"2024-10-17T12:56:10.000Z","dependencies_parsed_at":"2024-08-21T02:35:43.266Z","dependency_job_id":null,"html_url":"https://github.com/coliff/freshdesk-messaging-facade","commit_stats":{"total_commits":88,"total_committers":5,"mean_commits":17.6,"dds":"0.43181818181818177","last_synced_commit":"41a9bc34bdc99f1f8d22645473eebb311bdcd383"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Ffreshdesk-messaging-facade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Ffreshdesk-messaging-facade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Ffreshdesk-messaging-facade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Ffreshdesk-messaging-facade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coliff","download_url":"https://codeload.github.com/coliff/freshdesk-messaging-facade/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221666311,"owners_count":16860396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["facade","freshchat","freshdesk","hacktoberfest"],"created_at":"2024-10-11T06:49:06.184Z","updated_at":"2025-03-16T16:32:49.872Z","avatar_url":"https://github.com/coliff.png","language":"JavaScript","funding_links":["https://github.com/sponsors/coliff","https://ko-fi.com/coliff","https://paypal.me/coliff"],"categories":[],"sub_categories":[],"readme":"[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/freshdesk-messaging-facade/main/LICENSE)\n[![GitHub Super-Linter](https://github.com/coliff/freshdesk-messaging-facade/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![npm Version](https://img.shields.io/npm/v/freshdesk-messaging-facade)](https://www.npmjs.com/package/freshdesk-messaging-facade)\n[![npm Downloads](https://img.shields.io/npm/dt/freshdesk-messaging-facade.svg)](https://www.npmjs.com/package/freshdesk-messaging-facade)\n\n# Freshdesk Messaging (Freshchat) Facade\n\nThe [Freshchat](https://developers.freshchat.com/web-sdk/) widget loads more than 1.1 MB (gzipped) of JavaScript on page-load.\n\nThis 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.\n\n## Comparison\n\n|                       | Freshchat JS | Freshchat Facade |\n| --------------------- | ------------ | ---------------- |\n| Number of assets      | 28           | 2                |\n| Page Complete         | 6.3 s        | 1.1 s            |\n| Network Transfer size | 1097 KB      | 1 KB             |\n\n## How it works\n\nA 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.\n\n## Quick start\n\nSeveral quick start options are available:\n\n- [Download the latest release](https://github.com/coliff/freshdesk-messaging-facade)\n- Clone the repo `git clone https://github.com/coliff/freshdesk-messaging-facade.git`\n- Install with [npm](https://www.npmjs.com/package/freshdesk-messaging-facade) `npm install freshdesk-messaging-facade`\n- Install with [yarn](https://yarnpkg.com/en/package/freshdesk-messaging-facade) `yarn add freshdesk-messaging-facade`\n- Install with [Composer](https://packagist.org/packages/coliff/freshdesk-messaging-facade) `composer require coliff/freshdesk-messaging-facade`\n\n## Usage\n\n1. Load the CSS and JS in your head:\n\n   ```html\n   \u003clink rel=\"stylesheet\" href=\"css/freshdesk-messaging-facade.min.css\" media=\"screen\"\u003e\n   \u003cscript src=\"js/freshdesk-messaging-facade.min.js\" type=\"module\" async\u003e\u003c/script\u003e\n   ```\n\n2. Load the web component within your page:\n\n   ```html\n   \u003cfreshdesk-messaging-facade id=\"freshdesk-messaging-facade\" data-token=\"\" data-siteid=\"\" hidden\u003e\n     \u003cdiv id=\"freshdesk-messaging-icon\" tabindex=\"0\" role=\"button\" aria-label=\"Chat\"\u003e\u003c/div\u003e\n   \u003c/freshdesk-messaging-facade\u003e\n   ```\n\n   Add your 36-digit Freshchat token to the `data-token` and your site's id to `data-siteid`.\n\n   You can optionally add a `data-host` attribute to set the host of the widget. The default is `https://wchat.freshchat.com`.\n\n## Demo\n\nhttps://coliff.github.io/freshdesk-messaging-facade/\n\n## FAQs\n\n- **Q. How can I customize the chat widget's color?**\n\n  A. You can modify the `background-color` value of `#freshdesk-messaging-icon`.\n\n- **Q. Can I load this from a CDN?**\n\n  A. Yep, it's available on [JSDelivr](https://www.jsdelivr.com/package/npm/freshdesk-messaging-facade).\n\n- **Q. Does it work in IE 11?**\n\n  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](https://gist.github.com/coliff/fe18a182c8224d8d92ae1c31a31d756f)\n\n## Known Issues\n\n- Some content blockers on iOS may block the Freshdesk Messaging widget leading to the facade being non-functioning.\n- The Freshdesk Messaging widget and assets are large so it can take a couple of seconds for them to load.\n\n## Credits and thanks\n\n- This project is inspired by the [Lite YouTube Embed](https://github.com/paulirish/lite-youtube-embed) project by Paul Irish.\n- Thanks to Yoksel for the useful [SVG to CSS converter](https://yoksel.github.io/url-encoder/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Ffreshdesk-messaging-facade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoliff%2Ffreshdesk-messaging-facade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Ffreshdesk-messaging-facade/lists"}