Custom Keyed Entry

We highly recommend that you use Custom Keyed Entry for desktop modal and landing pages only. The two-tap button method performs significantly better on mobile than keyed entry.

Below are the steps required to implement keyed entry input.

Creating a List Building Campaign

  • Create a new List Building campaign in the Voyage app on the List Building tab.
  • Choose Modal > Desktop. You will not be using this modal template but need a Campaign ID per the below technical steps. This will allow you to generate that new Campaign ID.

s1-cke

  • click on the modal SETTINGS tab
  • Expand the Allowlist / Blocklist Pages toward the bottom of the page to reveal the Patterns text entry field. Enter !/** and click NEXT
  • Set your desired List Building Flow details and click Done. Stats will ultimately appear under this Campaign in the Voyage dashboard.
  • Take note of your Campaign ID at the top of the page (this will be used in making the required API call to subscribe a consumer).

API Details

Technical details associated with making the API request are as follows. But if you wish to see an example, please refer to the Using JavaScript section below.

POST https://vyg.mobi/api/events/subscribeNumber

Payload

{   
"phoneIn": "<phone starting with +1>" (e.g., +13108293002),
"campaignId": <campaignId> (e.g., 1234),
}

Expected Responses

200 Already Subscribed

201 Subscribed Successful

 

Example Payload with Optional Attributes

{ 
"phoneIn": "+15555555555",
"campaignId": 1234,
"attributes": {
"email": "my@domain.com"
}
}

 


Using JavaScript

Below is an example that you can use to send the phone number to Voyage from the client-side of your application. The Voyage Global Tag must be included within your <head> element.

You will then need to pass the Campaign ID and Phone Number below to our system when a user submits their phone number.

Method

voyage.subscribe(<PHONE_NUMBER>, { campaignId: <CAMPAIGN_ID> });

 

Options
campaignId: (Required) The identifier for the List Building campaign to submit to.
attributes: An object containing key-value pairs of attributes to store for the subscriber.

Example Attributes Submission

voyage.subscribe('15555555555', { 
campaignId: 1234,
attributes: {
crmId: 5678,
email: "my@domain.com",
birthDate: "01/01/0001",
color: "blue"
}
});

 

Example HTML Form Submission

<script type="text/javascript">
// Set the Campaign ID for the submission
var campaignId = 1234;

// Retrieve the form element by the id attribute
var form = document.getElementById('my-form');

if (form) {
form.addEventListener('submit', function (event) {
// Retrieve the phone number from the field containing "phone" in name attribute
var phoneField = form.querySelector('input[name~="phone"]);
var phoneNumber = phoneField ? phoneField.value : '';

// Optional: Prevents reloading the page if using a standard form submit.
// event.preventDefault()

// Optional: Validate form has all correct details
// validate();

// Submit the phone number to Voyage
voyage.subscribe(phoneNumber, { campaignId })
});
}
</script>

Statistics: keyed entry versus two-tap on mobile

The two-tap opt-in method drastically outperforms keyed entry on mobile. Below are statistics detailing this performance gap. Keyed entry should be reserved for use cases where two-tap is not possible including for desktop SMS opt-in.

s2-cke

Statistics: keyed entry modal versus two tap method. CTR is 20x for two-tap method.