在此博客中,我将向您展示如何使用 Zoocial Flow Builder 创建 Facebook Messenger 机器人和 Instagram DM 机器人。请按照指导性博客逐步创建交互式 Facebook Messenger 机器人或 Instagram DM 机器人。
要构建机器人,首先,转到 Zoocial 的仪表板。现在单击仪表板左侧栏中的 Bot manager 选项。
![](https://demo.chatpion.com/documentation/assets/screenshots/ChatPion-Dashboard-bot_manager.png)
机器人管理器
Bot Manager 页面将立即出现。在页面顶部,您将看到您的 Facebook 帐户的个人资料。如果您又导入了一份 Facebook 个人资料,您可以更改 Facebook 个人资料。
要在 Facebook 页面上构建机器人,请选择 Facebook 的单选按钮。另一方面,要在 Instagram 上构建机器人,请选择 Instagram 的单选按钮。
![](https://demo.chatpion.com/documentation/assets/screenshots/bot_manager.png)
视觉流程生成器编辑器
那么,要构建一个机器人,请单击“创建新流”按钮。 Flow Builder 的编辑器将立即出现。编辑器分为两部分——文档菜单和编辑器。在文档菜单上,所有组件都聚集在一起。要构建机器人,您必须将组件从文档菜单中拖放到编辑器上。然后您必须配置组件并将它们相互连接。在文档菜单上,有 14 个组件。
![](https://demo.chatpion.com/documentation/assets/screenshots/first_look_drag_and%20_drop.png)
启动机器人流程
在编辑器上,您将看到一个名为 start bot flow 的元素。该组件对于构建机器人至关重要。双击 Start bot Flow 元素,名为 Configure Reference 的右侧栏将出现,其中包含两个字段 - Title 和 Choose Labels。在标题字段中,为机器人命名。
在选择标签字段中,您必须从不同字段的下拉菜单中选择标签。您可以在“选择标签”字段中选择多个标签。现在单击“完成”按钮,信息将添加到元素中。
![](https://demo.chatpion.com/documentation/assets/screenshots/start_bot_flow.png)
添加新标签
在选择标签字段中,您可以添加新标签。只需记下标签的名称,然后按回车键。
![](https://demo.chatpion.com/documentation/assets/screenshots/add_new_label.png)
触发关键词
现在将触发器关键字元素拖放到编辑器上。现在双击该组件,将出现一个名为 configure Trigger 的侧边栏。在该字段中,您必须提供以逗号分隔的关键字。当用户输入其中一个关键字时,机器人将启动。此外,您还可以选择匹配类型——精确关键字匹配和字符串匹配。然后单击“完成”按钮。关键字将出现在组件上。
现在将 Trigger Keywords 组件与 Start Bot Flow 组件连接起来。
![](https://demo.chatpion.com/documentation/assets/screenshots/trigger_keywords.png)
无需从 Doc-menu 拖动即可添加组件
您还可以添加组件,而无需将组件从文档菜单中拖放到编辑器上。从任何组件的下一个输出,拖动光标并放下。并立即出现不同组件的菜单。然后从菜单中选择一个组件,该组件将出现在与母组件连接的编辑器中。
![](https://demo.chatpion.com/documentation/assets/screenshots/select_component_from_menu.png)
如果您将光标从任何组件的按钮输出拖放到编辑器上,则按钮组件将出现在与母组件连接的编辑器上。
注意。 Doc-menu 中不存在 Button 组件。
![](https://demo.chatpion.com/documentation/assets/screenshots/add_button_component.png)
文本
如果要构建带有文本元素的机器人,请将文本组件拖放到编辑器上。现在双击该组件,将出现一个名为配置文本消息的侧边栏,其中包含一个文本字段。在文本字段中,您必须提供回复信息。您可以在回复消息中包含用户的名字或姓氏。
您还可以通过打开单选按钮启用显示屏上的打字。然后您可以选择以秒为单位的延迟回复时间。
现在单击“完成”按钮,信息将显示在组件上。然后将文本组件与 Start bot flow 组件连接起来。
![](https://demo.chatpion.com/documentation/assets/screenshots/text_component.png)
在回复消息中包含自定义变量
此外,您可以在回复消息中包含自定义变量。单击名为自定义的按钮,将出现一个包含不同变量的下拉菜单。然后从下拉菜单中选择一个变量。自定义变量在发送之前将被替换为实际值。
![](https://demo.chatpion.com/documentation/assets/screenshots/custom_variable.png)
图像、音频、视频和文件组件
同样,您可以添加图像、音频、视频和文件组件。对于这些组件,您必须分别上传图像、音频、视频和文件。然后你必须将组件与其他组件连接起来。
![](https://demo.chatpion.com/documentation/assets/screenshots/image%20component.png)
![](https://demo.chatpion.com/documentation/assets/screenshots/video_component.png)
![](https://demo.chatpion.com/documentation/assets/screenshots/audio_component.png)
![](https://demo.chatpion.com/documentation/assets/screenshots/file_component.png)
脸书媒体
要添加 FB Media 组件,请将 FB Media 组件从 Doc-menu 拖放到编辑器上。现在双击 FB Media 组件,将出现名为 Facebook Media URL 的右侧栏。在 Facebook 媒体 URL 字段中,输入您的 Facebook 页面媒体 URL。
您可以在显示屏上启用打字功能,并以秒为单位选择延迟回复的时间。现在单击完成按钮,Facebook 页面媒体 URL 将出现在组件上。
![](https://demo.chatpion.com/documentation/assets/screenshots/FB_media_component.png)
卡片
要添加卡片组件,请从文档菜单中拖动卡片组件并将其放置在编辑器上。 Card 组件将与按钮组件一起出现。那么,现在双击 Card 组件,将出现一个名为 Configure Generic Template 的右侧边栏。现在上传一张图片。上传图片后,在图片点击目标链接字段中粘贴一个链接。当用户单击图像时,用户将被重定向到该 URL。现在在 Title 字段中写一个标题,在 Subtitle 字段中写一个副标题。
![](https://demo.chatpion.com/documentation/assets/screenshots/card_component.png)
然后你必须配置按钮组件
阅读以下部分以了解如何添加和配置按钮组件。
按钮
要添加 Button 组件,请将光标从 Text 或 Card 组件等组件的按钮输出中拖放。立即,Button 组件将出现与母组件的连接。
有时按钮组件会自动出现与其他组件连接,例如 Card 和 Carousel 组件。
现在双击按钮组件,将出现一个名为配置按钮的右侧边栏。现在在按钮文本字段中写入文本 - 文本将显示在按钮上。然后您必须从按钮类型字段中选择一个按钮类型。单击按钮类型字段和不同按钮类型的下拉菜单 – New postback、postback、Weburl、Webview [full]、Webview[compact]、Webview[tall]、User birthday、User email、User phone、User location , 打电话给我们, 取消订阅, 重新订阅, 与人聊天和与机器人聊天将出现。
![](https://demo.chatpion.com/documentation/assets/screenshots/button/button%20_component_select_button_type%20.png)
按钮类型
新回发
在按钮类型上选择新建回发,然后单击完成按钮。
![](https://demo.chatpion.com/documentation/assets/screenshots/button/select_new_postback_button.png)
配置新回传
立即,一个新的回发按钮将出现并与 Button 组件连接。现在双击 New postback Component,将出现名为 configure New postback 的右侧栏。在标题字段中为新回发命名。然后从选择标签字段中选择标签。现在点击完成按钮。
![](https://demo.chatpion.com/documentation/assets/screenshots/button/configure_new_post_back.png)
回传
如果您选择 Postback 作为按钮类型,将出现一个名为 Postback ID 的字段。从回发 ID 字段中,您必须选择一个回发 ID。单击回发 ID 字段,将出现一个包含不同回发 ID 的下拉菜单。然后从下拉菜单中选择一个回发 ID。然后单击“完成”按钮。回发 ID 将出现在按钮组件上。
![](https://demo.chatpion.com/documentation/assets/screenshots/button/select_postback_button_type.png)
网址、Webview[完整]、Webview[高]、Webview[紧凑]:
如果您选择 Web Url、Webview[full]、Webview[tall] 或 Webview[compact],则会出现另一个字段。在该字段中,您必须粘贴一个 URL。现在粘贴一个 URL 并单击完成按钮。之后,该 URL 将出现在 Button 组件上。
![](https://demo.chatpion.com/documentation/assets/screenshots/button/select_web_url_button_type.png)
选择按钮类型
从按钮类型字段中,您可以选择用户电子邮件、用户生日、用户电话或用户位置、取消订阅按钮、重新订阅按钮、与人聊天、与机器人聊天。从按钮类型中选择任何一种后,单击完成按钮。按钮类型将立即出现在按钮上。
打电话给我们
从不同按钮类型的下拉菜单中选择呼叫我们按钮,立即会出现另一个名为手机/电话号码的字段。现在您必须在该字段中提供您的电话号码。然后点击完成按钮。
![](https://demo.chatpion.com/documentation/assets/screenshots/button/select_call_us_button_type.png)
轮播:
旋转木马
要添加 Carousel 组件,请将 Carousel 组件从 Doc-menu 拖放到编辑器上。立即,Carousel 组件将出现三个与 Carousel 组件连接的 carousel item 和三个与三个 carousel 组件连接的按钮组件。
现在双击 Carousel 组件,将出现名为配置 Carousel 的右侧栏。在边栏中,您可以启用显示打字并选择延迟回复时间(以秒为单位)。现在点击完成按钮。
![](https://demo.chatpion.com/documentation/assets/screenshots/carousel_component.png)
轮播项目
现在来到轮播项目组件。双击 carousel Item 按钮,将出现名为 Configure Carousel Item 的右侧栏,其中包含一些字段。
现在上传一张图片。上传图片后,在图片点击目标链接字段中粘贴一个链接。当用户单击图像时,用户将被重定向到该 URL。现在在标题字段中写一个标题,在副标题字段中写一个副标题。启用显示屏上的打字并选择以秒为单位的延迟时间。
同样,您必须配置其他两个轮播项目。
现在您必须配置按钮。您已经知道如何配置按钮。
如果需要,您可以使用按钮组件添加其他组件。
现在单击保存按钮或按 ctrl + S,您的机器人将被保存。
![](https://demo.chatpion.com/documentation/assets/screenshots/full_carousel.png)
快速回复
要添加快速回复组件,请将快速回复组件从文档菜单中拖放到编辑器上。快速回复组件将立即出现在编辑器上。您还可以通过将光标从组件的快速回复输出拖放到编辑器上来添加快速回复组件。
现在双击快速回复组件,将出现一个名为配置快速回复的右侧栏。现在在快速回复类型字段中,您必须选择快速回复类型。单击快速回复类型字段,将出现一个包含不同类型快速回复的下拉菜单——新回发、回发、电话和电子邮件。
![](https://demo.chatpion.com/documentation/assets/screenshots/quick_reply.png)
新的回发作为快速回复类型
选择新回发作为快速回复类型,立即会出现一个名为按钮文本的字段。现在您必须在按钮文本字段中为按钮提供文本。然后点击完成按钮。
![](https://demo.chatpion.com/documentation/assets/screenshots/quick_reply_type_new_postback.png)
quick_reply_new_postback_component_connected.png
立即,将出现一个新的回发组件与快速回复组件连接。现在双击新的回发元素,将出现名为配置新回发的右侧栏。在标题字段中为新回发命名。然后从选择标签字段中选择标签。现在点击完成按钮。
之后,您必须使用新回发组件的下一个输出添加另一个组件。
回发作为快速回复
如果您选择回发作为快速回复类型,将出现两个字段——按钮文本和回发 ID。在按钮文本字段中,您必须为按钮编写文本。从回发 ID 字段中,您必须选择一个回发。单击回发 ID 字段,将出现一个包含不同回发 ID 的下拉菜单。然后从下拉菜单中选择一个回发 ID。然后单击“完成”按钮。并且回传id会出现在快捷回复组件上
![](https://demo.chatpion.com/documentation/assets/screenshots/quick_reply_type_new_postback.png)
电话作为快速回复
只需在快速回复类型字段中选择电话作为快速回复类型,然后单击完成按钮。在这种情况下,快速回复将从您的 Facebook 个人资料中收集您的电话号码并显示在 Messenger 中。当用户点击电话号码时,系统会收到电话号码。用户将收到一条消息,表明系统已收到您的电话号码。
电子邮件作为快速回复
只需在快速回复类型字段中选择电子邮件作为快速回复类型,然后单击完成按钮。在这种情况下,快速回复将从您的 Facebook 个人资料中收集您的电子邮件地址并显示在 Messenger 中。当用户点击电话号码时,系统将收到电子邮件地址。用户将收到一条消息,表明系统已收到您的电子邮件地址。
电子商务
要添加电子商务组件,请将电子商务组件从文档菜单中拖放到编辑器上。电子商务组件将立即出现在编辑器中。
现在双击电子商务组件,将出现一个名为配置电子商务的右侧栏,其中包含一些字段。首先,您必须选择一个电子商务商店。单击选择您的电子商务商店字段,将出现一个包含不同预定义商店的下拉菜单。那么,要配置电子商务组件,首先您必须创建商店。
选择商店后,您必须选择轮播/通用回复的产品。只要点击该字段,就会出现不同产品的下拉菜单。现在从下拉菜单中选择产品。当然,您可以选择多个产品。然后你必须为立即购买按钮编写文本。此外,您还可以在显示屏上启用打字并选择以秒为单位的延迟时间。现在点击完成按钮。
然后您必须将电子商务组件与其他组件连接起来。
您选择的产品将在 Messenger 中显示为轮播/通用模板。通过点击立即购买按钮,用户将能够购买产品。
![](https://demo.chatpion.com/documentation/assets/screenshots/Ecommerce.png)
OTN
要添加 OTN 组件,请将 OTN 组件从文档菜单拖放到编辑器上。 OTN 组件将立即出现在编辑器中。
现在双击 OTN 组件,将出现一个名为配置 OTN 的右侧栏,其中包含两个字段。
首先,您必须在标题字段中为 OTN 组件编写标题。然后您必须从 OTN 回发 ID 字段中选择一个预定义的 OTN 回发。
此外,您还可以在显示屏上启用打字并选择以秒为单位的延迟时间。
然后单击“完成”按钮。
![](https://demo.chatpion.com/documentation/assets/screenshots/select_OTN_Postback_ID.png)
创建 OTN 回发
如果您没有任何预定义的 OTN 回发,则必须先创建一个 OTN 回发。要创建 OTN 回发,请从 OTN 回发 ID 字段的下拉菜单中选择新建 OTN。然后单击“完成”按钮。
![](https://demo.chatpion.com/documentation/assets/screenshots/create_new_otn_01.png)
现在单击 New OTN 组件,将出现一个名为 Configure New OTN 的右侧栏,其中包含一些字段。在模板名称字段中提供模板名称,然后在标签字段中选择标签。您可以在显示屏上启用打字功能,并选择以秒为单位的延迟回复时间。然后点击完成按钮。并且信息将出现在新 OTN 模板上。
![](https://demo.chatpion.com/documentation/assets/screenshots/create_new_otn_02.png)
现在点击 New postback Component,一个名为 configure new postback 的右侧栏将出现,其中包含一些字段。在标题字段中输入标题,然后在选择标签字段中选择标签。现在点击完成按钮。现在您必须将一个组件与新的回发组件连接起来。之后,单击“保存”按钮,您的带有 OTN 的机器人将被保存。
![](https://demo.chatpion.com/documentation/assets/screenshots/new_otn_postback.png)
操作按钮
要添加 Action Buttons 组件,请将 Action Button 组件从 Doc-menu 拖放到编辑器上。立即,操作按钮组件将出现在编辑器中。
现在双击 Action Button 组件,将出现一个名为 Configure Action Button 的右侧栏,其中包含一个名为 Action Button 的字段。从该字段中,您必须选择一个操作按钮。点击Action Button字段和不同Action Buttons的下拉菜单——开始模板、无匹配模板、取消订阅模板、重新订阅模板、Email快速回复模板、位置快速回复模板、生日快速回复模板、Chat与人类模板和与机器人聊天模板 – 将出现。现在您必须从下拉菜单中选择一个操作按钮模板。然后点击完成按钮。立即,操作按钮模板的名称将出现在操作按钮组件上。
现在您必须将操作按钮组件与启动机器人流组件连接起来。
![](https://demo.chatpion.com/documentation/assets/screenshots/new_otn_postback.png)