npm 包 @mangoart/gatsby-plugin-purechat 使用教程

阅读时长 4 分钟读完

在现代网站中,聊天窗口已经成为各大企业网站中必不可少的组件。而 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,如果您还没有安装过,请先参考 GatsbyReact 的官方文档进行安装。安装完成后,在您的 Gatsby 项目根目录下,使用以下命令安装 @mangoart/gatsby-plugin-purechat:

使用

  1. 在您的 Gatsby 项目根目录下的 gatsby-config.js 中配置:
-- -------------------- ---- -------
-------------- - -
  -------- -
    -
      -------- -----------------------------------
      -------- -
        ------- -----
        ---------- -----------------
      -
    -
  -
-
展开代码

其中,

  • enable 值为 true 表示启用 PureChat 窗口,在生产环境中默认启用,在开发环境中不启用。
  • websiteId 值为您在 PureChat 中的网站 ID,如果不填写,则无法正常启用 PureChat 窗口。
  1. 将 PureChat 窗口的相关代码嵌入到您的模板文件中:
-- -------------------- ---- -------
------ ----- ---- -------
------ - ---------- - ---- --------

----- -------- - -- -- -
  -------
    ----------------------
    ------------------------------------------
  --
-

------ ------- --------
展开代码

示例代码

-- -------------------- ---- -------
-- ----------------
-------------- - -
  -------- -
    -
      -------- -----------------------------------
      -------- -
        ------- -----
        ---------- ---------
      -
    -
  -
-

-- ----------------------
------ ----- ---- -------
------ - ---------- - ---- --------

----- -------- - -- -- -
  -------
    ----------------------
    ------------------------------------------
  --
-

------ ------- --------

-- --------------
------ ----- ---- -------
------ -------- ---- ------------------------

----- --------- - -- -- -
  -----
    --------- -----------
    ---------- -- -- ------ ---------
    --------- --
  ------
-

------ ------- ---------
展开代码

总结

本文详细介绍了如何使用 @mangoart/gatsby-plugin-purechat 插件将 PureChat 窗口集成到 Gatsby 网站当中。通过本文的讲解,您可以轻松的将 PureChat 窗口加入到您的网站当中,提升与您的客户的交互体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600672523660cf7123b36329

纠错
反馈

纠错反馈