Quick start

1. Load the production script

Add the loader once. defer lets it run after the document is parsed and before DOMContentLoaded.

<script
  src="https://widget.get-giftie.com/widget-loader.js"
  defer
></script>

If your site uses a Content Security Policy, allow the origin in script-src and frame-src.

2. Create an instance

Initialize after the deferred script has run. Use a stable site or shop domain as domain.

<button id="open-giftie" type="button">Add a video message</button>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('#open-giftie')

    if (!button || typeof window.Giftie !== 'function') {
      console.error('Giftie failed to load')
      return
    }

    const giftie = window.Giftie({
      domain: window.location.hostname,
      occasionSelector: true,
      onVideoSave(payload) {
        console.log('Giftie recording saved', payload.videoCode)
      },
    })

    button.addEventListener('click', () => giftie.open())
  })
</script>

3. Handle the save

onVideoSave runs after Giftie has saved the recording. Despite the callback's historic name, it handles both video and audio; check payload.mode when your flow treats them differently.

The loader invokes the callback but does not await its return value. If the callback starts asynchronous work, the modal can begin closing while that work continues. Catch promise rejections inside the callback; returning a rejected promise does not send the failure back to the loader.

The browser SDK does not add a Shopify item, update your application state, or refresh a cart. Add those actions in the callback, or use the standard Giftie Shopify theme integration. See Save payload.

Script-loading failures

The loader does not expose a ready promise. For dynamic loading, attach load and error listeners to the script before appending it, then create the SDK instance only after load.

Do not initialize the direct SDK alongside the standard Giftie Shopify theme integration. Its head-target app embed already initializes and owns the global instance for section blocks and injected cart-slot controls.