知识库

Back to support overview

此用例描述了几种WebChat SDK方法的示例实现。

该示例在网站上具有一个“帮助”按钮，如果单击该按钮，则会打开网聊并触发特定的流程。

1. 创建流程并发送给用户

本指南假定您已经根据自己的意愿创建了流程。

例如，我们这里有一个非常简单的流程，它要求用户确认他们是否需要帮助。 如果是这样，则流程会将它们分配给代理。

要了解如何构建自己的流程，请参阅本文。

在打开流程编辑器后，复制流程ID供以后使用。 可以在网址中找到流程ID: https://app.chatvisor.com/#/entities/flows/show/<FLOWID>.

在这个例子中，Flow ID 是 5f17ecec3564c64604a1cc4b.

2. 在您的网站上实施SDK方法

首先，我们需要在网站上实现“开放聊天”和“触发流程” API方法。 他们的文档可以在这里找到。

HTML

在这里，我们创建一个按钮，它将打开聊天窗口并触发流程。

    <button onclick="getHelp()">Need help?</button>

JavaScript

这是我们实现SDK方法的地方。

/** 
* open webchat and trigger 'Customer Help' flow
*/
function getHelp() {
    CV.webchat.open();
    CV.webchat.triggerFlow("5f17ecec3564c64604a1cc4b");
}

这将打开WebChat窗口并触发流程，从而为客户提供了在需要时与代理商联系的快速方法。

可以在此处找到有关CV.webchat.open（）和CV.webchat.triggerFlow（）的文档。

3. 查看结果

如果用户现在单击网站上的此按钮，则聊天将打开并显示如下流程：

其他可能的情况

该用例仅使用“打开聊天”和“触发流”，但是还有“显示/隐藏聊天”方法，使您可以完全隐藏或显示聊天按钮。

有了它，流程或动作规则可以使用更多的用例。

  • 仅在用户滚动到页面上的特定点（JS，“打开聊天” API）后才显示WebChat
  • 如果客户单击“帮助”按钮，回复消息，标记客户，将他们分配给特定的团队，并询问他们的联系信息（JS，“触发流程” API，带有“路由至”的流程和“用户” 输入元素）
  • 仅根据用户信息（例如台式机/手机，语言，引荐网站或搜索引擎（JS，“显示聊天” API））启用WebChat
  • 用户接受您的Cookie后启用网页聊天（JS，“开放聊天” API）
  • 在您的网站上单击一个按钮以打开聊天窗口，