Skip to main content

Sign Up: collect opt-ins with a WhatsApp Flow

This article walks you through building a Sign Up use case with WhatsApp Flows — a short, in-chat form that captures a customer's newsletter consent and details, then subscribes everyone who opts in to your double opt-in automatically.

By the end you'll have a working flow that:

  • Shows customers a Sign Up form inside WhatsApp.

  • Saves their answers to their contact profile in charles.

  • Subscribes everyone who opts in to your marketing opt-in.

If you're new to WhatsApp Flows in general, read WhatsApp Flows first, this article is the hands-on Sign Up example built on top of it.

Video: Full walkthrough of the steps also described below.
​

Before you start

Make sure you have:

  • A WhatsApp Business Account connected to charles, with access to WhatsApp Manager.

  • A charles Journey with a trigger based on the Keyword.

  • A custom property to store the opt-in. In this guide we use one called Subscribed. You can create it in advance under Settings → Custom properties, or create it on the spot while mapping (Step 4).

  • A marketing opt-in (for example, a Double Opt-in) already set up, so you can subscribe contacts to it in Step 5. You can create an opt-in in Audience -> Subscriptions.

Step 1: Add the WhatsApp Flow button and create the WhatsApp flow from the template

  1. In your Journey, open the Send message node where you want the Sign Up form.

  2. Add a button block to the message and give it a label (for example, "Get started!").

  3. Click Create a new flow.

  4. Choose Start from a template -> Click Sign Up template.

  5. charles copies a ready-made Sign Up JSON payload to your clipboard, click Create a new flow and it will open WhatsApp Manager so you can create the flow there.

You'll paste that copied payload in the next step, don't copy anything else in between, or you'll overwrite it.

Step 2: Create and publish the flow in WhatsApp Manager

WhatsApp Manager opens on the Create flow screen.

  1. Name your flow (for example, "Opt-in flow").

  2. Choose a category (for example, Sign up).

  3. Click Create at the bottom of the screen.

  4. On the next step, open the JSON editor, delete any existing content, and paste the payload copied in Step 1.

  5. Click Save.

  6. Click Publish.

Once published, you can preview every screen of the flow directly in WhatsApp Manager to check it looks right.

A flow must be saved and published before it appears in charles.

Step 3: Select your flow in charles

  1. Go back to your Journey in charles.

  2. Open the Send message node and click the WhatsApp Flow button you added in Step 1.

  3. Under WhatsApp Flow, select the flow you just published (for example, "Opt-in flow"). Only published flows appear in the dropdown.

Step 4: Map the flow fields to contact properties

Mapping tells charles where to store each answer on the contact.

  1. In the button's settings, click Map variables.

  2. In the Variable mapping modal, map each flow field to a contact property:

    • Name → Name

    • Email → Email

    • Opt-in → Subscribed (the custom property from Before you start)

  3. If the Subscribed property doesn't exist yet, choose Create new property… in the mapping card to make it here, or create it beforehand under Settings → Custom properties.

  4. Click Save.

The card then shows how many variables you've mapped. Use Configure to edit the mapping later, or Reset to clear it.

Step 5: Subscribe consenting contacts to your opt-in

Mapping stores the answer on the contact. To actually subscribe the people who said yes, add two nodes after your Send message node.

  1. Add a Condition node and connect it after the Send message node.

  2. In the Condition node, add a condition: Subscribed is true.

  3. Add a Manage subscribers node on the "true" branch of the condition.

  4. In that node, select your Double Opt-in to subscribe the contact to it.

Now only contacts who ticked the opt-in in the flow are subscribed.

Your Sign Up flow is now live storing the opt-in on each contact and subscribing everyone who opts in.

Don't forget to publish the charles Journey.

Optional: collect more information

The Sign Up flow above keeps things simple. If you'd like to collect more from your customers — such as product preferences or birthday — you can use one of the sample JSON payloads below as a starting point for your own flow.

Paste a sample into the WhatsApp Manager JSON editor (Step 2) instead of the default template, then customize it. Each sample collects opt-in, product interests, email, and birthday across four screens (Welcome → Interests → Details → Summary).

Sample payload — English: 

{
  "version": "7.0",
"screens": [
    {
"id": "WELCOME",
"title": "Welcome",
"data": {},
"layout": {
"type": "SingleColumnLayout",
"children": [
          {
"type": "TextHeading",
"text": "Welcome! 👋"
          },
          {
"type": "TextBody",
"text": "Sign up for our newsletter and get personalized recommendations, exclusive offers, and updates — right here in the chat."
          },
          {
"type": "Form",
"name": "optin_form",
"children": [
              {
"type": "OptIn",
"name": "newsletter_optin",
"label": "Yes, I'd like to subscribe to the newsletter",
"required": true
              },
              {
"type": "TextCaption",
"text": "_You can unsubscribe at any time by typing \"Stop\" in this chat._"
              },
              {
"type": "Footer",
"label": "Let's go",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "PREFERENCES"
                  },
"payload": {
"newsletter_optin": "${form.newsletter_optin}"
                  }
                }
              }
            ]
          }
        ]
      }
    },
    {
"id": "PREFERENCES",
"title": "Your Interests",
"data": {
"newsletter_optin": {
"type": "boolean",
"__example__": true
        }
      },
"layout": {
"type": "SingleColumnLayout",
"children": [
          {
"type": "TextHeading",
"text": "What are you interested in? 💬"
          },
          {
"type": "TextBody",
"text": "Pick your favorite product categories so we can send you relevant recommendations."
          },
          {
"type": "Form",
"name": "preferences_form",
"children": [
              {
"type": "CheckboxGroup",
"name": "categories",
"label": "Please select one or more categories",
"required": true,
"data-source": [
                  { "id": "new_arrivals", "title": "New Arrivals" },
                  { "id": "bestsellers", "title": "Bestsellers" },
                  { "id": "offers", "title": "Offers & Promotions" },
                  { "id": "tips", "title": "Tips & Inspiration" },
                  { "id": "events", "title": "Events & News" }
                ]
              },
              {
"type": "Footer",
"label": "Next",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "DETAILS"
                  },
"payload": {
"newsletter_optin": "${data.newsletter_optin}",
"categories": "${form.categories}"
                  }
                }
              }
            ]
          }
        ]
      }
    },
    {
"id": "DETAILS",
"title": "Your Details",
"data": {
"newsletter_optin": {
"type": "boolean",
"__example__": true
        },
"categories": {
"type": "array",
"items": { "type": "string" },
"__example__": ["new_arrivals", "offers"]
        }
      },
"layout": {
"type": "SingleColumnLayout",
"children": [
          {
"type": "TextHeading",
"text": "Almost done!"
          },
          {
"type": "TextBody",
"text": "So we can send you relevant offers and surprise you with a little something on your birthday, we just need two more details."
          },
          {
"type": "Form",
"name": "details_form",
"children": [
              {
"type": "TextInput",
"name": "email",
"label": "Email address",
"input-type": "email",
"required": true,
"helper-text": "For your personalized recommendations."
              },
              {
"type": "DatePicker",
"name": "birthday",
"label": "Date of birth",
"helper-text": "🎂 Optional – for a birthday surprise",
"min-date": "1900-01-01",
"max-date": "2030-12-31",
"required": false
              },
              {
"type": "Footer",
"label": "Review",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "SUMMARY"
                  },
"payload": {
"newsletter_optin": "${data.newsletter_optin}",
"categories": "${data.categories}",
"email": "${form.email}",
"birthday": "${form.birthday}"
                  }
                }
              }
            ]
          }
        ]
      }
    },
    {
"id": "SUMMARY",
"title": "Summary",
"terminal": true,
"data": {
"newsletter_optin": {
"type": "boolean",
"__example__": true
        },
"categories": {
"type": "array",
"items": { "type": "string" },
"__example__": ["new_arrivals", "offers"]
        },
"email": {
"type": "string",
"__example__": "[email protected]"
        },
"birthday": {
"type": "string",
"__example__": "1990-05-17"
        }
      },
"layout": {
"type": "SingleColumnLayout",
"children": [
          {
"type": "TextHeading",
"text": "Almost there! 🎉"
          },
          {
"type": "TextBody",
"text": "Please review your details and complete your sign-up."
          },
          {
"type": "TextSubheading",
"text": "Email address"
          },
          {
"type": "TextBody",
"text": "${data.email}"
          },
          {
"type": "TextSubheading",
"text": "Birthday"
          },
          {
"type": "TextBody",
"text": "${data.birthday}"
          },
          {
"type": "TextSubheading",
"text": "Your interests"
          },
          {
"type": "TextBody",
"text": "${data.categories}"
          },
          {
"type": "Footer",
"label": "Complete sign-up",
"on-click-action": {
"name": "complete",
"payload": {
"newsletter_optin": "${data.newsletter_optin}",
"categories": "${data.categories}",
"email": "${data.email}",
"birthday": "${data.birthday}"
              }
            }
          }
        ]
      }
    }
  ]
}

Sample payload — German: 

{
  "version": "7.0",
"screens": [
    {
"id": "WELCOME",
"title": "Willkommen",
"data": {},
"layout": {
"type": "SingleColumnLayout",
"children": [
          {
"type": "TextHeading",
"text": "Willkommen! 👋"
          },
          {
"type": "TextBody",
"text": "Melden Sie sich für unseren Newsletter an und erhalten Sie personalisierte Empfehlungen, exklusive Angebote und Neuigkeiten – direkt hier im Chat."
          },
          {
"type": "Form",
"name": "optin_form",
"children": [
              {
"type": "OptIn",
"name": "newsletter_optin",
"label": "Ja, ich möchte den Newsletter abonnieren",
"required": true
              },
              {
"type": "TextCaption",
"text": "_Sie können sich jederzeit abmelden, indem Sie \"Stop\" in diesen Chat schreiben._"
              },
              {
"type": "Footer",
"label": "Los geht's",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "PREFERENCES"
                  },
"payload": {
"newsletter_optin": "${form.newsletter_optin}"
                  }
                }
              }
            ]
          }
        ]
      }
    },
    {
"id": "PREFERENCES",
"title": "Ihre Interessen",
"data": {
"newsletter_optin": {
"type": "boolean",
"__example__": true
        }
      },
"layout": {
"type": "SingleColumnLayout",
"children": [
          {
"type": "TextHeading",
"text": "Was interessiert Sie? 💬"
          },
          {
"type": "TextBody",
"text": "Wählen Sie Ihre bevorzugten Produktkategorien, damit wir Ihnen passende Empfehlungen senden können."
          },
          {
"type": "Form",
"name": "preferences_form",
"children": [
              {
"type": "CheckboxGroup",
"name": "categories",
"label": "Bitte wählen Sie eine oder mehrere Kategorien",
"required": true,
"data-source": [
                  { "id": "neuheiten", "title": "Neuheiten" },
                  { "id": "bestseller", "title": "Bestseller" },
                  { "id": "angebote", "title": "Angebote & Aktionen" },
                  { "id": "tipps", "title": "Tipps & Inspiration" },
                  { "id": "events", "title": "Events & Neuigkeiten" }
                ]
              },
              {
"type": "Footer",
"label": "Weiter",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "DETAILS"
                  },
"payload": {
"newsletter_optin": "${data.newsletter_optin}",
"categories": "${form.categories}"
                  }
                }
              }
            ]
          }
        ]
      }
    },
    {
"id": "DETAILS",
"title": "Ihre Angaben",
"data": {
"newsletter_optin": {
"type": "boolean",
"__example__": true
        },
"categories": {
"type": "array",
"items": { "type": "string" },
"__example__": ["neuheiten", "angebote"]
        }
      },
"layout": {
"type": "SingleColumnLayout",
"children": [
          {
"type": "TextHeading",
"text": "Fast geschafft!"
          },
          {
"type": "TextBody",
"text": "Damit wir Ihnen relevante Angebote senden und Ihnen an Ihrem Geburtstag eine kleine Überraschung schicken können, brauchen wir noch zwei Angaben."
          },
          {
"type": "Form",
"name": "details_form",
"children": [
              {
"type": "TextInput",
"name": "email",
"label": "E-Mail-Adresse",
"input-type": "email",
"required": true,
"helper-text": "Für Ihre personalisierten Empfehlungen."
              },
              {
"type": "DatePicker",
"name": "birthday",
"label": "Geburtsdatum",
"helper-text": "🎂 Optional – für eine Geburtstagsüberraschung",
"min-date": "1900-01-01",
"max-date": "2030-12-31",
"required": false
              },
              {
"type": "Footer",
"label": "Weiter zur Übersicht",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "SUMMARY"
                  },
"payload": {
"newsletter_optin": "${data.newsletter_optin}",
"categories": "${data.categories}",
"email": "${form.email}",
"birthday": "${form.birthday}"
                  }
                }
              }
            ]
          }
        ]
      }
    },
    {
"id": "SUMMARY",
"title": "Übersicht",
"terminal": true,
"data": {
"newsletter_optin": {
"type": "boolean",
"__example__": true
        },
"categories": {
"type": "array",
"items": { "type": "string" },
"__example__": ["neuheiten", "angebote"]
        },
"email": {
"type": "string",
"__example__": "[email protected]"
        },
"birthday": {
"type": "string",
"__example__": "1990-05-17"
        }
      },
"layout": {
"type": "SingleColumnLayout",
"children": [
          {
"type": "TextHeading",
"text": "Fast geschafft! 🎉"
          },
          {
"type": "TextBody",
"text": "Bitte prüfen Sie Ihre Angaben und schließen Sie Ihre Anmeldung ab."
          },
          {
"type": "TextSubheading",
"text": "E-Mail-Adresse"
          },
          {
"type": "TextBody",
"text": "${data.email}"
          },
          {
"type": "TextSubheading",
"text": "Geburtstag"
          },
          {
"type": "TextBody",
"text": "${data.birthday}"
          },
          {
"type": "TextSubheading",
"text": "Ihre Interessen"
          },
          {
"type": "TextBody",
"text": "${data.categories}"
          },
          {
"type": "Footer",
"label": "Anmeldung abschließen",
"on-click-action": {
"name": "complete",
"payload": {
"newsletter_optin": "${data.newsletter_optin}",
"categories": "${data.categories}",
"email": "${data.email}",
"birthday": "${data.birthday}"
              }
            }
          }
        ]
      }
    }
  ]
}

After publishing a WhatsApp flow in the WhatsApp Manager Account and placing it in the charles Journey, map the extra fields in Step 4 the same way you mapped the others:

Field in the sample

Type

Suggested charles property

newsletter_optin

Opt-in (Yes/No)

Subscribed (checkbox)

categories

Multi-select

Interests (multi-select — stores all chosen options)

email

Email

Email

birthday

Date

Birthday (date)

Recap

  1. Add a WhatsApp Flow button → Create a new flow → Start from a template (payload copied to clipboard).

  2. In WhatsApp Manager: name, category, Create → paste payload → Save → Publish.

  3. In charles: select your published flow on the button.

  4. Map variables: Name → Name, Email → Email, Opt-in → Subscribed.

  5. Add a Condition node (Subscribed is true) → Manage subscribers → Double Opt-in.

To collect more than the basics, start from one of the sample payloads and map the extra fields the same way.

Related articles

Related Articles
Did this answer your question?