Building a Sign Up Flow

This guide walks you through the steps of creating a Sign In Mini App. This flow allows existing customers to identify themselves (e.g., to check their order history).

1. Create a New Mini App

Start by selecting the Sign In category.

Start by selecting the Sign In category.

  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.

Click the + New Mini App button.

  1. In the popup window, configure the basics:

  • Name: Enter a name (e.g., “Customer Login” or “Check Point”).

  • Categories: Select Sign In.

  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.

  1. Configure the Screen:

  • Screen Title: Give it a name (e.g., “login_page”).

  • Layout Type: Select Single Column Layout.

  1. Click Add.

3. Build Content with Blocks

Now, design the form. Since this is a “Sign In” flow, you typically only need one identifier (like a Phone Number).

Now, design the form. Since this is a "Sign In" flow, you typically only need one identifier (like a Phone Number).

  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: “Welcome Back!”

3. 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., “Registered Phone Number”).

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

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

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

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., “Login”).

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]