如何将聊天插件添加到自建站点?

一、功能简介

将聊天插件添加到自建站点，可以帮助您答复访客的咨询，以及可以在聊天插件中添加第三方的引流渠道来帮助您达到引流、分流的应用场景。

本章将围绕，如何将聊天插件添加到自建站点进行讲解。

二、操作流程

1.复制代码

•在【集成-聊天插件】，在列表中选择您所想要安装的插件，复制其代码；

•或者在您所想要安装的插件右侧操作处，点击编辑插件>集成/安装>找到客服插件-插件安装处，也可以查看到代码。

2.黏贴代码

访问站点托管的服务器后，找到包含标签的文件 （一般为index，具体请咨询站点的开发工程师），打开文件，在标记前粘贴上 JavaScript 代码，保存更改生效即可成功安装。

Vue 框架引入 JavaScript 代码示例

• 放置项目的 index.html 文件中（可能文件位置会不一样）
  

React 框架引入 JavaScript 代码示例

• 放置项目的 index.html 文件中（可能文件位置会不一样）

HTML 文件引入 JavaScript 代码示例

• 放置项目的 index.html 文件中（可能文件位置会不一样）

Uni-app 框架引入 JavaScript 代码示例

PHP 引入 JavaScript 代码示例

• 放置项目的 index.html 文件中（可能文件位置会不一样）

• 效果展示
  

Angular 引入 JavaScript 代码示例

• 放置项目的 index.html 文件中（可能文件位置会不一样）
  

3.Demo 展示

• 请访问： 点击跳转

常见问题：

1.安装聊天插后件优化网页加载速度

SaleSmartly 平台的聊天插件本身是不会影响到您网站加载速度的，如果您的网站加载慢可以尝试以下方式：

(1)推荐使用defer

在 HTML 文件中使用<script>标签时，可以通过添加defer属性来延迟脚本的执行，在 HTML 解析完成后执行，但不会等到所有内容（如图片等资源）加载完成后才执行。这样可以提高页面的加载性能，因为脚本的下载和解析不会阻塞页面的呈现。

<script src="https://.../js/project_xxxxx_xxxxx_xxxxxxxx.js" defer></script>

(2)使用async 时

• 脚本加载和执行不会阻塞 HTML 解析，但执行顺序无法保证

<script src="https://.../js/project_xxxxx_xxxxx_xxxxxxxx.js" async></script>

(3)在网页所有资源加载完成后加载sdk，sdk加载速度会较慢

window.addEventListener('load', () => {
    // 在此处手动加载sdk
});

(4)按需引入