Introduction
This guide will walk you through the steps to integrate Amped.io with OneText.
The easiest way to make this work in Amped.io is to start with a "Tap to Text" template from Amped. "Tap to Text" is an option on all Amped.io Templates.When using the Tap to Text variant of a template it will come pre-configured with email capture that when completed conditionally routes the visitor baed on their device type:
Phone visitors: will be shown the “Tap to Text” step
Desktop / Tablet visitors: will be shown the phone input field
Not sure what "Tap to Text" is? See the explanation at the bottom of this page.
Automatic Phone Number Integration with Klaviyo (Desktop + Tablet visitors)
If you're already using the Amped.io integration with Klaviyo, any phone numbers that are collected via Amped.io will be automatically recognized by OneText once they are added to Klaviyo. However, it's essential to understand that this seamless integration occurs when the phone number is captured in an input field and then transferred to Klaviyo.
Implementing OneText's "Tap to Text" Feature (Phone visitors only)
OneText's "Tap to Text" feature allows users to open a prefilled text message that they can send to opt-in. To set up this feature:
Retrieve the Tap to Text Link from OneText
Obtain the "Tap to Text" link provided by OneText.
Configure the Button on Amped.io
On Amped.io, choose the button that you'd like to trigger the "Tap to Text" link. Ensure that this feature is targeted only for mobile visitors. On mobile, the button will open the user's messaging app. Avoid targeting desktop users, as you can't always ensure they have text messaging capabilities on their desktop.
Integrate Custom Code for Variable Collection
To ensure that data, such as email or user preferences, is passed onto the "Tap to Text" link, utilize the following custom code in Amped.io:
// ✅ Add your OneText variable here 👇
var oneText_tap_to_text_link = 'NEED_TO_ADD_LINK_HERE'; // This is your OneText Tap to Text link will look something like https://onetext.com/link/0123456789AB
///////////////////////////////////////////////
// 🛑 Leave the rest of this code as is
///////////////////////////////////////////////
// 'input' contains any inputs captured, e.g., the email input can be accessed through input.email
var queryParams = [];
// Check if email is present in input and add it to queryParams
if (input.email) {
queryParams.push('email=' + encodeURIComponent(input.email));
}
// If user properties exist and you wish to include them in the URL, access them like so:
var userProperties = JSON.parse(window.localStorage.getItem(`amped-${ampedConfig.accountId}-userProperties`));
if (userProperties) {
for (let prop in userProperties) {
queryParams.push(prop + '=' + encodeURIComponent(userProperties[prop]));
}
}
// Construct the final URL with the added query params
var finalUrl = oneText_tap_to_text_link;
if (queryParams.length > 0) {
finalUrl += '?' + queryParams.join('&');
}
// Log the constructed URL for debugging purposes
console.log('Constructed URL:', finalUrl);
// Open the constructed URL in a new tab, triggering the text message
window.open(finalUrl, '_blank');
////////////////////////////////////////////////
resolve(); // Continue with the rest of the Amped.io actions.
4. Test and Publish!
Use the "Preview" feature in Amped to test this before going live and then don't forget to publish.
If you have any issues at all, please do not hesitate to reach out to [email protected] and we will help you get this perfect! 💪
Reference:
What is "Tap to Text"?
"Tap to Text" is like a shortcut / linkfor sending text messages. By tapping a "Tap to Text" button, your phone's texting app will be opened and a prefilled message will typically be inserted along with the "to" number prefilled for you. This means all the visitor needs to do is hit send, it will send the message, and since the recipient (the SMS service) can see the sending phone number, that number can then be opt-ed in for text messaging.