Load CDN sdk.js, then use reaction-video in templates for ReactionSDK overlays (tap, poll, rating, slider, and CTA).
ReactifySDK threads / in-page recorder: ReactifySDK Vue. Nuxt: ReactionSDK Nuxt.
1) Add sdk.js (once)
index.html
<!-- public/index.html (or index.html) -->
<script src="https://reactify-cdn.s3.us-east-2.amazonaws.com/sdk.js?v=2.0.8"></script>
<script>
// Optional production init — omit for zero-config demo
window.Reactify && Reactify.init({
apiKey: "YOUR_API_KEY",
accountId: "YOUR_ACCOUNT_ID",
baseUrl: "https://api.reactionsaas.com",
mode: "production",
allowedOrigins: [window.location.origin]
});
</script>2) Embed in a Vue component
Component
<template>
<reaction-video
src="https://yourcdn.com/video.mp4"
overlays="tap,poll,rating,slider,cta"
poll-question="Which style do you prefer?"
cta-text="Buy Now"
overlay-position="bottom-center"
interaction-type="tap"
></reaction-video>
</template>
<script setup>
// Custom element is registered by sdk.js — no Vue package required
</script>Run in Playground
<reaction-video src="video.mp4" overlays="tap,poll,rating,slider,cta" cta-text="Learn more" interaction-type="slider"></reaction-video>Try this config in the Playground.
3) View analytics dashboard
Open the dashboard to see impressions, interactions, and engagement analytics.
Try it live
Preview overlay interactions on a sample video (same demo as the docs playground).
Rate:
ReactionSDK demo