Loading Zadfly
Please wait a moment...
Please wait a moment...
Learn how to integrate Zadfly into your application
Integrate the Zadfly offerwall into your web application or mobile app
Copy this prompt to generate a responsive iFrame component with dynamic userId, loading state, and error handling.
Act as a Senior Frontend Engineer. I want to integrate the Zadfly Offerwall iFrame into my web application.
Target iFrame URL:
https://zadfly.com/wall/YOUR_PLACEMENT_ID?userId={LOGGED_IN_USER_ID}&sub1={OPTIONAL_SUB1}
Requirements:
1. Build a clean, responsive component in my tech stack (React / Next.js / HTML / Vue) that embeds the Zadfly iFrame.
2. Dynamically pass the logged-in User ID into the `userId` parameter.
3. Show a sleek loading spinner indicator until the iFrame finishes loading (`onLoad` event).
4. Set width to 100% and responsive height (e.g. 750px or 100vh) with rounded borders and clean shadows.
5. Include camera/mic and fullscreen permissions sandboxing (`allow="fullscreen"`).
Generate complete, production-ready code with clean TypeScript types and full error handling.Using Iframe:
<iframe
src="https://zadfly.com/wall/YOUR_PLACEMENT_ID?userId={USER_ID}&sub1={SUB1}"
width="100%"
height="600px"
frameborder="0"
style="border: none; border-radius: 8px;"
></iframe>Using Direct Link (for buttons):
https://zadfly.com/wall/YOUR_PLACEMENT_ID?userId={USER_ID}&sub1={SUB1}