BigCommerce Opt-in at Checkout

Allow your customers to opt-in 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

INSTRUCTIONS

  1. In BigCommerce  go to Storefront > Script Manager
  2. Create a new script with the following settings:
    1. Location: Footer
    2. Select pages where script will be added: Checkout
    3. Script category: Functional
    4. Script: paste in the code snippet below, be sure to make the following edits:
      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_call_to_action_copy** with your offer CTA (ex: Get $10 off your next order)
      4. replace **Insert_your_Voyage_Terms_and_Conditions_URL_here** with the Voyage Terms and Conditions URL found in the Voyage app in Settings > Policies under Generate Terms and Conditions
      5. 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 roman numeral iii above)
    5. click Save
<script>
(() => {
  try {
    const VYG_OPTIN_INFO_STORAGE = "vyg__optin_info";
  const CLIENT_ID = "**Insert_your_client_id_here**";
  const COMPANY_NAME = "**Insert_your_company_name_here**";
    const VOYAGE_OPTIN_CHECKBOX_TEMPLATE = `
    <div class="checkbox-wrapper" style="border-radius: 4px;background-color: #fafafa;border: solid 1px #e6e6e6;padding: 12px;display: inline-block;margin-bottom: 0;margin-top: 6px;">
    <div class="checkbox__input" style="display: inline-block;"><input class="input-checkbox" type="checkbox" value="1" id="checkout_accept_sms">
    </div>
  <label class="checkbox__label" for="checkout_accept_sms" style="font-weight: bold;color: #333333;margin-left: 13px;">**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<a href="**Insert_your_Voyage_Terms_and_Conditions_URL_here**" target="_blank"> Terms & Privacy</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("#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 {}
})();
</script>

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