{"id":235358,"date":"2021-05-28T17:11:23","date_gmt":"2021-05-29T00:11:23","guid":{"rendered":"https:\/\/messengerbot.app\/?p=235358"},"modified":"2026-06-12T14:53:34","modified_gmt":"2026-06-12T21:53:34","slug":"%e0%a4%ae%e0%a5%88%e0%a4%b8%e0%a5%87%e0%a4%82%e0%a4%9c%e0%a4%b0-%e0%a4%ac%e0%a5%89%e0%a4%9f-%e0%a4%b5%e0%a4%bf%e0%a4%9c%e0%a5%81%e0%a4%85%e0%a4%b2-%e0%a4%ab%e0%a5%8d%e0%a4%b2%e0%a5%8b-%e0%a4%ac","status":"publish","type":"post","link":"https:\/\/messengerbot.app\/hi\/messenger-bot-visual-flow-builder\/","title":{"rendered":"\u092e\u0948\u0938\u0947\u0902\u091c\u0930 \u092c\u0949\u091f \u2013 \u0926\u0943\u0936\u094d\u092f \u092a\u094d\u0930\u0935\u093e\u0939 \u0928\u093f\u0930\u094d\u092e\u093e\u0924\u093e"},"content":{"rendered":"<input type=\"hidden\" value=\"\" data-essbisPostContainer=\"\" data-essbisPostUrl=\"https:\/\/messengerbot.app\/hi\/messenger-bot-visual-flow-builder\/\" data-essbisPostTitle=\"Messenger Bot &#8211; Visual Flow Builder\" data-essbisHoverContainer=\"\"><p>[et_pb_section fb_built=&#8221;1&#8243; disabled_on=&#8221;off|off|off&#8221; admin_label=&#8221;Header&#8221; _builder_version=&#8221;4.9.4&#8243; background_color=&#8221;rgba(239,103,40,0.96)&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;#fcf52d&#8221; background_color_gradient_end=&#8221;#006aff&#8221; background_color_gradient_direction=&#8221;148deg&#8221; background_color_gradient_start_position=&#8221;19%&#8221; background_image=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/01\/software-06.png&#8221; parallax=&#8221;on&#8221; custom_margin=&#8221;||||false&#8221; custom_padding=&#8221;4vw||4vw||true|false&#8221; bottom_divider_style=&#8221;arrow&#8221; bottom_divider_color=&#8221;#F5F5F5&#8243; bottom_divider_height=&#8221;29vw&#8221; bottom_divider_repeat=&#8221;0.8x&#8221;][et_pb_row column_structure=&#8221;1_2,1_2&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;#242424&#8243; background_color_gradient_end=&#8221;#282828&#8243; border_radii=&#8221;on|22px|22px|22px|22px&#8221; border_width_all=&#8221;4px&#8221; border_color_all=&#8221;#FFFFFF&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_vertical=&#8221;7px&#8221; box_shadow_spread=&#8221;0px&#8221; box_shadow_color=&#8221;rgba(0,0,0,0.67)&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; link_font=&#8221;ABeeZee|700|||||||&#8221; link_text_color=&#8221;#FFC929&#8243; link_font_size=&#8221;17px&#8221; background_layout=&#8221;dark&#8221; custom_padding=&#8221;18px|30px|18px|30px|true|true&#8221; border_color_all=&#8221;#FFFFFF&#8221;]<\/p>\n<p><span style=\"text-decoration: underline;\">Table of Contents:<\/span><\/p>\n<ul>\n<li><a href=\"#visual_flow_builder\">Visual Flow Builder<\/a><\/li>\n<ul class=\"a\">\n<li><a href=\"#intro_getting_started\">INTRODUCTION: Getting Started is Easy!<\/a><\/li>\n<li><a href=\"#get_started\">Get Started<\/a><\/li>\n<li><a href=\"#trigger_component\">Trigger Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#trigger-introduction\">Introduction<\/a><\/li>\n<li><a href=\"#trigger-connections\">Connections<\/a><\/li>\n<li><a href=\"#create_trigger_component\">How to create a Trigger component<\/a><\/li>\n<\/ul>\n<li><a href=\"#newpostback_component\">New Postback Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#newpostback-introduction\">Introduction<\/a><\/li>\n<li><a href=\"#newpostback-connections\">Connections<\/a><\/li>\n<li><a href=\"#create_newpostback_component\">How to create a New Post component<\/a><\/li>\n<\/ul>\n<li><a href=\"#text_component\">Text Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#text-introduction\">Introduction<\/a><\/li>\n<li><a href=\"#text-connections\">Connections<\/a><\/li>\n<li><a href=\"#create_text_component\">How to create a Text component<\/a><\/li>\n<\/ul>\n<li><a href=\"#image_component\">Image Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#image-introduction\">Introduction<\/a><\/li>\n<li><a href=\"#image-connections\">Connections<\/a><\/li>\n<li><a href=\"#create_image_component\">How to create an Image component<\/a><\/li>\n<\/ul>\n<li><a href=\"#gen_temp_component\">Generic Template Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#gen_temp-introduction\">Introduction<\/a><\/li>\n<li><a href=\"#gen_temp-connections\">Connections<\/a><\/li>\n<li><a href=\"#create_gen_temp_component\">How to create an Image component<\/a><\/li>\n<\/ul>\n<li><a href=\"#carousel_component\">Carousel Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#carousel_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#carousel_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_carousel_component\">How to create an Image component<\/a><\/li>\n<\/ul>\n<li><a href=\"#carouselsingle_component\">Carousel Single Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#carouselsingle_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#carouselsingle_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_carouselsingle_component\">How to create an Image component<\/a><\/li>\n<\/ul>\n<li><a href=\"#audio_component\">Audio Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#audio_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#audio_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_audio_component\">How to create an Audio component<\/a><\/li>\n<\/ul>\n<\/ul>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;|38px|||false|false&#8221; custom_padding_tablet=&#8221;&#8221; custom_padding_phone=&#8221;&#8221; custom_padding_last_edited=&#8221;on|desktop&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; link_font=&#8221;ABeeZee|700|||||||&#8221; link_text_color=&#8221;#FFC929&#8243; link_font_size=&#8221;17px&#8221; background_layout=&#8221;dark&#8221; custom_padding=&#8221;48px|0px||0px|false|true&#8221; custom_padding_tablet=&#8221;&#8221; custom_padding_phone=&#8221;&#8221; custom_padding_last_edited=&#8221;on|desktop&#8221;]<\/p>\n<ul>\n<ul class=\"a\">\n<li><a href=\"#video_component\">Video Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#video_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#video_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_video_component\">How to create a Video component<\/a><\/li>\n<\/ul>\n<li><a href=\"#file_component\">File Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#file_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#connections\">Connections<\/a><\/li>\n<li><a href=\"#create_file_component\">How to create a File component<\/a><\/li>\n<\/ul>\n<li><a href=\"#fbmedia_component\">Facebook Media Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#fbmedia_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#fbmedia_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_fbmedia_component\">How to create a Facebook Media component<\/a><\/li>\n<\/ul>\n<li><a href=\"#ecommerce_component\">Ecommerce Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#ecommerce_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#ecommerce_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_ecommerce_component\">How to create an Ecommerce component<\/a><\/li>\n<\/ul>\n<li><a href=\"#uif_component\">User Input Flow Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#uif_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#uif_connections\">Connections<\/a><\/li>\n<li><a href=\"#uif_create_component\">How to create a User Input Flow component<\/a><\/li>\n<\/ul>\n<li><a href=\"#otn_component\">OTN Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#otn_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#otn_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_otn_component\">How to create an OTN component<\/a><\/li>\n<\/ul>\n<li><a href=\"#button_component\">Button Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#button_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#button_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_button_component\">How to create a Button component<\/a><\/li>\n<\/ul>\n<li><a href=\"#quick_reply_component\">Quick Reply Component<\/a><\/li>\n<ul class=\"b\">\n<li><a href=\"#quick_reply_introduction\">Introduction<\/a><\/li>\n<li><a href=\"#quick_reply_connections\">Connections<\/a><\/li>\n<li><a href=\"#create_quick_reply_component\">How to create a Quick Reply Component<\/a><\/li>\n<\/ul>\n<\/ul>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Features&#8221; _builder_version=&#8221;4.9.4&#8243; background_color=&#8221;#F4F4F4&#8243; custom_padding=&#8221;50px|0|50px|0px|false|false&#8221;][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h2 id=\"visual_flow_builder\">Visual Flow Builder<\/h2>\n<p>[\/et_pb_text][et_pb_divider color=&#8221;#006AFF&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;10px&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"intro_getting_started\">INTRODUCTION: Getting Started is Easy!<\/h3>\n<p>Welcome to Messenger Bots Flow Builder. This documentation guide you that how you can effectively use the Flow Builder feature.<\/p>\n<p>[\/et_pb_text][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h3 id=\"get_started\">Get Started<\/h3>\n<p><span>In this section, we will be introduced to the features that come with <strong>Messenger Bot Flow Builder<\/strong>. So let&#8217;s start.<\/span><\/p>\n<p><span>Click on the <strong>Visual Flow Builder<\/strong> menu in your dashboard on your left.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-Getting-Started.png&#8221; title_text=&#8221;1.Flow Builder &#8211; Getting Started&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span>Click again on the <strong>Create new flow<\/strong> button and select the Facebook page you want to create a bot for.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.Flow-Builder-Getting-Started.png&#8221; title_text=&#8221;2.Flow Builder &#8211; Getting Started&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span>Now, click on the <strong>Ok<\/strong> button.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3.Flow-Builder-Getting-Started.png&#8221; title_text=&#8221;3.Flow Builder &#8211; Getting Started&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; width_last_edited=&#8221;off|desktop&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;24px||||false|false&#8221; custom_padding=&#8221;0px|0px|0px|0px|true|true&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span>It will then take you to the <strong>visual flow builder interface<\/strong> like the screenshot below:<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4.Flow-Builder-Getting-Started.png&#8221; title_text=&#8221;4.Flow Builder &#8211; Getting Started&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; width_last_edited=&#8221;off|desktop&#8221;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; ol_item_indent=&#8221;24px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span>Now you can see the <strong>dock menu<\/strong> marked in a red box. From this dock menu, you can <strong>drag<\/strong> the <strong>Text<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><strong><span>Dock Menu<\/span><\/strong><span> contains <strong>components<\/strong>. You can use them arbitrarily to create your bot flow. No matter how long the bot flow is. So, you can reuse those components again and again.<\/span><\/p>\n<p><span>The <strong>dock menu<\/strong> comes with the following <strong>components<\/strong>:<\/span><\/p>\n<ol>\n<li><strong><span>Text<\/span><\/strong><\/li>\n<li><strong><span>Image<\/span><\/strong><\/li>\n<li><strong><span>Generic Template<\/span><\/strong><\/li>\n<li><strong><span>Carousel<\/span><\/strong><\/li>\n<li><strong><span>Carousel Single<\/span><\/strong><\/li>\n<li><strong><span>Audio<\/span><\/strong><\/li>\n<li><strong><span>Video<\/span><\/strong><\/li>\n<li><strong><span>File<\/span><\/strong><\/li>\n<li><strong><span>Facebook Media<\/span><\/strong><\/li>\n<li><strong><span>Ecommerce<\/span><\/strong><\/li>\n<li><strong><span>User Input Flow<\/span><\/strong><\/li>\n<li><strong><span>OTN<\/span><\/strong><\/li>\n<li><strong><span>Button<\/span><\/strong><\/li>\n<li><strong><span>Quick Reply<\/span><\/strong><\/li>\n<li><strong><span>Trigger<\/span><\/strong><\/li>\n<li><strong><span>New Postback<\/span><\/strong><\/li>\n<\/ol>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;24px||||false|false&#8221; custom_padding=&#8221;0px|0px|0px|0px|true|true&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span>The can be <strong>moved over<\/strong> to the editor. <strong>Grab the dock menu&#8217;s header<\/strong> by the mouse pointer or <strong>any position<\/strong> with the components and try to move the <strong>mouse position<\/strong>. Thus you can put it where you like to.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5.Flow-Builder-Getting-Started.png&#8221; title_text=&#8221;5.Flow Builder &#8211; Getting Started&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;24px||||false|false&#8221; custom_padding=&#8221;0px|0px|0px|0px|true|true&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span>To <strong>minimize<\/strong> the dock menu, <strong>click twice on its header<\/strong>. You will see a tiny red box after minimizing the dock menu. <strong>Click twice on it to reopen<\/strong> the dock menu again.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/6.Flow-Builder-Getting-Started.png&#8221; title_text=&#8221;6.Flow Builder &#8211; Getting Started&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; width_last_edited=&#8221;off|desktop&#8221;][\/et_pb_image][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.Flow-Builder-Getting-Started.png&#8221; title_text=&#8221;7.Flow Builder &#8211; Getting Started&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; width_last_edited=&#8221;off|desktop&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"trigger_component\">Trigger Component<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"trigger-introduction\"><span>Introduction<\/span><\/h4>\n<p><span>The Trigger component will allow you to get started with the bot. All you need to connect it to a <strong>Start Bot Flow<\/strong> or <strong>New Postback<\/strong>. It has only <strong>1 output<\/strong> socket.<\/span><\/p>\n<ul>\n<li><span>Output: <strong>Next<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"trigger-connections\">Connections<\/h4>\n<p><strong><span>Next<\/span><\/strong><span> may be connected to one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>Start Bot Flow<\/span><\/strong><span>, and <strong>New Postback<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_trigger_component\"><span>How to create a Trigger component<\/span><\/h4>\n<p><span>Let us see how we can get started a bot.<\/span><\/p>\n<p><span>\u00a0<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p><span>From the dock menu, <strong>drag<\/strong> the <strong>Trigger<\/strong> component and <strong>drop<\/strong> it on the editor and connect to either <strong>Start Bot Flow<\/strong> or <strong>New Postback<\/strong> component. Once you&#8217;re done with making the bot. <strong>Save<\/strong> the bot flow and start with a messenger.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-Trigger-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; Trigger Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2-3.Flow-Builder-Trigger-Component.gif&#8221; title_text=&#8221;2-3.Flow Builder &#8211; Trigger Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p><span>To add data to the <strong>Trigger<\/strong> component, click twice on the body of the <strong>Trigger<\/strong> component. It will open a sidebar on your right. Now provide some keywords there separating by a comma. In our case, we&#8217;re providing single keyword <strong>products<\/strong>. Now click on the <strong>OK<\/strong> button.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4.Flow-Builder-Trigger-Component.png&#8221; title_text=&#8221;4.Flow Builder &#8211; Trigger Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p>Then connect it to either <strong>Start Bot Flow<\/strong> or <strong>New Postback<\/strong> component.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5.Flow-Builder-Trigger-Component.png&#8221; title_text=&#8221;5.Flow Builder &#8211; Trigger Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; width_last_edited=&#8221;off|desktop&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"newpostback_component\">New Postback Component<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"newpostback-introduction\"><span>Introduction<\/span><\/h4>\n<p>The New Postback component will allow you to make multiple postbacks through a single bot flow. Each postback will be stored as a standalone postback under the hood. So, you may trigger them later via trigger components if you want. It has <strong>1 input<\/strong> socket and <strong>1 output<\/strong> socket.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"newpostback-connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get a connection from one of the following components:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong>, <strong>Button<\/strong>, and <strong>Trigger<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-NewPostBack-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; NewPostBack Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><span>The <strong>Next<\/strong> may be connected to the following component:<\/span><\/p>\n<ul>\n<li><strong><span>Text<\/span><\/strong><span>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2-3.Flow-Builder-NewPostBack-Component.gif&#8221; title_text=&#8221;2-3.Flow Builder &#8211; NewPostBack Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_newpostback_component\"><span>How to create a New PostBack component<\/span><\/h4>\n<p><span>Let us see how we can create a new postback component.<\/span><\/p>\n<p><span>\u00a0<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p><span>From the dock menu, <strong>drag<\/strong> the <strong>New Postback<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4.Flow-Builder-NewPostBack-Component.png&#8221; title_text=&#8221;4.Flow Builder &#8211; NewPostBack Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>New Postback<\/strong> component, click twice on the body of the <strong>New Postback<\/strong> component. It will open a sidebar on your right. Give it a name. You may choose a label(s) or sequence if you need.<\/p>\n<p>Once done, click on the <strong>OK<\/strong> button.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5.Flow-Builder-NewPostBack-Component.png&#8221; title_text=&#8221;5.Flow Builder &#8211; NewPostBack Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"text_component\">Text Component<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;2_5,3_5&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;2_5&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"text-introduction\"><span>Introduction<\/span><\/h4>\n<p>The Text component will allow you to reply with text content only. It has <strong>1 input<\/strong> socket and <strong>3 output<\/strong> sockets.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong>, <strong>Buttons<\/strong>, and <strong>Quick Replies<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;3_5&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-Text-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; Text Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"text-connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get connection from one of the following components:<\/p>\n<ul>\n<li><strong>Start Bot Flow<\/strong>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Generic Template<\/strong>, <strong>Ecommerce<\/strong>, and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2-3.Flow-Builder-Text-Component.gif&#8221; title_text=&#8221;2-3.Flow Builder &#8211; Text Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><span>The <strong>Next<\/strong> may be connected to the following component:<\/span><\/p>\n<ul>\n<li><strong><span>Text<\/span><\/strong><span>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4-5.Flow-Builder-Text-Component.gif&#8221; title_text=&#8221;4-5.Flow Builder &#8211; Text Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Buttons<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Button<\/strong> &#8211; you may connect up to <strong>3 Button<\/strong> components to the <strong>Text<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/6.Flow-Builder-Text-Component.png&#8221; title_text=&#8221;6.Flow Builder &#8211; Text Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong> &#8211; you may connect up to <strong>11 Quick Reply<\/strong> components to the <strong>Text<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.Flow-Builder-Text-Component.png&#8221; title_text=&#8221;7.Flow Builder &#8211; Text Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_text_component\"><span>How to create a Text component<\/span><\/h4>\n<p>Let us see how we can create a reply with text.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>Text<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.Flow-Builder-Text-Component.png&#8221; title_text=&#8221;8.Flow Builder &#8211; Text Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>Text<\/strong> component, click twice on the body of the <strong>Text<\/strong> component. It will open a sidebar on your right. Fill in the fields that you need.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/9.Flow-Builder-Text-Component.png&#8221; title_text=&#8221;9.Flow Builder &#8211; Text Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p>If you want to show the typing state on the bot or delay in replying, then you can use those fields.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/9.Flow-Builder-Text-Component.png&#8221; title_text=&#8221;9.Flow Builder &#8211; Text Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"image_component\">Image Component<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"image_introduction\"><span>Introduction<\/span><\/h4>\n<p>The Image component will allow you to reply with an image. It has <strong>1 input<\/strong> socket and <strong>2 output<\/strong> sockets.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong>, and <strong>Quick Replies<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-Image-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; Image Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong>: You can connect up to <strong>11 Quick Reply<\/strong> components to the <strong>Image<\/strong> component.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.Flow-Builder-Image-Component.png&#8221; title_text=&#8221;2.Flow Builder &#8211; Image Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3.Flow-Builder-Image-Component.png&#8221; title_text=&#8221;3.Flow Builder &#8211; Image Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"image-connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get connection from one of the following components:<\/p>\n<ul>\n<li><strong>Start Bot Flow<\/strong>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Generic Template<\/strong>, <strong>Ecommerce<\/strong>, and <strong>OTN<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5-6.Flow-Builder-Image-Component.gif&#8221; title_text=&#8221;5-6.Flow Builder &#8211; Image Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Next<\/strong> may be connected to one of the following components:<\/p>\n<ul>\n<li><strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7-8.Flow-Builder-Image-Component.gif&#8221; title_text=&#8221;7-8.Flow Builder &#8211; Image Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.Flow-Builder-Image-Component.png&#8221; title_text=&#8221;8.Flow Builder &#8211; Image Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_image_component\"><span>How to create an Image component<\/span><\/h4>\n<p>Let us see how we can create a reply with an image.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>Image<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/9.Flow-Builder-Image-Component.png&#8221; title_text=&#8221;9.Flow Builder &#8211; Image Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>Image<\/strong> component, click twice on the body of the <strong>Image<\/strong> component. It will open a sidebar on your right. <strong>Fill in<\/strong> the fields that you need.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p>If you want to show the typing state on the bot or delay in replying, then you can use those fields.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/10.Flow-Builder-Image-Component.png&#8221; title_text=&#8221;10.Flow Builder &#8211; Image Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"gen_temp_component\">Generic Template Component<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"gen_temp-introduction\"><span>Introduction<\/span><\/h4>\n<p>The Generic Template component will allow you to reply with an image, or title and subtitle, or all. It has <strong>1 input socket<\/strong> and <strong>3 output<\/strong> sockets.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong>, <strong>Buttons<\/strong>, and <strong>Quick Replies<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-Generic-Template-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; Generic Template Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.Flow-Builder-Generic-Template-Component.png&#8221; title_text=&#8221;2.Flow Builder &#8211; Generic Template Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"gen_temp-connections\">Connections<\/h4>\n<p><span>The <strong>Reply<\/strong> may get connection from one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>Start Bot Flow<\/span><\/strong><span>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong>.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3-4.Flow-Builder-Generic-Template-Component.gif&#8221; title_text=&#8221;3-4.Flow Builder &#8211; Generic Template Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p>The <strong>Next<\/strong> may be connected to one of the following components:<\/p>\n<ul>\n<li><strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5-6.Flow-Builder-Generic-Template-Component.gif&#8221; title_text=&#8221;5-6.Flow Builder &#8211; Generic Template Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Buttons<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Button<\/strong> &#8211; you may connect up to <strong>3 Buttons<\/strong> to the <strong>Generic Template<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.Flow-Builder-Generic-Template-Component.png&#8221; title_text=&#8221;7.Flow Builder &#8211; Generic Template Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong> &#8211; you may connect up to <strong>11 Quick Replies<\/strong> to the <strong>Generic Template<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.Flow-Builder-Generic-Template-Component.png&#8221; title_text=&#8221;8.Flow Builder &#8211; Generic Template Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_gen_temp_component\"><span>How to create a General Template component<\/span><\/h4>\n<p>Let us see how we can create a reply with a generic-template.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>Generic Template<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/9.Flow-Builder-Generic-Template-Component.png&#8221; title_text=&#8221;9.Flow Builder &#8211; Generic Template Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>Generic Template<\/strong> component, click twice on the body of the <strong>Generic Template<\/strong> component. It will open a sidebar on your right. Fill in the fields that you need.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p>If you want to show the typing gif image on the bot or delay in replying, then you can use those fields.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/10.Flow-Builder-Generic-Template-Component.png&#8221; title_text=&#8221;10.Flow Builder &#8211; Generic Template Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"carousel_component\">Carousel Component<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"carousel_introduction\"><span>Introduction<\/span><\/h4>\n<p>The Carousel component will allow you to reply with a carousel. It has <strong>1 input<\/strong> socket and <strong>3 output<\/strong> sockets.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong>, <strong>Items<\/strong>, and <strong>Quick Replies<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.-Flow-Builder-Carousel-Component.png&#8221; title_text=&#8221;1. Flow Builder &#8211; Carousel Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.-Flow-Builder-Carousel-Component.png&#8221; title_text=&#8221;2. Flow Builder &#8211; Carousel Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"carousel_connections\">Connections<\/h4>\n<p><span>The <strong>Reply<\/strong> may get connection from one of the following components:<\/span><\/p>\n<ul>\n<li><strong>Start Bot Flow<\/strong>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3-4.-Flow-Builder-Carousel-Component.gif&#8221; title_text=&#8221;3-4. Flow Builder &#8211; Carousel Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p>The <strong>Next<\/strong> may be connected to one of the following components:<\/p>\n<ul>\n<li><strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5-6.-Flow-Builder-Carousel-Component.gif&#8221; title_text=&#8221;5-6. Flow Builder &#8211; Carousel Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Items<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Carousel Single<\/strong> &#8211; you may connect up to <strong>10 Carousel Single components<\/strong> to the <strong>Carousel components.<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.-Flow-Builder-Carousel-Component.png&#8221; title_text=&#8221;7. Flow Builder &#8211; Carousel Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong> &#8211; you may connect up to <strong>11 Quick Replies<\/strong> to the <strong>Carousel<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.-Flow-Builder-Carousel-Component.png&#8221; title_text=&#8221;8. Flow Builder &#8211; Carousel Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_carousel_component\"><span>How to create a Carousel component<\/span><\/h4>\n<p>Let us see how we can create a reply with carousel<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>Carousel<\/strong> component and <strong>drop<\/strong> it on the editor at any place. Next, you see <strong>3 Carousel Single<\/strong> components and <strong>3 Button<\/strong> components have been created with the <strong>Carousel<\/strong> component.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/9.-Flow-Builder-Carousel-Component.png&#8221; title_text=&#8221;9. Flow Builder &#8211; Carousel Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][et_pb_text ul_position=&#8221;inside&#8221; ul_item_indent=&#8221;44px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; ul_font=&#8221;||||||||&#8221; custom_padding=&#8221;6px||||false|false&#8221;]<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>Carousel<\/strong> component, click twice on the body of the <strong>Carousel<\/strong> component. It will open a sidebar on your right with only fields asking reply-delay and type-state. Interact with them if you need.<\/p>\n<p>By default, we provided 3 carousel single items. You can add more if you wish. Now it&#8217;s time to prepare a carousel single component. Make double-click on each of them to provide data as you need.<\/p>\n<p>Having done with filling in carousel single, you may go for button component to be provided with your carousel. Make double-click on the button component to fill in data as you need.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/10.-Flow-Builder-Carousel-Component.png&#8221; title_text=&#8221;10. Flow Builder &#8211; Carousel Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"carouselsingle_component\">Carousel Single Component<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"carouselsingle_introduction\"><span>Introduction<\/span><\/h4>\n<p>Carousel Single component will allow you to reply with an image, or title and subtitle, or all. It has <strong>1 input<\/strong> socket and <strong>1 output<\/strong> socket.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Button<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.-Flow-Builder-Carousel-Single-Component.png&#8221; title_text=&#8221;1. Flow Builder &#8211; Carousel Single Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"carouselsingle_connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get connection from the following component:<\/p>\n<ul>\n<li><strong>Carousel<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.-Flow-Builder-Carousel-Single-Component.png&#8221; title_text=&#8221;2. Flow Builder &#8211; Carousel Single Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p>The <strong>Button<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Button<\/strong> &#8211; you may connect up to <strong>3 Button<\/strong> components to the <strong>Carousel Single<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3.-Flow-Builder-Carousel-Single-Component.png&#8221; title_text=&#8221;3. Flow Builder &#8211; Carousel Single Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_carouselsingle_component\"><span>How to create a Carousel Single component<\/span><\/h4>\n<p><strong>Carousel Single<\/strong> is dependent on the <strong>Carousel<\/strong> component. So we make it prepare to be connected to the <strong>Carousel<\/strong> component.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>Carousel Single<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>Carousel Single<\/strong> component, click twice on the body of the <strong>Carousel Single<\/strong> component. It will open a sidebar on your right. Fill in the fields as you need.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p>If you want to show the typing gif image on the bot or delay in replying, then you can use those fields.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4.-Flow-Builder-Carousel-Single-Component.png&#8221; title_text=&#8221;4. Flow Builder &#8211; Carousel Single Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"audio_component\">Audio Component<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"audio_introduction\"><span>Introduction<\/span><\/h4>\n<p>The Audio component will allow you to reply with an audio file. It has <strong>1 input<\/strong> socket and <strong>2 output<\/strong> sockets.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong>, and <strong>Quick Replies<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-Audio-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; Audio Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221; locked=&#8221;off&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.Flow-Builder-Audio-Component.png&#8221; title_text=&#8221;2.Flow Builder &#8211; Audio Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"audio_connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get connection from one of the following components:<\/p>\n<ul>\n<li><strong>Start Bot Flow<\/strong>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3-4.Flow-Builder-Audio-Component.gif&#8221; title_text=&#8221;3-4.Flow Builder &#8211; Audio Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Next<\/strong> may be connected to one of the following components:<\/p>\n<ul>\n<li><strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5-6.Flow-Builder-Audio-Component.gif&#8221; title_text=&#8221;5-6.Flow Builder &#8211; Audio Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong> &#8211; you may connect up to <strong>11 Quick Replies<\/strong> to the <strong>Audio<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.Flow-Builder-Audio-Component.png&#8221; title_text=&#8221;7.Flow Builder &#8211; Audio Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_audio_component\"><span>How to create an Audio component<\/span><\/h4>\n<p>Let us see how we can create a reply with an audio component.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>Audio<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>Audio<\/strong> component, click twice on the body of the <strong>Audio<\/strong> component. It will open a sidebar on your right. <strong>Fill in<\/strong> the fields that you need.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p>If you want to show the typing state on the bot or delay in replying, then you can use those fields.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.Flow-Builder-Audio-Component.png&#8221; title_text=&#8221;8.Flow Builder &#8211; Audio Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Features&#8221; _builder_version=&#8221;4.8.1&#8243; background_color=&#8221;#F4F4F4&#8243; custom_padding=&#8221;50px|0|50px|0px|false|false&#8221; locked=&#8221;off&#8221;][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"video_component\">Video Component<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"video_introduction\"><span>Introduction<\/span><\/h4>\n<p>The Video component will allow you to reply with a video file. It has <strong>1 input<\/strong> socket and <strong>2 output<\/strong> sockets.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong>, and <strong>Quick Replies<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-Video-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; Video Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221; locked=&#8221;off&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.Flow-Builder-Video-Component.png&#8221; title_text=&#8221;2.Flow Builder &#8211; Video Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"video_connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get connection from one of the following components:<\/p>\n<ul>\n<li><strong>Start Bot Flow<\/strong>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3-4.Flow-Builder-Video-Component.gif&#8221; title_text=&#8221;3-4.Flow Builder &#8211; Video Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Next<\/strong> may be connected to one of the following components:<\/p>\n<ul>\n<li><strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5-6.Flow-Builder-Video-Component.gif&#8221; title_text=&#8221;5-6.Flow Builder &#8211; Video Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong> &#8211; you may connect up to <strong>11 Quick Replies<\/strong> to the <strong>Video<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.Flow-Builder-Video-Component.png&#8221; title_text=&#8221;7.Flow Builder &#8211; Video Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_video_component\"><span>How to create a Video component<\/span><\/h4>\n<p>Let us see how we can create a reply with a video component.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>Video<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>Video<\/strong> component, click twice on the body of the <strong>Video<\/strong> component. It will open a sidebar on your right. <strong>Fill in<\/strong> the fields that you need.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p>If you want to show the typing state on the bot or delay in replying, then you can use those fields.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.Flow-Builder-Video-Component.png&#8221; title_text=&#8221;8.Flow Builder &#8211; Video Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"file_component\">File Component<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"file_introduction\"><span>Introduction<\/span><\/h4>\n<p>The File component will allow you to reply with a file. It has <strong>1 input<\/strong> socket and <strong>2 output<\/strong> sockets.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong>, and <strong>Quick Replies<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-File-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; File Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221; locked=&#8221;off&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.Flow-Builder-File-Component.png&#8221; title_text=&#8221;2.Flow Builder &#8211; File Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"file_connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get connection from one of the following components:<\/p>\n<ul>\n<li><strong>Start Bot Flow<\/strong>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3-4.Flow-Builder-File-Component.gif&#8221; title_text=&#8221;3-4.Flow Builder &#8211; File Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Next<\/strong> may be connected to one of the following components:<\/p>\n<ul>\n<li><strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5-6.Flow-Builder-File-Component.gif&#8221; title_text=&#8221;5-6.Flow Builder &#8211; File Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong> &#8211; you may connect up to <strong>11 Quick Replies<\/strong> to the <strong>File<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.-Flow-Builder-File-Component.png&#8221; title_text=&#8221;7. Flow Builder &#8211; File Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_file_component\"><span>How to create a File component<\/span><\/h4>\n<p>Let us see how we can create a reply with a file component.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>File<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>File<\/strong> component, click twice on the body of the <strong>File<\/strong> component. It will open a sidebar on your right. <strong>Fill in<\/strong> the fields that you need.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p>If you want to show the typing state on the bot or delay in replying, then you can use those fields.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.-Flow-Builder-File-Component.png&#8221; title_text=&#8221;8. Flow Builder &#8211; File Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"fbmedia_component\">Facebook Media Component<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"fbmedia_introduction\"><span>Introduction<\/span><\/h4>\n<p>Facebook Media component will allow you to reply by referring to a Facebook page. It has <strong>1 input<\/strong> socket and <strong>3 output<\/strong> sockets.<\/p>\n<ul>\n<li>Input: <strong>Reply<\/strong><\/li>\n<li>Output: <strong>Next<\/strong>, <strong>Buttons<\/strong>, and <strong>Quick Replies<\/strong><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.-Flow-Builder-Facebook-Media-Component.png&#8221; title_text=&#8221;1. Flow Builder &#8211; Facebook Media Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221; locked=&#8221;off&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.-Flow-Builder-Facebook-Media-Component.png&#8221; title_text=&#8221;2. Flow Builder &#8211; Facebook Media Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"fbmedia_connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get connection from one of the following components:<\/p>\n<ul>\n<li><strong>Start Bot Flow<\/strong>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3-4.-Flow-Builder-Facebook-Media-Component.gif&#8221; title_text=&#8221;3-4. Flow Builder &#8211; Facebook Media Component&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Next<\/strong> may be connected to one of the following components:<\/p>\n<ul>\n<li><strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5-6.-Flow-Builder-Facebook-Media-Component.gif&#8221; title_text=&#8221;5-6. Flow Builder &#8211; Facebook Media Component&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Buttons<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Button<\/strong> &#8211; you may connect up to <strong>3 Button<\/strong> components to the <strong>Facebook Media<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.-Flow-Builder-Facebook-Media-Component.png&#8221; title_text=&#8221;7. Flow Builder &#8211; Facebook Media Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong>Quick Replies<\/strong> may be connected to the following component:<\/p>\n<ul>\n<li><strong>Quick Reply<\/strong> &#8211; you may connect up to <strong>11 Quick Replies<\/strong> to the <strong>Facebook Media<\/strong> component.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.-Flow-Builder-Facebook-Media-Component.png&#8221; title_text=&#8221;8. Flow Builder &#8211; Facebook Media Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_fbmedia_component\"><span>How to create a Facebook Media component<\/span><\/h4>\n<p>Let us see how we can create a reply with a Facebook page.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu, <strong>drag<\/strong> the <strong>Facebook Media<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the <strong>Facebook Media<\/strong> component, click twice on the body of the <strong>Facebook Media<\/strong> component. It will open a sidebar on your right. Fill in the fields that you need.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p>If you want to show the typing gif image on the bot or delay in replying, then you can use those fields.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/9.-Flow-Builder-Facebook-Media-Component.png&#8221; title_text=&#8221;9. Flow Builder &#8211; Facebook Media Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_divider color=&#8221;rgba(0,106,255,0.32)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"ecommerce_component\">Ecommerce Component<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"ecommerce_introduction\"><span>Introduction<\/span><\/h4>\n<p><span>Ecommerce component will allow you to reply by referring to an ecommerce shop and its products as a carousel or generic reply. It has <strong>1 input<\/strong> socket and <strong>2 output<\/strong> sockets.<\/span><\/p>\n<ul>\n<li><span>Input: <strong>Reply<\/strong><\/span><\/li>\n<li><span>Output: <strong>Next<\/strong>, and <strong>Quick Replies<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-Ecommerce-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; Ecommerce Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221; locked=&#8221;off&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 926px; border-color: #ffffff;\">\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"width: 916.8px; height: 36px;\"><span style=\"color: #ff0000;\"><strong>Note: Next to Quick Replies!?<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 916.8px; height: 95px;\">There is a condition between Next and Quick Replies. Using either Next or Quick Replies, you can connect to other components. But you can&#8217;t connect to others from both.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.Flow-Builder-Ecommerce-Component.png&#8221; title_text=&#8221;2.Flow Builder &#8211; Ecommerce Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"ecommerce_connections\">Connections<\/h4>\n<p>The <strong>Reply<\/strong> may get connection from one of the following components:<\/p>\n<ul>\n<li><strong>Start Bot Flow<\/strong>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong>.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3-4.Flow-Builder-Ecommerce-Component.gif&#8221; title_text=&#8221;3-4.Flow Builder &#8211; Ecommerce Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong><span>Next<\/span><\/strong><span> may be connected to one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>Text<\/span><\/strong><span>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5-6.Flow-Builder-Ecommerce-Component.gif&#8221; title_text=&#8221;5-6.Flow Builder &#8211; Ecommerce Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong><span>Quick Replies<\/span><\/strong><span> may be connected to the following component:<\/span><\/p>\n<ul>\n<li><strong><span>Quick Reply<\/span><\/strong><span> &#8211; you may connect up to <strong>11 Quick Replies<\/strong> to the <strong>Ecommerce<\/strong> component.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/7.Flow-Builder-Ecommerce-Component.png&#8221; title_text=&#8221;7.Flow Builder &#8211; Ecommerce Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"creat_ecommerce_component\"><span>How to create an Ecommerce component<\/span><\/h4>\n<p><span>Let us see how we can create an ecommerce.<\/span><\/p>\n<p><span><\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p><span>From the dock menu, <strong>drag<\/strong> the <strong>Ecommerce<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p><span>To add data to the <strong>Ecommerce<\/strong> component, click twice on the body of the <strong>Ecommerce<\/strong> component. It will open a sidebar on your right. Fill in the fields that you need.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p><span>If you want to show the typing gif image on the bot or delay in replying, then you can use those fields.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/8.Flow-Builder-Ecommerce-Component.png&#8221; title_text=&#8221;8.Flow Builder &#8211; Ecommerce Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"uif_component\">User Input Flow Component<\/h3>\n<p>[\/et_pb_text][et_pb_divider color=&#8221;rgba(255,201,41,0.38)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"uif_introduction\"><span>Introduction<\/span><\/h4>\n<p><span>User Input Flow component will allow you to reply with a user input flow. It has only <strong>1 input<\/strong> socket.<\/span><\/p>\n<ul>\n<li><span>Input: <strong>Reply<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-User-Input-Flow-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; User Input Flow Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"uif_connections\">Connections<\/h4>\n<p><span>The <strong>Reply<\/strong> may get connection from one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>Start Bot Flow<\/span><\/strong><span>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong>.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2-3.Flow-Builder-User-Input-Flow-Component.gif&#8221; title_text=&#8221;2-3.Flow Builder &#8211; User Input Flow Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_uif_component\"><span>How to create a User Input Flow component<\/span><\/h4>\n<p>&nbsp;<\/p>\n<p>Let us see how we can create a reply using the user-input-flow component.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p>From the dock menu,\u00a0<strong>drag<\/strong>\u00a0the\u00a0<strong>User Input Flow<\/strong>\u00a0component and\u00a0<strong>drop<\/strong>\u00a0it on the editor at any place.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p>To add data to the\u00a0<strong>User Input Flow<\/strong>\u00a0component, click twice on the body of the\u00a0<strong>User Input Flow<\/strong>\u00a0component. It will open a sidebar on your right. Fill in the fields that you need.<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4.Flow-Builder-User-Input-Flow-Component.png&#8221; title_text=&#8221;4.Flow Builder &#8211; User Input Flow Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"otn_component\">OTN Component<\/h3>\n<p>[\/et_pb_text][et_pb_divider color=&#8221;rgba(255,201,41,0.38)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"otn_introduction\"><span>Introduction<\/span><\/h4>\n<p><span>The OTN component will allow you to reply with <strong>One Time Notification<\/strong>. It has <strong>1 input<\/strong> socket and <strong>1 output<\/strong> socket.<\/span><\/p>\n<ul>\n<li><span>Input: <strong>Reply<\/strong><\/span><\/li>\n<li><span>Output: <strong>Next<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.Flow-Builder-OTN-Component.png&#8221; title_text=&#8221;1.Flow Builder &#8211; OTN Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"otn_connections\">Connections<\/h4>\n<p><span>The <strong>Reply<\/strong> may get connection from one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>Start Bot Flow<\/span><\/strong><span>, <strong>New Postback<\/strong>, <strong>Text<\/strong>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce, Generic Template,<\/strong> and <strong>OTN<\/strong>.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2-3.Flow-Builder-OTN-Component.gif&#8221; title_text=&#8221;2-3.Flow Builder &#8211; OTN Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong><span>Next<\/span><\/strong><span> may be connected to one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>Text<\/span><\/strong><span>, <strong>Carousel<\/strong>, <strong>Facebook Media<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, <strong>User Input Flow<\/strong>, <strong>Generic Template<\/strong>, and <strong>OTN<\/strong>.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4-5.Flow-Builder-OTN-Component.gif&#8221; title_text=&#8221;4-5.Flow Builder &#8211; OTN Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_otn_component\"><span>How to create an OTN component<\/span><\/h4>\n<p>\u00a0<span>Let us see how we can create a reply with one-time-notification.<\/span><\/p>\n<p><span><\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p><span>From the dock menu, <strong>drag<\/strong> the <strong>OTN<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p><span>To add data to the <strong>OTN<\/strong> component, click twice on the body of the <strong>OTN<\/strong> component. It will open a sidebar on your right. <strong>Fill in<\/strong> the fields that you need.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p><span>If you want to show the typing state on the bot or delay in replying, then you can use those fields.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/6.Flow-Builder-OTN-Component.png&#8221; title_text=&#8221;6.Flow Builder &#8211; OTN Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"button_component\">Button Component<\/h3>\n<p>[\/et_pb_text][et_pb_divider color=&#8221;rgba(255,201,41,0.38)&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"button_introduction\"><span>Introduction<\/span><\/h4>\n<p><span>The Button component will allow you to reply with a button. It has only <strong>1 input<\/strong> and <strong>1 output<\/strong>.<\/span><\/p>\n<ul>\n<li><span>Input: <strong>Reply<\/strong><\/span><\/li>\n<li><span>Output: <strong>Next<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.-Flow-Builder-Button-Component.png&#8221; title_text=&#8221;1. Flow Builder &#8211; Button Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221; locked=&#8221;off&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 921px; border-color: #ffffff;\">\n<tbody>\n<tr>\n<td width=\"601\" style=\"width: 921px;\">\n<p><span style=\"color: #ff0000;\"><strong>Note: Button Type Clarification<\/strong><\/span><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 921px; height: 95px;\">If the button type is something other than <strong>New Postback<\/strong>, then you can NOT connect this <strong>Button<\/strong> component to other components via its <strong>Next<\/strong> output socket. Because it only allows the <strong>New Postback<\/strong> component to be connected. See the connections section.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.1.-Flow-Builder-Button-Component.png&#8221; title_text=&#8221;1.1. Flow Builder &#8211; Button Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"button_connections\">Connections<\/h4>\n<p><span>The <strong>Reply<\/strong> may get connection from one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>Text<\/span><\/strong><span>, <strong>Carousel Single<\/strong>, <strong>Generic Template<\/strong>, and <strong>Facebook Media Button<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.Flow-Builder-Button-Component.png&#8221; title_text=&#8221;2.Flow Builder &#8211; Button Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong><span>Next<\/span><\/strong><span> may be connected to one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>User Input Flow<\/span><\/strong><span> and <strong>New Postback<\/strong>.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3.Flow-Builder-Button-Component.png&#8221; title_text=&#8221;3.Flow Builder &#8211; Button Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Features&#8221; _builder_version=&#8221;4.8.1&#8243; background_color=&#8221;#F4F4F4&#8243; custom_padding=&#8221;50px|0|50px|0px|false|false&#8221; locked=&#8221;off&#8221;][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_button_component\"><span>How to create a Button component<\/span><\/h4>\n<p><span>Let us see how we can create a reply with the help of the button component.<\/span><\/p>\n<p><span><\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p><span>From the dock menu, <strong>drag<\/strong> the <strong>Button<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p><span>To add data to the <strong>Button<\/strong> component, click twice on the body of the <strong>Button<\/strong> component. It will open a sidebar on your right. Fill in the fields that you need.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Delay in Reply<\/strong><\/span><\/p>\n<p><span>If you want to show the typing state on the bot or delay in replying, then you can use those fields.<\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4.Flow-Builder-Button-Component.png&#8221; title_text=&#8221;4.Flow Builder &#8211; Button Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.8.2&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.0&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<h3 id=\"quick_reply_component\">Quick Reply Component<\/h3>\n<p>[\/et_pb_text][et_pb_divider color=&#8221;#006AFF&#8221; divider_position=&#8221;center&#8221; divider_weight=&#8221;4px&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"quick_reply_introduction\"><span>Introduction<\/span><\/h4>\n<p><span>The Quick Reply component will allow you to reply quickly creating a <strong>New Postback<\/strong>, using an existing <strong>Postback<\/strong>, using your Facebook page&#8217;s <strong>Phone<\/strong> number or <strong>Email<\/strong> address. It has only <strong>1 input<\/strong> socket and <strong>1 output<\/strong> socket.<\/span><\/p>\n<ul>\n<li><span>Input: <strong>Reply<\/strong><\/span><\/li>\n<li><span>Output: <strong>NewPostback<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/1.-Flow-Builder-Quick-Reply-Component.png&#8221; title_text=&#8221;1. Flow Builder &#8211; Quick Reply Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221; locked=&#8221;off&#8221;]<\/p>\n<table width=\"926\" height=\"182\" style=\"height: 131px; width: 921px; border-color: #ffffff;\">\n<tbody>\n<tr>\n<td width=\"601\" style=\"width: 921px;\"><span style=\"color: #ff0000;\"><strong>Note: Quick Reply Type Clarification<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"height: 95px;\">\n<td style=\"width: 921px; height: 95px;\">If your quick-reply type is something other than <strong>New Postback<\/strong>, then you can NOT connect this <strong>Quick Reply<\/strong> component to other components via its <strong>New Postback<\/strong> output socket. Because it only allows the <strong>New Postback<\/strong> component to be connected. See the connections section.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/2.-Flow-Builder-Quick-Reply-Component.png&#8221; title_text=&#8221;2. Flow Builder &#8211; Quick Reply Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"quick_reply_connections\">Connections<\/h4>\n<p><span>The <strong>Reply<\/strong> may get connection from one of the following components:<\/span><\/p>\n<ul>\n<li><strong><span>Text<\/span><\/strong><span>, <strong>Carousel<\/strong>, <strong>Facebook Media Button<\/strong>, <strong>Image<\/strong>, <strong>Video<\/strong>, <strong>Audio<\/strong>, <strong>File<\/strong>, <strong>Ecommerce<\/strong>, and <strong>Generic Template<\/strong>,<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/3.Flow-Builder-Quick-Reply-Component.png&#8221; title_text=&#8221;3.Flow Builder &#8211; Quick Reply Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<p><strong><span>Next<\/span><\/strong><span> may be connected to the following components:<\/span><\/p>\n<ul>\n<li><strong><span>New Postback<\/span><\/strong><span>.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/4.Flow-Builder-Quick-Reply-Component.png&#8221; title_text=&#8221;4.Flow Builder &#8211; Quick Reply Component&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;10px||||false|false&#8221;]<\/p>\n<h4 id=\"create_quick_reply_component\"><span>How to create a Quick Reply component<\/span><\/h4>\n<p><span>Let us see how we can create a quick reply.<\/span><\/p>\n<p><span><\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Dragging and Dropping<\/strong><\/span><\/p>\n<p><span>From the dock menu, <strong>drag<\/strong> the <strong>Quick Reply<\/strong> component and <strong>drop<\/strong> it on the editor at any place.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Adding Data<\/strong><\/span><\/p>\n<p><span>To add data to the <strong>Quick Reply<\/strong> component, click twice on the body of the <strong>Quick Reply<\/strong> component. It will open a sidebar on your right. Fill in the fields that you need.<\/span>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/messengerbot.app\/wp-content\/uploads\/2021\/04\/5.Flow-Builder-Quick-Reply-Component.png&#8221; title_text=&#8221;5.Flow Builder &#8211; Quick Reply Component&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.9.3&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#000000&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<input type=\"hidden\" value=\"\" data-essbisPostContainer=\"\" data-essbisPostUrl=\"https:\/\/messengerbot.app\/hi\/messenger-bot-visual-flow-builder\/\" data-essbisPostTitle=\"Messenger Bot &#8211; Visual Flow Builder\" data-essbisHoverContainer=\"\"><p>Table of Contents: Visual Flow Builder INTRODUCTION: Getting Started is Easy! Get Started Trigger Component Introduction Connections How to create a Trigger component New Postback Component Introduction Connections How to create a New Post component Text Component Introduction Connections How to create a Text component Image Component Introduction Connections How to create an Image component Generic Template Component Introduction Connections How to create an Image component Carousel Component Introduction Connections How to create an Image component Carousel Single Component Introduction Connections How to create an Image component Audio Component Introduction Connections How to create an Audio component Video Component Introduction Connections How to create a Video component File Component Introduction Connections How to create a File component Facebook Media Component Introduction Connections How to create a Facebook Media component Ecommerce Component Introduction Connections How to create an Ecommerce component User Input Flow Component Introduction Connections How to create a User Input Flow component OTN Component Introduction Connections How to create an OTN component Button Component Introduction Connections How to create a Button component Quick Reply Component Introduction Connections How to create a Quick Reply Component Visual Flow BuilderINTRODUCTION: Getting Started is Easy! Welcome to Messenger Bots Flow Builder. This documentation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":236410,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":"","rank_math_title":"Messenger Bot - Visual Flow Builder","rank_math_description":"This is the beginning of the new Visual Flow Builder of Messenger Bot. From the Dashboard and how to create your New Flow Builder and...","rank_math_focus_keyword":"Visual Flow Builder","rank_math_canonical_url":"","rank_math_robots":"noindex","rank_math_facebook_title":"","rank_math_facebook_description":"","rank_math_twitter_title":"","rank_math_twitter_description":""},"categories":[30,37],"tags":[],"class_list":["post-235358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-facebook"],"_links":{"self":[{"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/posts\/235358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/comments?post=235358"}],"version-history":[{"count":88,"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/posts\/235358\/revisions"}],"predecessor-version":[{"id":237540,"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/posts\/235358\/revisions\/237540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/media\/236410"}],"wp:attachment":[{"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/media?parent=235358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/categories?post=235358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/messengerbot.app\/hi\/wp-json\/wp\/v2\/tags?post=235358"}],"curies":[{"name":"\u0921\u092c\u094d\u0932\u094d\u092f\u0942\u092a\u0940","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}