Recharge Opt-in at Checkout

Allow your customers to opt-in during the Recharge checkout flow

Follow these instructions to insert an opt-in checkbox, offer CTA and disclaimer copy as shown in the example screenshot below

INSTRUCTIONS

1. Go to the Checkout Settings page in Recharge
2. In Shopify, click on Apps on the left, then click on Recurring Billing by Recharge
3. Click on the wrench icon in the upper right corner and select Checkout to go to the Checkout settings page
4. Click in the Enable JavaScript on page 1 of checkout checkbox below the CSS editor to reveal the textarea box that you’ll be pasting code into.
5. Paste the code below into the textarea as shown here:
   

   (() => {try {
   const CLIENT_ID = '**Insert_your_client_id_here**';
   const COMPANY_NAME = '**Insert_your_company_name_here**';
   const SMS_TERMS_LINK = '**Insert_your_terms_URL_here**';
   const SMS_POLICY_LINK = '**Insert_your_privacy_policy_URL_here**';
   const VOYAGE_OPTIN_CHECKBOX_TEMPLATE = `
   <div class="checkbox-wrapper" style="border-radius: 4px;background-color: #fafafa;border: solid 1px #e6e6e6;padding: 12px;display: block;margin-bottom: 0;margin-top: 6px;">
   <div class="checkbox__input" style="
   display: inline;
   "><input class="input-checkbox" type="checkbox" value="1" id="checkout_accept_sms" disabled>
   </div>
   <label class="checkbox__label" for="checkout_accept_sms" style="font-weight: bold;color: #333333;">**Insert_call_to_action_copy**</label><br>
   <small class="" style="font-size: 12px;color: #737373;margin-left: 30px;">Sign up for ${COMPANY_NAME}'s SMS alerts and we will text you your code</small>
   </div>
   <div style="padding: 8px;line-height: 1.2;font-size: 10px;color: rgb(85, 85, 85);">
   *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 &amp; data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel.
   View our <a style="text-decoration: underline;" href="${SMS_TERMS_LINK}" target="_blank" rel="noopener">
   Terms of Service</a> and <a style="text-decoration: underline;" href="${SMS_POLICY_LINK}" target="_blank" rel="noopener">Privacy Policy</a>.
   </div>
   `
   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('#shipping-address');
   const getPhoneInputElement = () => document.querySelector('#checkout_shipping_address_phone');
   const getOptinCheckboxElement = () => document.querySelector('#checkout_accept_sms');
   const getSubmitInputElements = () => document.querySelectorAll('input[type="submit"]');
   const normalizePhoneNumber = (v) => v && v.length >= 10 && `+1${v.replace(/[^\d]/g, '').slice(-10)}`;
   
   const createOptinCheckboxElement = () => {
   if (getOptinCheckboxElement() || !getTargetElement() || !getPhoneInputElement()) return;
   getPhoneInputElement().placeholder = 'Enter phone to sign up for SMS alerts';
   const optinCheckboxElement = document.createElement("div");
   optinCheckboxElement.innerHTML = VOYAGE_OPTIN_CHECKBOX_TEMPLATE;
   optinCheckboxElement.style.marginBottom = '10px';
   getTargetElement()?.after(optinCheckboxElement)
   };
   createOptinCheckboxElement();
   getPhoneInputElement()?.addEventListener('input', e => {
   if(!getOptinCheckboxElement()) return;
   getOptinCheckboxElement().disabled = !normalizePhoneNumber(getPhoneInputElement()?.value);
   if(!normalizePhoneNumber(getPhoneInputElement()?.value)) getOptinCheckboxElement().checked = false;
   });
   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);
   })
   };
   e();
   } catch{}})();

6. Replace or update the following within the code you just pasted:
   1. replace **Insert_your_client_id_here** with your Client ID found in the Voyage app in Settings > Company (ex: abcdef1234)
   2. replace **Insert_your_company_name_here** with your Company Name  (ex: Voyage)
   3. replace **Insert_your_terms_URL_here** with your Terms & Conditions URL (ex: https://www.voyagesms.com/terms-and-conditions)
   4. replace **Insert_your_privacy_policy_URL_here** with your Privacy Policy URL (ex: https://www.voyagesms.com/privacy-policy)
   5. replace **Insert_call_to_action_copy** with your offer CTA (ex: Get $10 off your next order)
   6. update Sign up for ${COMPANY_NAME}'s SMS alerts and we will text you your code to support your CTA, if necessary (NOTE: ${COMPANY_NAME} is replaced by the value you entered for letter b above)
7. click Save

Create an Opt-in at Checkout campaign

1. In your Voyage dashboard click List Building in the left navigation bar, then click the + NEW LIST BUILDING CAMPAIGN button in the upper right
2. Select Opt-in at Checkout and click NEXT
   
3. Enter Welcome Message text, Link URL and click SAVE OPTIN