Quick Setup (iframe mode)
EU CAPTCHA supports an embedded quick setup mode for integration into third-party dashboards or control panels. In this mode, the EU CAPTCHA setup flow runs inside an <iframe> and communicates with the parent page using the postMessage API.
When to use this
Quick setup mode is intended for:
- CMS plugins or platform integrations that embed the EU CAPTCHA dashboard in their own admin panel
- Control panels that want to offer a guided EU CAPTCHA setup without redirecting users away
For standard website integration, use the HTML Integration guide instead.
Activating quick setup mode
Embed the EU CAPTCHA quick setup flow in an <iframe>, passing the site's domain as a query parameter:
<iframe
id="eu-captcha-setup"
src="https://app.eu-captcha.eu/user-registration-quick?domain=example.com"
width="100%"
height="600"
frameborder="0"
></iframe>
Replace example.com with the hostname of the site you are configuring. The app opens directly in quick setup mode: the main navigation and footer are hidden, and a streamlined sitekey creation flow is presented for the supplied domain.
Receiving postMessage events
Listen for messages from the iframe in the parent page:
window.addEventListener('message', function(event) {
// Always verify the origin before acting on the message
if (event.origin !== 'https://app.eu-captcha.eu') return;
const { type, sitekey, secret } = event.data;
if (type === 'eu-captcha-quicksetup') {
// Sitekey created — store the credentials securely
console.log('Sitekey:', sitekey);
console.log('Secret:', secret);
}
});
Event reference
Event type |
When fired | Payload fields |
|---|---|---|
eu-captcha-quicksetup |
User completes sitekey creation | sitekey (string), secret (string) |
Security considerations
- Always validate
event.originbefore processing messages from the iframe. - The
secretdelivered in the payload must be stored securely server-side — never expose it in the browser or in frontend code. - Use HTTPS for both the parent page and the iframe src.