20.6在演示网站上测试您的聊天机器人

Stackchat的Web 信使构件 ,允许您将Luma机器人添加到Luma演示站点。 在本节中,您将在Stackchat Studio中配置集成,构建网站项目,然后将JavaScript添加到您的Luma演示站点以启用实时Web聊天。

  • 已安装最 新版本的Node .js。 请确保您运行的是Node v12或更高版本
  • 最新版 Github桌面版 (或者,如果您愿意,可免费使用Git命令行工具)
  • AWS S3帐户(或您选择的其他托管解决方案)托管您的Luma Bot Javascript

20.6.1配置Web Messenger

登录到Stackchat ,导航到左侧菜单中的Bots ,选择您的Luma Bot,然后点击机器人菜单上 的Integrations按钮。 现在,单 Stackchat Web Messenger的“管理”按钮。

web_messenger_integration

你们会看到这个。 点击“ 默认 头像URL”字段中 输入旁的+按钮

web_messenger_integration

首先将下面的图像下载到您的计算机:

Adobe_AEP_logo

然后,在Stackchat Studio的弹出窗口中上传它:

Adobe_AEP_logo

最后,单击“ 上传”。

Adobe_AEP_logo

现在,对“按钮图标URL”字段执行相同操作(或仅复制并粘贴上一个字段中的新URL)。 别管其他字段。

web_messenger_integration

选择 品牌 选项卡,为“业务图标URL”字段上传同一图像(或仅复制并粘贴上一个字段中的URL)。

对于“品牌颜色”和“对话颜色”字段,请使 用值F3793B。 对于“操作颜色”字段,请 使用值26A9E0

您现在应该拥有:

ui_messenger_brand_crunch2

选择“初 始问候语 ”选项卡,并将此文本添加到第一条消息字段:

准备开始?

然后,将此文本添加到第一个快速回复字段:走!🚀

如果您好奇,请打开bot builder,编辑CDML,并搜索“ 我们走!” 🚀. 您将看到它已配置为欢迎流中的关 键字 。 如果用户选择此快速回复,Luma Bot将在此处导航。

单击 更新集成 ,以保存更改。

web_messenger_integration

保存完成后,打开Web Messenger构件并预览现在显示的Luma品牌!

web_messenger_integration

但是,您会看到未显示您在初始问候语选 项卡中配 置的快速回复。 这是因为只有新用户才能看到它。

要进行测试,请单击自 动菜单 中的“概述”按钮,然 后单击右 上方的“共享”按钮。

web_messenger_integration

单击“复 制链接 ”按钮。

web_messenger_integration

然后打开新的隐姓埋名窗口,粘贴您复制的URL。

web_messenger_integration

现在您应当看到您的快速回复初始问候语。 单击它,查看Luma Bot如何带您进入欢 流。

web_messenger_integration

现在,您的Web信使已准备好嵌入到您的Luma演示站点上!

20.6.2将Web Messenger添加到您的演示站点

返回Visual Studio代码编辑器。

打开后,导航到 。/web-messenger文件夹

vs_web-messager-folder.png

打开终端(视图->终端)。

演示

输入命令 cd web-messenger ,然后 按Enter

演示

运行命令 npm i以安装项目依赖项。

演示

花点时间浏览项 目的 src文件夹。 以下是两个文件夹的细分:

  • luma-api:从演示API获取Luma品牌信息的逻辑
  • messenger:实例化web messenger并自定义它的逻辑

演示

在构建和测试项目之前,需要使用您机器人的App Id更新配置。

转到Stackchat Studio,导航到Luma Bot,然后单 击Bot菜 单上的“集成”。 单击Web Messenger “管理”按钮。

演示

在Web Messenger屏幕中,复制应用程序ID:

演示

现在,返回Visual Studio代码,打开配置文件: src/messenger/config.ts 并将您的App ID值添加到第4行的配置对象,确保它是 字符串,如引号:

appId: null, // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

在此示例中,应用程 序ID为“ctduc8z4hn6x03”,因此更新后的第4行现在应当如下:

appId: "ctduc8z4hn6x03", // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

演示

在配置文件中保存更改。 现在,您已准备好构建和测试项目。 启动终端(视图->终端)并运行build命令:

npm运行内部版本

此命令执行Webpack,它已配置为将TypeScript项目编译为与浏览器兼容的单个JavaScript文件。
生成应成功完成:

演示

您的项目现在将有 一个 Webpack生成的dist文件夹。 它将包含一个名 为bundle.js的文件。 您需要在下一步中托管此文件,以便演示网站可以访问它。

20.6.3托管JavaScript文件

要在演示站点上获取Luma Bot,您需要将bundle.js文 件放在某处 ,并使其可公开访问。 在 练习5.1 —— 设置一个AWS S3存储桶 ,您已经设置了一个AWS存储桶,我们可以利用它。

登录您的AWS S3帐户: https://console.aws.amazon.com/s3。 由于您需要此文件公开可用,因此我们创建一个新的存储段。 单击 创建存储段

演示

将存储段命 名为 aepmodule20LDAP ,例如 aepmodule20vangeluw,然后选择适用于您的区域。

演示

向下滚动,直到您看 到“阻止公共访问”的存储段设置

  • 取消选中“阻止所 有公共访问”复选框
  • 选中复选框“我 确认当前设置……”

您现在应具有类似的视图:

演示

  • 再次 单击 “下一步”, 保留“名称”和 “区域”设置。
  • 在“配置 选项 ”部分,取消勾 号阻止所有公共访问。 这将显示确认声明,确认此存储段中的任何内容均可公开访问。 勾选要确认的框,然后单击“下一 步”

s3_bucket_setpermissions

向下滚动并单击 创建存储段

现在,您新的存储段已创建,请单击它以将其打开。

演示

你们会看到这个。

演示

单击 上传。 然后您将看到:

s3_bundlefile-review

单击 “添加文件”,导览至并选择您 的bundle.js文件

s3_bundlefile-overview

你现在看到这个。 向下滚动,但滚 动到 “目标”字段上,并选中复选框 “我确认将覆盖具有相同名称的现有对象”

演示

向下滚动并单击“ 上传”。

演示

你们会看到这个。 单击文件 名bundle.js

演示

您现在应能够视图文件的概述详细信息,包括对 象URL。 复制此URL,因为您在下一步中需要它。 单击“ 公开 ”按钮。

s3_bundlefile_overviewdetails

您现在已成功托管 bundle.js文件 。 在下一步中,您必须在“更新配 置ID”屏幕中粘贴对象URL

20.6.4更新您的演示站点配置ID

要确保演示站点加载您的Luma聊天机器人,您需要更新演示网站配置ID以包括:

  • Stackchat bundle.js JavaScript URL,您刚通过S3存储段创建
  • Journey Orchestration事件ID,用于触发您在练习20.4 中设置的旅程

在清 、整洁的隐姓埋名窗口中,转到https://public.aepdemo.net/admin_configuration_update.html页面。 然后您将看到:

演示

输入配置ID并点击“加 载配置 ”按钮。 然后您将拥有:

演示

向下滚动,直到您看到字段 EventID - Stackchat JourneyStackchat Chatbot Tag

演示

将EventID - Stackchat Journey value(此值为空)替换为您在 Exercise 20.4.1中创建的业务流程EventID ,并将当前Stackchat Chatbot标记值替换为您托管文件bundle.js的对象 URL,它是AWS S3对象URL您在上一步中创建。

演示

向下滚动并单击“ 更新配置ID ”按钮。 你已经准备好测试了!

演示

20.6.5通过演示方案

Go to https://public.aepdemo.net/. 输入您的配置ID并单击加载配置。 然后,选择您的LDAP,然后选择您的品牌。 选择品牌 Luma

当您访问Luma主页时,您将看到正在加载聊天机器人,并且该图标将显示在屏幕的右下方。

演示

首先,转到 登录/注册,填写您的个人信息并创建新帐户。

演示

然后您将看到聊天机器人在行动动员中使用您的名字:

演示

这可以通过将用户信息附加到文件帮助程序 beforeSend委托中的消息元数据来实现,这样,聊天机器人就不必询问我们已经知道的信息。 您可以在此处进一步了 解邮件元数据

打开聊天构件, 然后单击“我们走!”。

演示

你们会看到这个。 接下来,选择“ 我需要创意 ”菜单项。

演示

然后您将看到Luma产品显示在聊天机器人中。

演示

接下来,点击❤️几款产品上的按钮,生成已查看产品的事件,并触发Journey Orchestration旅程。

演示

几秒钟后,您应会收到一封来自Adobe Experience Platform和Journey Orchestration的电子邮件,其中包含您刚刚喜欢的商品的促销信息。

演示

聊天机器人的下一个问题是,您是否愿意提供有关聊天体验的反馈。 单击 “Sure”。

演示

做出选择,在这种情况下,选择是 好的

演示

单击“ 乐意”!

演示

提供更多详细反馈,然后单击“ 发送”。

演示

最后,打开X光面板并单击刷新按钮。 然后,您会在X光面板中看到您的产品视图。

演示

您的Web Messenger聊天机器人现在运行正常。 现在,我们将您的聊天机器人连接到Facebook Messenger。

下一步: 20.7将您的聊天机器人连接到Facebook Messenger

返回模块20

返回到所有模块

在此页面上