Combined email and sms capture using iam

Does anyone do a combined email and phone number capture in Braze? I'm trying to create an experience where first screen is email capture, second screen is phone number capture, and third screen is confirmation but struggling especially because I would like the form to tell a user if the email already exists in Braze.

Find more posts tagged with

In-App Message

Content Cards

Comments

TedScott

You can do this with custom HTML/CSS/JS. We did this on the Corsair and Scuf Gaming websites (still see it on Scuf).

I would suggest email first, then SMS with a skip button. In our case, we created three versions, one with email SMS, one with Email only, and one with SMS only and targeted appropriately deleting on email/sms existing and subscription status (but check for email, you have to do custom JS and a profile call, you could also prefill email if you have it).

For best privacy compliance, don't forget to add check boxes linking to email and sms terms as well as privacy.

There are some templates here which will help you get started:
https://github.com/braze-inc/in-app-message-templates/tree/master/braze-templates

crowejustin

Thanks @TedScott -- the example on Scuf Gaming is exactly what i'm looking to do.

Any chance you would be willing to provide some pointers on the HTML/CSS/JS you used? I tried using ChatGPT but keep getting stuck on the transition from email to sms in a seamless way.

I'd really appreciate any help

TedScott

Hi,

I did not code it (front end webdev did), we started with the github templates from the link I sent you. The templates already have the form and thank you, GPT should help a bit understanding what it does. You have to add a second form (you have examples from the repo for email and sms), email -> sms -> thank you.

Best,
Ted

Manoj__

@crowejustin try if this code works for you.

https://pastecode.io/s/pvn2g8so

Divyesh

In Braze, you can design multi-step experiences that collect an email address on one screen, a phone number on the next, and then display a confirmation page. However, there are a few key points to consider:

Combined Multi-Step Forms:
• You can build in-app messages or web forms that collect different pieces of user data (email, then phone, etc.). Braze’s drag-and-drop editor for in-app messages and its Web SDK allow you to implement sequential screens.
• For each step, you’ll use the form blocks (Email Capture and Phone Capture) to gather the respective details. Note that when using form blocks, you might need to create an additional landing page for the confirmation state if you want to customize the flow.
Email Existence Check:
• Braze itself does not automatically return an error on the form if the email address you are trying to capture already exists on a user profile. Instead, Braze’s logic simply sets the email attribute on the currently active user profile.
• To notify users if the email already exists, you would need to implement that check externally. The Braze documentation recommends checking against your internal database (or any external record) that tracks user profiles. This step would typically occur when the email is submitted—first querying your external system before making the call to update the Braze user profile using methods like braze.getUser().setEmail(emailAddress).
Implementation Tips:
• If you are using the Web SDK, utilize the methods for setting both email and phone numbers. For example:
• braze.getUser().setEmail('<email_address>');
• braze.getUser().setPhoneNumber('<phone_number>');
• Develop a backend or use a client-side script to check email uniqueness against your own user records before proceeding to the phone capture screen.
• For users who capture their phone number, ensure you’re also optionally using the SMS (or WhatsApp) double opt-in feature as recommended by Braze.

For more details about capturing data with web forms and best practices for using multi-step capture flows, refer to the respective sections in the Braze documentation:
• Capturing user data through the Web SDK: https://www.braze.com/docs/developer_guide/platform_integration_guides/web_sdk/
• SMS/WhatsApp phone number capture and double opt-in features: https://www.braze.com/docs/user_guide/message_building_by_channel/sms/
• Email technical guidelines can be found here: https://www.braze.com/docs/user_guide/message_building_by_channel/email/best_practices/

In summary, while Braze supports both email and phone number capture, you will need to implement your own logic (likely via an external database/API call) to check if an email address already exists before moving forward with the phone number capture step. This enables the form to notify the user about duplicate emails.