How to Build conversational Flows with Nulu Flowboard 🤖

In this guide, we'll walk through the process of creating interactive conversation for Facebook Messenger and Instagram DMs using the Nulu Flowboard. Please follow the steps carefully to build your bot.

Getting Started with Bot Building

To begin, navigate to the dashboard of Nulu Flowboard. From there, click on the Bot Manager option located on the left sidebar.

Bot Manager

Once you access the Bot Manager, you will see the profile of your Facebook account at the top of the page. If you have multiple Facebook profiles imported, you can switch between them as needed.

Selecting a Platform

To build a bot for a Facebook page, select the radio button next to Facebook. Alternatively, to create a bot for Instagram, choose the Instagram radio button.

Visual Flow Builder Editor 🛠️

1. Initiate a New Bot Flow Click on the Create New Flow button to open the Flow Builder editor. The editor is split into two main parts:

   • Doc-menu: Contains all the components needed to build your bot.
   • Editor: Where you drag components from the Doc-menu and configure them.

2. Start Bot Flow Begin by locating the Start Bot Flow element in the Editor. Double-click on it to open the Configure Reference sidebar where you can set a title and choose labels for the bot.

3. Adding Labels You can add new labels directly from the Choose Labels field by typing the name of the label and pressing enter.

4. Trigger Keywords Drag the Trigger Keywords element from the Doc-menu to the editor. Double-click to configure it by providing comma-separated keywords that will trigger the bot. Select the matching type (Exact keyword match or String match) and finalize by clicking the Done button.

5. Adding Components without Dragging You can also add components by dragging the cursor from the output of any component and dropping it onto the editor, which will display a menu of different components to choose from.

Specific Components

• Text: To add a text component, drag and drop it onto the editor. Configure the text message, enable typing display, and set a delay for the reply.
• Image, Audio, Video, and File: For media components, upload the respective file and then connect these components within the flow.
• FB Media: To include Facebook Media, drag the FB Media component from the Doc-menu, and specify the Facebook Page media URL in the configuration.

Advanced Components

• Card and Button Components: Add a Card component by dragging it from the Doc-menu. Configure the card with an image, title, subtitle, and buttons that link to URLs or perform other actions.
• Carousel: For creating carousels, drag the Carousel component into the editor. Configure each carousel item with images, links, and text.

Action Buttons 🔘

Adding action buttons to your bot flow allows for more interactive responses and guides user interactions.

1. Adding Action Buttons

   • Drag the Action Button component from the Doc-menu to the editor area.
   • The Action Button component will instantly appear in the editor.

2. Configuring Action Buttons

   • Double-click on the Action Button component to open the configuration sidebar.
   • This sidebar, named Configure Action Button, contains a field called Action Button.
   • Click on the Action Button field to reveal a drop-down menu of various action button templates, such as:
     • Get started template
     • No match template
     • Unsubscribe template
     • Resubscribe template
     • Email quick reply template
     • Location quick reply template
     • Birthday quick reply template
     • Chat with human template
     • Chat with robot template
   • Select the appropriate action button template from the drop-down menu and click on the Done button.
   • The selected action button template will then be displayed on the Action Button component in the editor.

3. Connecting Action Buttons

   • After configuring the action button, connect this component to the Start Bot Flow component to integrate it into your overall bot flow.

Quick Replies and OTN Settings

• Quick Reply: Add quick reply components that allow users to interact quickly with predefined options like email, phone, and more.
• OTN: One-Time Notification components can be added to manage notifications and are configured with titles and specific postback settings.

Finalizing Your Bot

After setting up all components and configuring their interactions, ensure to save your bot by clicking the Save button or pressing Ctrl + S. This will store your configurations and prepare your bot for interaction.

By following these steps, you can effectively create dynamic and interactive bots using Nulu Flowboard for both Facebook Messenger and Instagram DMs. This tool simplifies the complex process of bot development, making it accessible even for those without extensive coding experience.