Allow your customers to opt-in to your SMS messages during the BigCommerce checkout flow. Follow these instructions to insert an opt-in checkbox, offer CTA and disclaimer copy similar to the example screenshot below:

Begin by logging into BigCommerce and navigating to the Storefront main menu:

In the expanded Storefront sub menu, select Script Manager [1]. Click on the blue Create a Script to the right [2]:

Give the script and appropriate name such as Voyage [1], set the "Location on page" to Footer [2]. "Select pages where script will be added" should be set to Checkout [3] and the "Script category" is Functional [4]. Change the "Script type" to Script [6], and in the Script contents field [6] you'll need to paste the code found below. When done click Save [7]:

There are several edits you must make to the code below before submitting it in BigCommerce:

**Insert_call_to_action_copy**
​
Sign up for ${COMPANY_NAME}'s SMS alerts and we will text you your code
​
​

I agree to receive recurring automated marketing text messages (e.g. cart reminders) at the phone number provided. Consent is not a condition to
purchase. Msg & data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel.
View Terms & Privacy
​

`;
let t = !1;
let s = !1;
const e = function () {
if (document.readyState && !/loaded|complete/.test(document.readyState)) {
return void setTimeout(e, 10);
}
if (!t) return (t = !0), void setTimeout(e, 50);
const getTargetElement = () =>
document.querySelector("#checkoutShippingAddress");
const getPhoneInputElement = () => document.querySelector("#phoneInput");
const getOptinCheckboxElement = () =>
document.querySelector("#checkout_accept_sms");
const getSubmitInputElements = () =>
document.querySelectorAll('button[type="submit"]');
const getContinueButtonElement = () =>
document.querySelector("#checkout-customer-continue");
const normalizePhoneNumber = (v) =>
v && v.length >= 10 && `+1${v.replace(/[^\d]/g, "").slice(-10)}`;
const addClickEvent = () => {
getSubmitInputElements().forEach((n) => {
n.addEventListener(
"click",
(e) => {
setTimeout(function () {
const acceptedVoyageSms = getOptinCheckboxElement()?.checked;
const marketingPhone = normalizePhoneNumber(
getPhoneInputElement()?.value
);
if (!marketingPhone || !acceptedVoyageSms || s) return;
(async () =>
await fetch("https://vyg.mobi/api/events", {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
eventName: "MarketingPhone",
metadata: { marketingPhone },
tenantId: CLIENT_ID,
}),
method: "POST",
}))();
s = !0;
}, 0);
},
false
);
});
};
​
const createOptinCheckboxElement = (tries) => {
if (getOptinCheckboxElement()) return;
if (!getOptinCheckboxElement() && (tries < 10 || !tries)) {
setTimeout(() => createOptinCheckboxElement(tries + 1), 500);
}
​
const optinCheckboxElement = document.createElement("div");
optinCheckboxElement.innerHTML = VOYAGE_OPTIN_CHECKBOX_TEMPLATE;
optinCheckboxElement.style.display = "grid";
getTargetElement()?.after(optinCheckboxElement);
};
setInterval(() => {
createOptinCheckboxElement();
addClickEvent();
}, 1000);
​
createOptinCheckboxElement();
​
const addListenerToContinueButton = (tries) => {
if (!getContinueButtonElement() && (tries < 10 || !tries)) {
setTimeout(() => addListenerToContinueButton(tries + 1), 500);
}
getContinueButtonElement()?.addEventListener(
"click",
createOptinCheckboxElement
);
};
addListenerToContinueButton();
​
const addListener = function () {
const getShippingElements = () =>
document.querySelectorAll(
".checkout-view-header, #checkout-customer-continue, .stepHeader, .stepHeader-actions"
);
​
getShippingElements().forEach((n) => {
n.addEventListener("click", () => {
createOptinCheckboxElement();
addListenerToContinueButton();
});
});
};
addListener();
};
e();
} catch {}
})();
​

Once you have made the changes, pasted the script and hit save, you'll be taken back to the Script Manager page where you'll see a list of your Installed Scripts which should include the one you just added. Now you're ready to create a campaign in Voyage:

Back to Top

To utilize the BigCommerce Checkout Opt-In integration, navigate in the Voyage web app to the List Building main menu [1], then click on the blue New List Building Campaign button [2]:

On the Select Campaign Type page, give your campaign a name [1] then select Opt-in at Checkout [2]. Click Next [3] when done:

On the next page you'll see a series of fields fully described in greater detail in our List Building guide. When you are done populating those fields, scroll to the very bottom and click on the blue Save Optin button:

Remember, at this point your campaign is saved but not yet active. You'll need to go to your main List Building list [1], then filter them by Opt-In at Checkout [2] to more easily locate the campaign you'd like to activate. Finally, click the Off/On switch [3] to make the campaign live:

Back to Top

If you have any additional questions please contact us at [email protected].