在现代网站中,聊天窗口已经成为各大企业网站中必不可少的组件。而 PureChat 又是聊天窗口组件中的一个不错的选择。在 Gatsby 网站开发中,使用 @mangoart/gatsby-plugin-purechat 插件可以轻松集成 PureChat 窗口。在本文中,我们将会详细解释如何使用 @mangoart/gatsby-plugin-purechat 插件来将 PureChat 窗口集成到您的 Gatsby 网站中。
支持的环境
- Gatsby ^2.0.0
- React ^16.0.0
安装
安装 @mangoart/gatsby-plugin-purechat 首先需要先安装 Gatsby 和 React,如果您还没有安装过,请先参考 Gatsby 和 React 的官方文档进行安装。安装完成后,在您的 Gatsby 项目根目录下,使用以下命令安装 @mangoart/gatsby-plugin-purechat:
npm i @mangoart/gatsby-plugin-purechat
使用
- 在您的 Gatsby 项目根目录下的
gatsby-config.js
中配置:
-- -------------------- ---- ------- -------------- - - -------- - - -------- ----------------------------------- -------- - ------- ----- ---------- ----------------- - - - -展开代码
其中,
enable
值为true
表示启用 PureChat 窗口,在生产环境中默认启用,在开发环境中不启用。websiteId
值为您在 PureChat 中的网站 ID,如果不填写,则无法正常启用 PureChat 窗口。
- 将 PureChat 窗口的相关代码嵌入到您的模板文件中:
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ---------- - ---- -------- ----- -------- - -- -- - ------- ---------------------- ------------------------------------------ -- - ------ ------- --------展开代码
示例代码
-- -------------------- ---- ------- -- ---------------- -------------- - - -------- - - -------- ----------------------------------- -------- - ------- ----- ---------- --------- - - - - -- ---------------------- ------ ----- ---- ------- ------ - ---------- - ---- -------- ----- -------- - -- -- - ------- ---------------------- ------------------------------------------ -- - ------ ------- -------- -- -------------- ------ ----- ---- ------- ------ -------- ---- ------------------------ ----- --------- - -- -- - ----- --------- ----------- ---------- -- -- ------ --------- --------- -- ------ - ------ ------- ---------展开代码
总结
本文详细介绍了如何使用 @mangoart/gatsby-plugin-purechat 插件将 PureChat 窗口集成到 Gatsby 网站当中。通过本文的讲解,您可以轻松的将 PureChat 窗口加入到您的网站当中,提升与您的客户的交互体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600672523660cf7123b36329