{"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":"messenger-bot-visual-flow-builder","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 [&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}]}}