ReactionSaaS
Documentation

Zipify Pages

Zipify Pages runs on Shopify—follow Shopify CSP rules and avoid duplicate script tags when combining Zipify blocks with theme app embeds.

Where to paste code

  • Custom HTML elements inside the Zipify page editor.
  • Store-level script manager if you centralize ReactionSDK.

Setup guide

  1. Single SDK initialization per page.
  2. Match allowedOrigins to your primary domain and checkout subdomain if used for previews.
  3. Insert embed; test with Zipify preview and live publish.

Example snippet

<script src="https://reactify-cdn.s3.us-east-2.amazonaws.com/sdk.js" defer></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    if (!window.Reactify) return;
    Reactify.init({
      apiKey: 'YOUR_API_KEY',
      accountId: 'YOUR_ACCOUNT_ID',
      baseUrl: 'https://api.reactionsaas.com',
      mode: 'production',
      allowedOrigins: [window.location.origin]
    });
  });
</script>
<reaction-video
  src="https://cdn.example.com/hero.mp4"
  overlays="tap,poll,rating,slider,cta"
  poll-question="Ready to continue?"
  cta-text="Continue"
  interaction-type="tap"
></reaction-video>

ReactionSDK here means overlays on reaction-video (tap, poll, rating, slider, and CTA). For ReactifySDK—recorded video reactions and threads—load reactify.js and use reactify-video / reactify-thread per ReactifySDK HTML install.

Verification

  1. Publish to a live URL; open in a clean session and confirm the SDK loads without CSP errors.
  2. Trigger first render and first interaction; check ReactionSaaS analytics.
  3. Use the SDK playground with Zipify Pages selected to mirror overlay settings.

Template platform_config

Marketplace templates can declare a Zipify Pages block inside platform_config:

{
  "zipifypages": {
    "embed_type": "shopify_section_or_html",
    "host": "zipifypages",
    "placements": [
      "product_page",
      "collection_page",
      "landing_page"
    ]
  }
}

UI presets (reference)

  • Product page overlayImpression when section is visible; CTA after engagement. Events: first_render, first_interaction, template_used, platform_used.
  • Inline product / collection blockLazy-load; mobile-first height. Events: first_render, first_interaction.
  • Landing / offer CTA widgetTimer or scroll-based reveal. Events: first_render, first_interaction, verification_heartbeat.

Troubleshooting

  • Script does not run — Use a raw HTML or global script area; rich-text-only fields often strip JavaScript.
  • 403 from API — Add the exact published origin (including www) to allowed domains.
  • Duplicate events — Ensure only one SDK init per page when combining global and section-level code.

FAQ

Conflicts with other Zipify scripts? Load order matters—place SDK after analytics pixels only if required; otherwise defer SDK to end of body.

← Platform overview · Templates