React.js 实现

一般

Provide Support for React.js 实时聊天组件使实时聊天与 React.js 的集成变得简单明了。支持所有可用的实时聊天功能。

安装

React.js 的 Provide Support 实时聊天组件可在 NPM 存储库中作为 Providesupport-live-chat-window-react 获得。它可以与所有流行的捆绑器一起正常工作。要安装 React.js 的实时聊天组件，请使用以下命令：

npm install providesupport-live-chat-window-react --save

包括组件

要开始使用 React.js 的实时聊天组件，您只需从 Providesupport-live-chat-window-react 包中导入该组件并传递

“公司”参数。 “公司”参数可以是您的帐户名或帐户哈希。

import React from 'react';
import { LiveChat } from 'providesupport-live-chat-window-react';
export default () => (
  <div className="app">
    <LiveChat company="your_account_hash" />
  </div>
);

LiveChat 组件应尽可能靠近应用程序的根目录，因为它包含 iframe。

实时聊天道具

道具名称	描述	是必须的	默认值
公司	注册期间指定的帐户名或帐户哈希	是的	不适用
isUploadAfterDocumentLoaded	页面加载后加载聊天按钮	不是	正确的
bannerDomain	如果您的帐户激活了自定义域，请指定从中下载横幅的自定义域	不是	"image.providesupport.com"
(...otherParams)	传递到横幅下载 URL 的所有其他参数，例如自定义变量	不是	不适用

某些样式（例如实时聊天按钮位置）可以通过帐户控制面板进行自定义。但是，您可以覆盖这些样式或更改聊天窗口加载位置。例如，以下样式应用于实时聊天按钮并将其固定在屏幕的右下角：

.psmtc_XXXX {

position: fixed !important;

right: 20 !important;

bottom: 20 !important;

}

实时聊天窗口将从添加实时聊天按钮的位置弹出，除非您像这样更改它：

.psmw_XXXX {

position: fixed !important;

left: 0 !important;

bottom: 0 !important;

}

在上面的示例中，无论实时聊天按钮的位置如何，实时聊天窗口都设置为从左下角弹出。