npm 包 primo-explore-slaask 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

primo-explore-slaask 是一款用于集成 Slaask 及其聊天服务到 Primo 系统的 npm 包。它提供了一组自定义组件，在 Primo 系统中插入 Slaask 商务聊天系统，以便更好地与用户互动。

安装和使用

在 Primo 系统中使用 npm 安装 primo-explore-slaask。
```
npm install --save primo-explore-slaask
```
在 Primo 系统中创建 custom.scss 文件，以供后续配置。
```
@import 'primo-explore-slaask/scss/primo-explore-slaask.scss';
```

在 Primo 系统中配置 custom.js 文件，以修改默认配置。

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

在 custom.js 文件中设置 Slaask 配置信息，包括 website_id 等参数。

customSlaaskProvider.setSlaaskSettings({
    website_id: 'your_website_id'
});

在 Primo 系统的页面中插入 Slaask 组件。
```
<custom-slaask></custom-slaask>
```

组件说明

primo-explore-slaask 提供了多个组件，可供这些组件的自定义视图修改，以实现集成 Slaask 的功能。

custom-slaask

这个组件是必要的，它是 Primo 系统中用于集成 Slaask 的主要组件。默认情况下，他会向 Primo 系统上面的菜单栏添加一个聊天按钮。

该组件使用以下属性：

showChat: 绑定到该属性的值表示 Slaask 客服聊天服务是否处于活动状态。

custom-slaask-menu

该组件用于在 Primo 的页面中嵌入 Slaask 菜单。在默认情况下，其将放置到 Primo 的右上角位置。

在页面上通过单击这个按钮，打开 Slaask 聊天窗口。

该组件使用以下属性：

showChat: 绑定到该属性的值表示 Slaask 客服聊天服务是否处于活动状态。

custom-slaask-button

该组件用于在 Primo 的页面中嵌入一个 Slaask 聊天按钮。该按钮也是调用 custom-slaask-menu 组件的方式之一。

该组件使用以下属性：

showChat: 绑定到该属性的值表示 Slaask 客服聊天服务是否处于活动状态。
icon: 指定按钮的 FontAwesome 字体图标（默认值为 fa-commenting。）。

示例代码

我来示范一下如何在 Primo 中添加 Slaask 组件。以下代码片段可以置于 Primo 中的 custom.js 文件中。

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

以下是修改 custom-slaask-menu 组件的示例：

<custom-slaask-menu show-chat="showChat" class="custom-slaask-menu--position-topright">
    <div class="custom-slaask-menu__custom-label">Chat with Us</div>
    <div class="custom-slaask-menu__custom-icon">
        <custom-slaask-button show-chat="showChat" icon="fa-comments"></custom-slaask-button>
    </div>
</custom-slaask-menu>

如此， Primo 系统就可以拥有完整集成 Slaask 的能力了。希望这篇文章对大家有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055eb281e8991b448dc53e