How to Import FB Account & Create a Flow with Visual Flow Builder

Visual Flow Builder will provide you an overall view of the whole interaction process of building your own bot. In other words, it is a graphical editor where you can control all of the messages, actions, and interactions among them. The whole process accomplishes building a bot on the single graphical editor, without moving to and fro. Visual Flow Builder is easy to use and build, it will serve the Get Started in your Facebook Page and will collect Leads for you.

After you create your Visual Flow Builder, using its components. You will realize that the process is just repeating itself. But before everything else, let’s start with importing your Facebook Account.

Import Account

To make Messenger Bot application function, you need to import your account to it. You can import your Facebook account by selecting the Import Account option from the side navigation bar.

  1. Select the Import Account option from the navigation sidebar. A screen containing Login with Facebook will appear. How to Import FB Account & Create a Flow with Visual Flow Builder 1
  2. Select Login in with Facebook.
  3. Continue with your Facebook user profile.How to Import FB Account & Create a Flow with Visual Flow Builder 2

Allow all the things that you need then click “OK”.

How to Import FB Account & Create a Flow with Visual Flow Builder 3

Note:
  • If you are not logged in, then you need to login to your Facebook account to continue.

How to Import FB Account & Create a Flow with Visual Flow Builder 4

  1. Once logged in, a list of pages will appear that are associated with your imported Facebook account. Select the pages you want to import by clicking on the square checkboxes next to the names of available pages. Select Next.
How to Import FB Account & Create a Flow with Visual Flow Builder 5
  1. Turn on the slider button against the options you want to allow the Messenger Bot Application to perform actions to. The options include, receive your email address, manage your pages, and other management-related permissions.
Note:
  • To make Messenger Bot application perform in the most adequate way, allow all management permissions.

 

  1. Once given the application all permissions, select Done
How to Import FB Account & Create a Flow with Visual Flow Builder 6

Your existing Facebook account will be imported to Messenger Bot along with different rights of accessibility and integrations.

How to Import FB Account & Create a Flow with Visual Flow Builder 7

Login with Facebook

As mentioned in Accessing Messenger Bot section, one way to access the Messenger Bot application is to login with your Facebook account.

How to Import FB Account & Create a Flow with Visual Flow Builder 8

Switch accounts

Once logged in with Facebook, you can manage multiple accounts as well. Select your account profile from the top right of the screen. A dropdown menu will appear containing multiple accounts that are logged in already. You can select any of your accounts based on your requirements and manage the bot settings.

How to Import FB Account & Create a Flow with Visual Flow Builder 9

Enable Messenger Bot

Once the account is imported, you need to enable the Messenger Bot application.

  • Select the How to Import FB Account & Create a Flow with Visual Flow Builder 10 icon next to the page name.
  • A dialogue box will appear, then select OK to proceed.
How to Import FB Account & Create a Flow with Visual Flow Builder 11

Bot connection will now be enabled.

Disable bot connection

To disable the bot connection, you need to select How to Import FB Account & Create a Flow with Visual Flow Builder 12 icon next to the name of your Facebook page.

How to Import FB Account & Create a Flow with Visual Flow Builder 13

Bot connection will now be disabled.

Delete bot connection

You can delete all bot connections and reset the settings once again by selecting the How to Import FB Account & Create a Flow with Visual Flow Builder 14 icon next to the name of your Facebook page.

How to Import FB Account & Create a Flow with Visual Flow Builder 15

Delete Facebook Page

You can delete your page from the database by selecting How to Import FB Account & Create a Flow with Visual Flow Builder 16 icon against the page name in the page list.

How to Import FB Account & Create a Flow with Visual Flow Builder 17
Note:  
  • To delete any page you need to enable the delete button you need to disable the bot connection by selecting How to Import FB Account & Create a Flow with Visual Flow Builder 12 icon.

Delete Facebook account

To delete the Facebook account, select the How to Import FB Account & Create a Flow with Visual Flow Builder 19 icon, next to the account’s user name. Deleting the user account will also remove the pages associated with that account.

How to Import FB Account & Create a Flow with Visual Flow Builder 20
Note:
  • Once deleted, you can still import your account once again and reconfigure it.

Messenger Bot Integration from Facebook

To integrate the Facebook account and manage Messenger Bot permissions from the Facebook platform, follow the steps given below:

  1. Log into Facebook and click How to Import FB Account & Create a Flow with Visual Flow Builder 21 in the top right of Facebook.
  2. Click Settings.
How to Import FB Account & Create a Flow with Visual Flow Builder 22
  1. Click Apps and Websites on the left.
  2. Click Business Integrations on the left side.
How to Import FB Account & Create a Flow with Visual Flow Builder 23
  1. Filter between Active or Removed at the top, or search for Messenger Bot business integration using the search bar to the right.
How to Import FB Account & Create a Flow with Visual Flow Builder 24
  1. Click View and Edit next to the Messenger Bot business integration to control the info it has access to.
How to Import FB Account & Create a Flow with Visual Flow Builder 25
  1. Adjust your settings by checking or unchecking the boxes next to your information or using the dropdown menus, and then click Save.
How to Import FB Account & Create a Flow with Visual Flow Builder 26

Remove Messenger Bot integration

To remove Messenger Bot integration, select Messenger Bot then click Remove > Remove.

If a business integration is:

  • Active: You’ve connected Messenger Bot integration to your account. Messenger Bot can manage your ads, Pages, groups, events, messages, or other business info.

How to Import FB Account & Create a Flow with Visual Flow Builder 27

  • Removed: You’ve disconnected Messenger Bot integration from your account. It can no longer manage your ads, Pages, groups, events, messages, or other business info. It’ll also no longer be able to request private info about you, but it may have the info you’ve previously shared.

How to Import FB Account & Create a Flow with Visual Flow Builder 28

Now let’s start creating flow.

Create a flow

Click on the Visual Flow Builder menu in your dashboard on your left. Click, the Create new flow button and select the Facebook Page you want to create the visual flow. Now, click on the Ok button. It will then take you to the visual flow builder interface. It also has the buttons for I need help and cancel.

How to Import FB Account & Create a Flow with Visual Flow Builder 29
How to Import FB Account & Create a Flow with Visual Flow Builder 30

Now, click on the Ok button. It will then take you to the visual flow builder interface. It also has the buttons for I need help and cancel.

How to Import FB Account & Create a Flow with Visual Flow Builder 31

Now, you can see the dock menu, you can drag any component and drop it on the editor screen at any place you like.

How to Import FB Account & Create a Flow with Visual Flow Builder 32

You can also minimize and maximize your Dock Menu, then right-click for your Context Menu.

How to Import FB Account & Create a Flow with Visual Flow Builder 33

First, you need to name your Start Bot Flow. This is the name of your Visual Flow Builder.

How to Import FB Account & Create a Flow with Visual Flow Builder 34

You also need to set up your Trigger Component and write down the keywords for which the bot will trigger. The trigger keyword should be at least inlined,

How to Import FB Account & Create a Flow with Visual Flow Builder 35

with your Facebook Page description so that it’s easy for the subscriber to message you, each keyword should be separated with a comma.

How to Import FB Account & Create a Flow with Visual Flow Builder 36

This is the sample flow of the TRIGGER. It also serves as your Get-Started, if you did not use Action Button or if the subscriber wants to start from the Start. Just key in the keyword to go back from the beginning.

How to Import FB Account & Create a Flow with Visual Flow Builder 37

Add the component of the Action Button for your Get Started button on your Facebook Page.

How to Import FB Account & Create a Flow with Visual Flow Builder 38

Choose your Action Template. You have many actions to choose on what actions you will perform. Such as Get Started, No Match, Un-subscribe, Re-subscribe, Email Quick Reply, Phone Quick Reply, Location Quick Reply, Birthday Quick Reply, Chat with Human and Chat with Robot template. 

How to Import FB Account & Create a Flow with Visual Flow Builder 39

This is the actual Action Button on your Facebook Page Messenger.

How to Import FB Account & Create a Flow with Visual Flow Builder 40

Add Image component for your welcome banner or for your Page logo.

How to Import FB Account & Create a Flow with Visual Flow Builder 41

This is the IMAGE component example in your Facebook Page Messenger.

How to Import FB Account & Create a Flow with Visual Flow Builder 42

Then, add your TEXT component for your Facebook Page details or any information you wanted to share with your subscriber. You can create more than 1 TEXT reply.

How to Import FB Account & Create a Flow with Visual Flow Builder 43

TEXT Reply can be created as more than 1 and can be created as the NEXT reply. It can be TEXT to TEXT reply.

How to Import FB Account & Create a Flow with Visual Flow Builder 44

Add a Button for the next step of your option or selection. The button component will allow you to reply with a Button. Then, click your Button Type to choose what postback you wanted to perform. In every button, you can only create three types of button choices. 

How to Import FB Account & Create a Flow with Visual Flow Builder 45

If you choose the New Postback, you can copy or name it as your BUTTON’s Title. You can also select your label and sequence in this component.

How to Import FB Account & Create a Flow with Visual Flow Builder 46

In your Button component, you can also select the Postback, if you want to post back the content or form from other content you already created or use.

How to Import FB Account & Create a Flow with Visual Flow Builder 47

These are the 3 buttons in 1 input.

How to Import FB Account & Create a Flow with Visual Flow Builder 48

This is how BUTTONS appear in your Facebook Page Messenger.

How to Import FB Account & Create a Flow with Visual Flow Builder 49

You can also Add User-Input-Flow, to collect important details from your subscriber. It connected from any inputs, such as TEXT, IMAGE, GENERIC TEMPLATE, CAROUSEL, AUDIO, VIDEO, FILE, FACEBOOK MEDIA, ECOMMERCE, and NEW POSTBACK.

What is User Input Flow?

With this flow, you can ask a single or series of questions from users inside Messenger. Once users give any answer, the next question will be sent if there is any. These answers will be saved in the database. 

How to make your User Input Flow?

Now, go to Messenger Bot. Select User Input Flow & Custom Field and click on Actions then Click on User input flow campaign.

How to Import FB Account & Create a Flow with Visual Flow Builder 50
How to Import FB Account & Create a Flow with Visual Flow Builder 51

When you click on the User input flow campaign, the Flow Campaign list interface will appear. At the top left corner, you can see a button named New Flow, Click on this button to create a new User Input Flow.

How to Import FB Account & Create a Flow with Visual Flow Builder 52

An interface to create a new user input flow will appear. Give the campaign a name and choose the Facebook page for which you want to create the User Input Flow. We can select 2 types of user input flow, one is Free keyboard input, and the other one is Multiple choice. 

How to Import FB Account & Create a Flow with Visual Flow Builder 53

You can find these options on the right side of the interface. Under Free Keyboard input we have Email, Phone, Text, Number, URL, File, Image, Video, Date, Time, and Datetime. Just drag and drop them to the User input flow start and create your desired questions to collect. You can add as many questions as you want.

How to Import FB Account & Create a Flow with Visual Flow Builder 54

Finally, select a final reply template when you are done with questions. You can create a new Final reply template by clicking on the Add button.

How to Import FB Account & Create a Flow with Visual Flow Builder 55

Provide your Template Name, choose labels, and sequence campaigns.

How to Import FB Account & Create a Flow with Visual Flow Builder 56

Select your Reply Type. Such as Text, Image, Video, File, Quick Reply, Text with Buttons, Generic Template, Carousel, Media, One Time Notification, User Input Flow, and Ecommerce. 

How to Import FB Account & Create a Flow with Visual Flow Builder 57

And provide your reply message. You can also Add more replies if you want. Click, Submit to save your Postback Reply.

How to Import FB Account & Create a Flow with Visual Flow Builder 58

Your template has been created successfully and click OK.

How to Import FB Account & Create a Flow with Visual Flow Builder 59

When you are done with all the questions for your flow, click on the Submit button to save your campaign.

How to Import FB Account & Create a Flow with Visual Flow Builder 60

After creating your User Input Flow. You can now Select your Flow Campaign.

How to Import FB Account & Create a Flow with Visual Flow Builder 61

This is how the User Input Flow looks like in your Facebook Page Messenger.

How to Import FB Account & Create a Flow with Visual Flow Builder 62

The Select DateTime of Free keyword Input in Create User Input Flow.

How to Import FB Account & Create a Flow with Visual Flow Builder 63

The Multiple Choice of Free Keyboard Input combines with TEXT or NUMBER.

How to Import FB Account & Create a Flow with Visual Flow Builder 64
How to Import FB Account & Create a Flow with Visual Flow Builder 65

This is the TEXT-free keyboard input, just key in the answer.

How to Import FB Account & Create a Flow with Visual Flow Builder 66

This is the Email of free keyboard input, either you will key in or it can be attached as a quick reply.

How to Import FB Account & Create a Flow with Visual Flow Builder 67

This is how you set up the attached email as a quick reply. Just check the box for automatic attachment.

How to Import FB Account & Create a Flow with Visual Flow Builder 68

Same as the email-free keyboard input. The Phone with free keyboard input can also be attached as a quick reply.

How to Import FB Account & Create a Flow with Visual Flow Builder 69

Another example of TEXT-free keyboard input, you just need to key in your answer.

How to Import FB Account & Create a Flow with Visual Flow Builder 70

This is the summary of the booking system using the User Input Flow, you can use the variables of each FREE Keyboard Input. It also a way of collecting a Lead.

How to Import FB Account & Create a Flow with Visual Flow Builder 71

In Generic Template, you upload the image and image link destination, then provide the Title and Sub-Title.

How to Import FB Account & Create a Flow with Visual Flow Builder 72

The Quick Reply component, is the same as the Button component. You will choose between New Postback, Postback, Phone, or Email, as your Quick reply type.

How to Import FB Account & Create a Flow with Visual Flow Builder 73

Quick reply using the New Postback.

How to Import FB Account & Create a Flow with Visual Flow Builder 74

Quick reply using the New Postback.

How to Import FB Account & Create a Flow with Visual Flow Builder 75

The Carousel component will allow you to reply with a carousel. It will help you attach or connect items with images and information using the Carousel Single. In 1 carousel you can have 10 Carousel Single Item connections. 

How to Import FB Account & Create a Flow with Visual Flow Builder 76

This is the Carousel Single Item, provide the image, image link, Title, and Subtitle.

How to Import FB Account & Create a Flow with Visual Flow Builder 77

This is the Carousel Single Item. You can make 10 on it in 1 Carousel.

How to Import FB Account & Create a Flow with Visual Flow Builder 78

This is the example of the Carousel in your Messenger.

How to Import FB Account & Create a Flow with Visual Flow Builder 79

This is the unarranged Visual Flow in Editor Screen.

How to Import FB Account & Create a Flow with Visual Flow Builder 80

This would be the view of your editor screen after you click the re-arrange button. A nice and organized flow.

How to Import FB Account & Create a Flow with Visual Flow Builder 81

Click Save. To save your Visual Flow template.

How to Import FB Account & Create a Flow with Visual Flow Builder 82

This is your Visual Flow Builder Screen. It contains all your Flow List. You can also Import templates if you want. Just click Import template.

How to Import FB Account & Create a Flow with Visual Flow Builder 83

In importing a template you need to give the Flow Name, Select a Facebook Page, and Upload Template. Then, click Create a template.

How to Import FB Account & Create a Flow with Visual Flow Builder 84

You can Edit your Template if you want to add more flow components. Or you can delete the entire template. You can also Export your Flow as a Template and can share it with your connection.

How to Import FB Account & Create a Flow with Visual Flow Builder 85

We also have featured templates that you can use. As your reference on building your own Flow. You can enhance the template and add images of your own product.

How to Import FB Account & Create a Flow with Visual Flow Builder 86

Visual Flow Builder is a Repeated process when using its components in building your flow. It will serve as your Get-Started flow in your Facebook Page Messenger. Always remember, that Each Component in Virtual Flow Builder needs to be connected to the right component to make your flow working. 

Now, you know how to make your Visual Flow Builder. Don’t forget to visit our link to sign up for the Messenger Bot Application.

Related Articles

The Facebook Ad Sizes and Specifications You Need to Know

The Facebook Ad Sizes and Specifications You Need to Know

It's not just about the copy, although that is important. The design of your Facebook ad also matters a lot. One thing you need to consider when designing your ads is the different sizes available on Facebook. Each size has its own specifications, and you need to know...

read more