Overview
Before you start engaging your customers via SMS (and MMS), you need to gain their permission to contact them on their phones. To collect phone numbers, set up a web modal that allows your shoppers to enter their phone numbers and opt-in for your SMS communications.
Set up a Web Modal for SMS Opt-in
You can either add a phone number field to an existing form in a web modal or create a brand new modal and form for phone number collection.
In the example below, you'll see how to set up a Zaius web modal for phone number collection from scratch.
Step 1: Create a New Web Modal
Create a new web campaign and add a web modal as your first touchpoint.
Under Targets, define which website visitors will see your web modal.
Step 2: Set up Opt-in Form
Design the layout of your web modal. You’ll need to have the following elements from under the Forms section for data collection to work:
- Two text boxes: One for email, the other for phone number collection
- Checkbox
- Submit button
Step 3: Configure Opt-in Fields
Email Address Field
Switch to the Details tab. Under Text Box Actions, select Email as the Field. This will automatically make the field required.
Phone Number Field with Country Code Selector
For the second text box, select Phone as the Field. When you assign a field to collect phone numbers, you will see additional options under Text Box Actions. By default, Show Country Code and Enable Country Code Selection are enabled, and the United States is selected as the Default Country Code. We recommend you leave the country code selector enabled because it helps your visitors tremendously with proper phone number formatting and eliminates confusion.
Finally, make sure the field is Required.
Checkbox
Edit and style the label by the checkbox. Under Details, pick Opt-in as the Action for the checkbox and make it required. This will ensure that your visitors are properly opted-in to receive email and SMS communications from you.
Submit Button
Under Details, select Confirmation Design as the follow-up action to your button, so you’re not interrupting your visitor’s journey on your site.
Step 4: Preview Web Modal
To preview your web modal, open up the Triggers section and check the box for Display immediately when the page loads.
Now, click the Preview button, then enter the webpage URL where you’d like to see the web modal. Click Generate Preview.
Step 5: Create a Confirmation Message
As a best practice, you should also create an SMS campaign that will send a confirmation message to your new SMS subscribers. We recommend that you launch this campaign before you make you web modal live.