Collect SMS subscribers using a web modal (Legacy)

  • Updated

Before you start engaging with your customers through SMS (and MMS), they need to give you permission to contact them on their phones. Set up a web modal that allows your shoppers to enter their phone numbers and opt-in for 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, we show how to set up an Optimizely Data Platform (ODP) web modal for phone number collection by creating a new modal and form. 

Step 1: Create a New Web Modal 

Create a new campaign, and add a web modal.

Create_web_embed.gif

Under Targets, choose which website visitors will see your web modal.

Screen_Shot_2020-04-02_at_1.27.19_PM.png

Step 2: Set up Opt-in Form

Design the layout of your web modal. You need the following Form elements for data collection to work:

  • Text box for email collection
  • Text box for phone number collection
  • Checkbox
  • Submit button

Form_setup.gif

Step 3: Configure Opt-in Fields

Email Address Field

Select the Details tab. For the first text box, set the Field as Email. This will automatically make the field required. 

Screen_Shot_2020-04-01_at_5.18.18_PM.png

Phone Number Field with Country Code Selector

For the second text box, select Phone as the Field. The system automatically enables Show Country Code and Enable Country Code Selection and selects the United States as the Default Country Code. We recommend leaving the country code selector enabled to help your visitors with proper phone number formatting and eliminate confusion. 

Finally, make sure the Field is Required

Screen_Shot_2020-07-20_at_11.09.47_AM.png

Checkbox

Edit and style the checkbox label. Under Details, pick Opt-in as the Action for the checkbox and make it Required to help your visitors properly opt-in for email and SMS communications. 

Screen_Shot_2020-07-20_at_11.13.10_AM.png

Submit Button

Under Details, select Confirmation Design as the follow-up Action to your button so you are not interrupting your visitor’s journey on your site.

Screen_Shot_2020-07-20_at_11.14.35_AM.png

Step 4: Preview Web Modal

To preview your web modal, check the box for Display immediately when the page loads under Triggers.

Screen_Shot_2020-03-24_at_3.50.23_PM.png

Click Preview, then enter the webpage URL where you want the web modal. Click Generate Preview

Screen_Shot_2020-07-20_at_11.17.06_AM.png

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 your web modal live.