Initializing the SDK

Use the CDN version of the Thirstie SDK and Squarespace's Code Injection feature.

In the Squarespace page editor, navigate to Pages -> Custom Code -> Code Injection and add the following snippet.

<!-- BEGIN THIRSTIE SDK CODE -->
<link rel="stylesheet" type="text/css" href="https://cdn.thirstie.cloud/css/latest/thirstiebase.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.thirstie.cloud/css/latest/thirstieecomm.css" />

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.thirstie.cloud/js/latest/thirstie-ecomm-vue.js"></script>

<script defer type="module">
  const initializeThirstieSDK = () => {
    const { APIKEY, MAPSKEY, THENV, BRAND_LOGO_URL, SUPPORT_EMAIL } = {
      "APIKEY": "Your Thirstie API Key",
      "MAPSKEY": "Your Google Maps API Key",
      "THENV": "'sandbox' or 'prod'",
      "BRAND_LOGO_URL": "The url for your brand logo, displayed during checkout",
      "SUPPORT_EMAIL": "Provided by Thirstie, support@<yourbrand>.thirstie.com"
    };
    window.thirstieEcommVue.initApp({
        APIKEY: APIKEY,
        MAPSKEY: MAPSKEY,
        environment: THENV,
        primaryColor: '#000',
        secondaryColor: '#fff',
        primaryContrastingColor: '#fff',
        secondaryContrastingColor: '#000',
        routes: {
            checkout: '/thirstie-checkout',
            shopping: '/'
        },
        brandLogo: BRAND_LOGO_URL,
        supportEmail: SUPPORT_EMAIL,
    });
  }

  globalThis.__VUE_PROD_DEVTOOLS__ = false;
  globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
  globalThis.__VUE_OPTIONS_API__ = false;
  initializeThirstieSDK();
</script>