Building a Sign Up Flow

This guide walks you through the steps of creating a Sign Up Mini App. This allows new customers to register their data directly within WhatsApp without visiting an external website.

1. Create a New Mini App

Start by defining the purpose of your Mini App.

Start by defining the purpose of your Mini App.

  1. Navigate to Sales Channel > WhatsApp and select the Mini Apps tab.

Navigate to Sales Channel > WhatsApp and select the Mini Apps tab.

  1. Click the + New Mini App button.

2. Click the + New Mini App button.

  1. In the popup window, configure the basics:

  • Name: Enter a unique name for your app (e.g., “New Customer Signup”).

  • Categories: Select Sign Up.

  1. Click Create.

2. Add Screens & Layouts

Once created, you need to define the page (Screen) your customer will see.

Once created, you need to define the page (Screen) your customer will see.

  1. Find your new app in the list, click the three dots icon •••, and select Edit.

Find your new app in the list, click the three dots icon •••, and select Edit.

  1. To add a page, click + Add New Screen on the left sidebar.

2. To add a page, click + Add New Screen on the left sidebar.

3. Configure the Screen:

  • Screen Title: Give this screen a unique name (e.g., “sign_up_page”).

  • Layout Type: Select Single Column Layout.

  1. Click Add.

3. Build Content with Blocks

Now, design the content customers will interact with.

Now, design the content customers will interact with.

  1. Under the “Screen Blocks” section, click + Add Block.

  2. Add an Introduction (Optional):

Add an Introduction (Optional):

  • Choose the Heading or Body block.

Choose the Heading or Body block.

  • Example Text: “Hi! Please fill in your details to join us.”
  1. Add Input Fields:

3. Add Input Fields:

  • Choose the Text Input block.

Choose the Text Input block.

  • Label: Give the field a name visible to the customer (e.g., “Full Name”).

  • Data Field: [Important] Select the correct database field (e.g., select Name for the name input, Phone Number for the phone input).

  • Required: Toggle this switch ON if the field is mandatory.

Required: Toggle this switch ON if the field is mandatory.

  1. Repeat the step above to add more fields like Email or Address if needed.

Define what happens when the customer clicks the button at the bottom of the screen.

  1. Make sure you are in the Screen Settings (do not select any specific block).

Make sure you are in the Screen Settings (do not select any specific block).

Make sure you are in the Screen Settings (do not select any specific block).

  1. Scroll down to the Footer Action Type setting.

  2. Select Complete Flow.

  • This action will submit the data and close the form.
  1. Fill in your Footer Button Text (e.g., “Register Now”).

5. Publish

5. Publish

  1. Click the Publish button at the top left of the editor.

  2. Your Mini App is now live and ready for use in Interactive Messages.

[Go to Interactive Messages Settings]