介绍 (Introduction)

…learn how you can add conversation your website.

…学习如何增加网站对话。

Chatbot development environments are becoming more of a configuration environment than a development environment. It use to be tricky integrating your chatbot to different mediums, through which your user will access the conversational interface.

与开发环境相比，Chatbot开发环境越来越成为一种配置环境。 将您的聊天机器人集成到不同的媒介时会非常棘手，用户可以通过该媒介访问对话界面。

This is also in many instances an ongoing process, as the chatbot needs to be accessible in more conversational environments. Having the points of integration hosted within your chatbot development environment is helpful.

在许多情况下，这也是一个持续的过程，因为聊天机器人需要在更多对话环境中进行访问。 在您的聊天机器人开发环境中托管集成点将很有帮助。

One of the leaders in this field is Microsoft, they have always had a good collection of integration tools and widgets.

微软是该领域的领导者之一，他们一直拥有大量的集成工具和小部件。

Now we are seeing a steady expanding of these integration tools with IBM Watson Assistant.

现在，我们看到使用IBM Watson Assistant的这些集成工具正在稳步扩展。

介绍Watson Assistant Web聊天 (Introducing Watson Assistant Web Chat)

IBM Watson Assistant has a very convenient feature for creating a JavaScript web widget. You have the option to customize the widget to a large degree.

IBM Watson Assistant具有用于创建JavaScript Web小部件的非常方便的功能。 您可以选择在很大程度上自定义窗口小部件。

Via the Watson Assistant console, the JavaScript snippet can be copied and pasted into the basic html of your website.

通过Watson Assistant控制台，可以将JavaScript代码段复制并粘贴到您网站的基本html中。

Two key advantages of this are the following…

其两个主要优点如下：

• Conversational components like buttons, links, images etc are carried through to your web chat interface. Allowing for a richer user experience.诸如按钮，链接，图像等的对话组件将被传送到您的Web聊天界面。 允许更丰富的用户体验。
• Secondly any updates and changes to your conversational model within Watson Assistant is automatically propagated to the web interface.其次，对Watson Assistant中对话模型的任何更新和更改都将自动传播到Web界面。

It has to be noted that currently there is a WordPress plugin for Watson Assistant. This plugin is very convenient for web chat integration. However, the ideal would be to use this tool from IBM.

必须指出，当前有一个Watson Assistant的WordPress插件。 这个插件对于网络聊天集成非常方便。 但是，理想的情况是使用IBM的此工具。

In the following section I will take you through an overview of setting up the web chat functionality.

在以下部分中，我将带您简要了解设置网络聊天功能。

It has to be said that Watson Assistant has a preview link, which you can use to generate a URL to access the chatbot. This is however only for testing purposes and allowing a preview of the functionality. It cannot be used in any life implementation.

必须说Watson Assistant有一个预览链接，您可以使用它来生成URL来访问聊天机器人。 但是，这仅出于测试目的，并允许预览功能。 不能在任何生活实现中使用。

循序渐进的过程 (Step-By-Step Process)

When you create a Web Chat integration, code is generated that calls a script that is written in JavaScript. This script instantiates a unique instance of your assistant. You can then copy and paste the HTML script element into any page or pages on your website where you want users to be able to ask your assistant for help.

创建Web聊天集成时，将生成代码，该代码调用用JavaScript编写的脚本。 该脚本实例化助手的唯一实例。 然后，您可以将HTML script元素复制并粘贴到网站上您希望用户能够向您的助手寻求帮助的任何页面中。

Start by navigating to the integration section in Watson Assistant and selecting Web chat integration. You can give your integration configuration a unique name.

首先导航到Watson Assistant中的“集成”部分，然后选择“ Web聊天集成”。 您可以为集成配置指定一个唯一的名称。

And then click on Create.

然后单击创建。

There is an option to add live agent transfers to Zendesk and Salesforce.

有一个选项可以将实时座席转移添加到Zendesk和Salesforce。

You can also add encryption for authentication and authorization.

您还可以添加加密以进行身份​​验证和授权。

Once you have created the web chat integration, there are options to set the avatar of your chatbot.

创建网络聊天集成后，便可以使用一些选项来设置聊天机器人的头像。

The assistant’s name can be added, in this case I left it as Watson Assistant.

可以添加助手的名称，在这种情况下，我将其保留为Watson Assistant。

There are options to tweak the primary, secondary and accent color of the chat window.

有一些选项可以调整聊天窗口的主要，辅助和重点颜色。

On the right of the customization window is a test chat interface to get an idea of the look and feel of the chat interface prior to launching it.

在自定义窗口的右侧是一个测试聊天界面，用于在启动之前了解聊天界面的外观。

Again, as you test your chatbot in the configuration environment, media elements are available. This allows for a true user experience prior to deployment.

同样，在配置环境中测试聊天机器人时，媒体元素可用。 这样可以在部署之前提供真正的用户体验。

Once you are happy with the look and feel of your chat window, scroll down and copy the JavaScript snippet from the configuration window.

对聊天窗口的外观感到满意后，请向下滚动并从配置窗口复制JavaScript代码段。

Head over to your website, access the html code, and find a spot where you can paste the code snippet it.

转至您的网站，访问html代码，然后找到可以在其中粘贴代码段的位置。

Paste the code as close to the closing </body> tag as possible to ensure that your page renders faster.

将代码粘贴到尽可能靠近</body>标记的位置，以确保页面呈现速度更快。

You will have a very convenient floating web launch button, which expands the chat window. The conversation history is visible, until you refresh the page.

您将有一个非常方便的浮动Web启动按钮，它会扩展聊天窗口。 在刷新页面之前，对话历史记录是可见的。

The Web Chat launcher icon is displayed at the end of the page. The icon is blue unless you customize the accent color.

Web Chat启动器图标显示在页面末尾。 除非您自定义强调色，否则该图标为蓝色。

You can paste the same script tag in multiple pages on a website. Anywhere you would want the user to be able to reach your assistant. Obviously only add it once to a page.

您可以将同一脚本标签粘贴到网站上的多个页面中。 您希望用户能够与您的助手联系的任何地方。 显然，只需将其添加到页面一次。

结论 (Conclusion)

And there you have it, below is a link to the IBM documentation with more technical information.

到了那里，下面是指向IBM文档的链接，其中包含更多技术信息。