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

NOTE: if you do not see the Enable JavaScript checkbox shown in step #4 under INSTRUCTIONS, please contact ReCharge and ask them to enable Javascript on your checkout. Use this link to submit a support request to ReCharge: https://support.rechargepayments.com/hc/en-us/requests/new

    1. Select “API, integrations, & advanced customization” from the What can we help you with? Dropdown
    2. Select Code customization from the Topic dropdown
    3. Subject: enable Javascript on my checkout page
    4. Description: Please enable Javascript on my checkout page - Thank you!
    5. Click Submit
    6. You’ll receive an email similar to this, asking you to verify your request
    7. Respond with “Yes, please proceed”.

    Voyage currently supports 1 Opt-in at Checkout List Building campaign per account. Therefore if you're using an Opt-in at Checkout List Building campaign for Shopify, this ReCharge Opt-in code will use the same Opt-in at Checkout List Building campaign within Voyage.

    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