Knowledge Base
Opening Modals from Embedded Flipbooks
Hello! Great question. When you have embedded content like Framer flipbooks inside GPTWeb, you can create buttons that trigger modals (contact forms, demo requests, trial signups) using the postMessage API. This lets your embedded designs interact seamlessly with GPTWeb's modal system.
How It Works
Embedded content (Framer, Canva, custom HTML) runs inside an iframe. To communicate with the parent GPTWeb page, you send a message using
window.parent.postMessage. GPTWeb listens for these messages and executes the corresponding action.// Open a modal from embedded content
window.parent.postMessage({ type: 'gptweb:openModal', modal: 'demo' // or 'contact' or 'trial'
}, '*');
window.parent.postMessage({ type: 'gptweb:openModal', modal: 'demo' // or 'contact' or 'trial'
}, '*');
Available Modal Types
| Modal Value | Opens | Use Case |
|---|---|---|
| contact | Contact Us form | General inquiries, support requests |
| demo | Demo scheduling modal | Sales demos, Calendly/HubSpot integration |
| trial | Trial request form | Free trial signups |
Create a button component in Framer that opens the demo modal when clicked:
import { useCallback } from "react" export function DemoButton() { const handleClick = useCallback(() => { window.parent.postMessage({ type: 'gptweb:openModal', modal: 'demo' }, '*') }, []) return ( <button onClick={handleClick}> Book a Demo </button> )
}
}
<button onclick="window.parent.postMessage({ type: 'gptweb:openModal', modal: 'demo' }, '')"> Book a Demo
</button> <button onclick="window.parent.postMessage({ type: 'gptweb:openModal', modal: 'contact' }, '')"> Contact Us
</button> <button onclick="window.parent.postMessage({ type: 'gptweb:openModal', modal: 'trial' }, '*')"> Start Free Trial
</button>
</button> <button onclick="window.parent.postMessage({ type: 'gptweb:openModal', modal: 'contact' }, '')"> Contact Us
</button> <button onclick="window.parent.postMessage({ type: 'gptweb:openModal', modal: 'trial' }, '*')"> Start Free Trial
</button>
Beyond modals, you can also trigger prompts and send messages from embedded flipbooks:
| Action | Code | What Happens |
|---|---|---|
| Open Modal | { type: 'gptweb:openModal', modal: 'demo' } | Opens contact/demo/trial form |
| Execute Prompt | { type: 'gptweb:executePrompt', promptText: 'Show pricing' } | AI responds without showing user message |
| Send Message | { type: 'gptweb:sendMessage', message: 'Tell me more' } | Shows as visible user message, then AI responds |
// Ask AI a question from your Framer flipbook
window.parent.postMessage({ type: 'gptweb:executePrompt', promptText: 'What are your pricing plans?'
}, '*');
window.parent.postMessage({ type: 'gptweb:executePrompt', promptText: 'What are your pricing plans?'
}, '*');
- Only works when embedded - Test on your live GPTWeb page, not in Framer preview mode
- Modal must be enabled - Ensure the form is enabled in Branding → Customize → Headers & Forms
- Use exact modal values - Must be exactly 'contact', 'demo', or 'trial'
- Check browser console - Look for messages starting with 📩 to confirm receipt
| Issue | Solution |
|---|---|
| Modal doesn't open | Verify modal type is exactly: contact, demo, or trial |
| Button does nothing | Ensure you're testing on live GPTWeb page, not Framer preview |
| No console messages | Check that you're using window.parent.postMessage (not just postMessage) |
| Form not appearing | Enable the form in Admin → Branding → Customize → Headers & Forms |
Console Debugging
Open browser DevTools (F12) to see action logs: ``
📩 Received postMessage from iframe: {type: 'gptweb:openModal', modal: 'demo'}
📝 Opening demo modal via postMessage
If you see warnings like ⚠️ Invalid modal type`, double-check your modal value spelling.This approach lets you create rich, interactive Framer presentations that seamlessly connect to GPTWeb's lead capture and engagement tools. Your embedded flipbooks become conversion machines, not just static content. GPTWeb is the future of engagement - websites and marketing automation combined, built for the AI era, built for now.