Modal (Pop-Up)

A modal (pop-up) is the primary method to opt-in customers to build a robust list of subscribers. It sits right underneath the acquisition layer of your funnel. Hence it is a big part of converting mobile visitors into subscribers & customers.

There are 2 primary ways to set up your first modal:


  1. Request a fully custom, on-brand modal design from Voyage (typical turnaround time: 3-7 days).
  2. Use your own custom-designed modal including starting with our baseline HTML template for full, floating, or bottom type mobile modals.
  3. Build your own mobile modal with Voyage’s embedded button code (see Embeddable button opt-in for implementation instructions).
  4. Build your own desktop modal with Voyage’s custom keyed entry (see Custom keyed entry for implementation instructions).

Setting up your Voyage modal

Note: if using a Voyage-developed modal, typically your Voyage account manager will take care of full list building campaign setup on your dashboard; however you will still need to complete steps in the Installing the Voyage Global Tag section for the modal to display correctly. Also, if using option 3 or 4 above, note that control settings and modal statistics including Impressions and Clicks will not be adjustable/displayed inside the Voyage app.

  1. Ensure you have followed all steps to install the Voyage Global Tag in the header of your website.
  2. Navigate to the List building tab on the right main sidebar.
  3. On the main List building overview page, click + New List Building Campaign
  4. Select ‘Modal’ as campaign type and give your campaign a name (e.g., 20% Off - Floating Modal).
  5. Choose your ‘Modal Type’.
    1. Note:  the specific type for mobile modals only matters if you want to download our starting HTML template and modify the HTML/CSS.
  6. ‘Download Source HTML’ to modify the base HTML template or ‘Upload Edited HTML’ including a Voyage developed one.
  7. Update specific ‘Modal’ settings, if desired including time delayed before showing, hiding for x days, the page view the modal is shown on, how many seconds the modal auto-closes on, and showing the modal to y% of visitors. Our recommend values are set by default.
  8. Update ‘Allowlist / Blocklist’ on the same settings page to show or hide the modal on specific pages on your website. Learn more about the setting here.
  9. Edit the Opt-in Flow as desired for this list building campaign as shown below. You can edit the Opt-in Message (the first message the consumer sends when opting-in for SMS), Enrollment Confirmation Request, Enrollment Confirmation Message, Welcome Message, and Offer Link. Defaults will be populated according to your original account settings as coordinated with your Voyage account manager. Note: for the Embeddable button opt-in method, the opt-in message here must match the string coded in the button to work correctly.
  10. Click ‘Done’ to successfully create your campaign and activate it by toggling it on the main List building overview page.

Creating New Custom List Building Modals

Clone an existing HTML template

The easiest way to create a new modal is to clone an existing one. When you clone, be sure to edit the Campaign ID within the cloned HTML file.

  1. Clone a modal
    1. On the List Building page, locate the modal you'd like to clone, click on the Clone icon on the right side of the screen
  2. Edit the Campaign ID
    1. Click on the 3 dots to the right of the new cloned modal you just created then select Edit Modal
      ,
    2. Copy the campaign ID number from the URL
    3. Click the Download Source HTML button
    4. Use an editor to open the HTML file you just downloaded. (ex: Sublime Text on a Mac)
    5. Search for both campID and campaignID in the code, replace any corresponding numbers with the campaign ID you copied from the URL and save the file
    6. Click the Upload Edited HTML button
    7. Select your saved HTML file then click SAVE in the bottom right of the screen

Editing copy in your modal (Voyage modal editor)

  1. Proceed to the Edit Modal page as noted above
  2. Click the Refresh button
  3. Then click the Edit button
  4. Edit modal copy
  5. Click Save
  6. Then click the SAVE button at the bottom of the page


Obtain an existing HTML template

On the List Building page, locate the modal you'd like to use as the template then to the right, click the 3 dots and select Edit Modal

Screen_Shot_2020-06-04_at_1_28_55_PMScreen_Shot_2020-06-04_at_1_27_52_PM_2

Then click Download Source HTML

Screen_Shot_2020-06-04_at_11.35.11_AM

Create a new List Building modal

On the List Building page, click the + NEW LIST BUILDING CAMPAIGN button

Screen_Shot_2020-06-04_at_11.36.55_AM

Enter a unique Campaign Name, click on Modal and then click NEXT

Voyage_Mobile_17

Select Floating and click NEXT

Voyage_Mobile_18

Click the SETTINGS tab, enter 3 for Hide for, select 1 for Number of Page Views (these are Voyage recommended settings but may be adjusted as desired), enter Blocklist/Allowlist information and click NEXT

Voyage_Mobile_33

Enter the Opt-in Message (you will also enter this identical text later within the HTML code), toggle Double Opt-in to off, enter the Welcome Message and Link, then click DONE

Voyage_Mobile_23

Modify the HTML template

On the List Building page, next to the new modal you just created, click the 3 dots and select Edit Flow

Screen_Shot_2020-06-04_at_1_28_55_PMScreen_Shot_2020-06-04_at_1_27_52_PM

Copy the Opt-in Message text (1) and note the Campaign ID in the URL (2)

Voyage_Mobile_22

Open the HTML template file with an HTML editor (ex: Sublime Text)

  1. Paste the Opt-in Message text between the quotes (make sure the Opt-in Message text is identical to the text entered in the Voyage app)
  2. enter the Campaign ID from the URL
  3. enter your headline text
  4. enter your subhead text
  5. modify the CTA text ("COUNT ME IN" below) as well if you like (not highlighted in the HTML below)

test-modal_html_and_test-modal_html_2

Scroll up in the HTML file until you find the ".hero-image" code. Add the unique filename of the modal's hero image and save the HTML file

test-modal_html_2

Upload the HTML file

On the List Building page, locate your modal, click the 3 dots and select Edit Modal

Screen_Shot_2020-06-04_at_1_28_55_PMScreen_Shot_2020-06-04_at_1_27_52_PM_2

Click Upload Edited HTML

Screen_Shot_2020-06-04_at_2.37.47_PM

Locate your HTML file, upload, then click SAVE

Send image files to Voyage

Make sure the filename of each image matches the name in the corresponding HTML file

test-modal_html_2

Then add all images to a zip file, attach to an email and send to paul@voyagesms.com, david@voyagesms.com and service@voyagesms.com.

Activate the modal

Voyage will upload the images and notify you when image uploading is complete

After images are uploaded go to the List Building page, locate your modal(s), and click the toggle to the left to activate

activating-modal

Your modal(s) is live!

 

Learn more about setting up a Bubble Modal to further improve your customer experience.

FAQ

Q: How do I prevent the modal input field from zooming on a mobile device?

A: Zoom occurs on the input field when the font-size of the text field is below 16px. Either increase the size of the font OR ensure you include (or update) the following <meta> tag in your <head> tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />