README

Freshdesk 消息（Freshchat）外观

Freshchat 小部件在页面加载时加载超过 1.1 MB（压缩）的 JavaScript。

此外观（小于 1 KB 压缩）防止 Freshchat 的 JavaScript 加载，直到聊天小部件被悬停，从而节省了用户大量的带宽并显著提高了页面加载时间。

比较

工作原理

在底部角落显示一个包含 Freshchat 图标的内联 SVG 的 div - 看起来就像真的那样。当用户在其附近 200 像素内悬停时，加载 Freshdesk 消息脚本。当脚本加载时，显示一个简单的动画图标。

快速入门

提供几种快速入门选项

下载最新版本
克隆存储库 git clone https://github.com/coliff/freshdesk-messaging-facade.git
使用 npm 安装 npm install freshdesk-messaging-facade
使用 yarn 安装 yarn add freshdesk-messaging-facade
使用 Composer 安装 composer require coliff/freshdesk-messaging-facade

使用方法

在您的头部加载 CSS 和 JS

<link rel="stylesheet" href="css/freshdesk-messaging-facade.min.css" media="screen">
<script src="js/freshdesk-messaging-facade.min.js" type="module" async></script>

在您的页面上加载网页组件
```
<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>
```
将 36 位 Freshchat 令牌添加到 data-token 中，并将您网站的 id 添加到 data-siteid 中。

您可以可选地添加一个 data-host 属性来设置小部件的主机。默认值为 https://wchat.freshchat.com。

演示

https://coliff.github.io/freshdesk-messaging-facade/

常见问题解答

问题：我如何自定义聊天小部件的颜色？

答案：您可以修改 background-color 的值 #freshdesk-messaging-icon。
问题：我能否从 CDN 加载此内容？

答案：是的，它可在 JSDelivr 上找到。
问题：它能在 IE 11 中工作吗？

答案：不，但您可以为旧浏览器轻松加载标准 Freshdesk 消息小部件，并为其添加 nomodule 属性作为回退。查看 Gist

已知问题

一些 iOS 上的内容阻止程序可能会阻止 Freshdesk 消息小部件，导致外观无法正常工作。
Freshdesk 消息小部件和资源较大，因此加载它们可能需要几秒钟。

致谢

该项目受到 Paul Irish 的 Lite YouTube Embed 项目的启发。
感谢 Yoksel 提供有用的 SVG 到 CSS 转换器

coliff / freshdesk-messaging-facade

维护者

详细信息