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

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. Copy the embed from the Code column.

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:

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

Code

ReactionSDK (sdk.js)

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

ReactifySDK expansion (optional)

<script src="https://reactify-cdn.s3.us-east-2.amazonaws.com/reactify.js" defer></script>
<!-- After overlays are live, load reactify.js for recorded video reactions: reactify-video, reactify-thread, and thread embeds. -->

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>

platform_config

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

Demo

ReactionSDK

Rate:

ReactionSDK demo

Where to paste code

Setup guide

Example snippet

Verification

Template platform_config

UI presets (reference)

Troubleshooting

FAQ

Template `platform_config`