PageFly

PageFly renders into the Shopify storefront. Ensure the SDK is allowed by your theme’s Content Security Policy and load order (defer vs async) matches Shopify’s recommendations.

Where to paste code

PageFly HTML element or custom Liquid section.
Shopify theme app embed that loads once store-wide, with embed markup only on PageFly-built templates.

Setup guide

Confirm Shopify + PageFly preview loads sdk.js without console errors.
Initialize with storefront origin allowlisting.
Paste embed in the PageFly section; check mobile and accelerated paths.

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

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

Template `platform_config`

Marketplace templates can declare a PageFly block inside platform_config:

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

UI presets (reference)

Product page overlay — Impression when section is visible; CTA after engagement. Events: first_render, first_interaction, template_used, platform_used.
Inline product / collection block — Lazy-load; mobile-first height. Events: first_render, first_interaction.
Landing / offer CTA widget — Timer 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

OS 2.0 only? Modern themes work best; legacy themes may need a developer to whitelist script sources.

← Platform overview · Templates