{"id":420,"date":"2025-09-26T06:44:21","date_gmt":"2025-09-26T06:44:21","guid":{"rendered":"https:\/\/educationfest.nl\/elementskit-content\/dynamic-content-widget-popup-3a77e96\/"},"modified":"2025-09-26T06:57:27","modified_gmt":"2025-09-26T06:57:27","slug":"dynamic-content-widget-popup-3a77e96","status":"publish","type":"elementskit_content","link":"https:\/\/educationfest.nl\/nl\/elementskit-content\/dynamic-content-widget-popup-3a77e96\/","title":{"rendered":"dynamic-content-widget-popup-3a77e96"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n Event Registration<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n <style>\n :root {\n --bg: #f7f7fb;\n --text: #1f2937;\n --muted: #6b7280;\n --brand: #0ea5e9;\n --card: #ffffff;\n --border: #e5e7eb;\n }\n * { box-sizing: border-box; }\n html, body { height: 100%; }\n body {\n margin: 0;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n color: var(--text);\n background: radial-gradient(1200px 800px at 10% 0%, #eef7ff 0%, var(--bg) 50%, var(--bg) 100%);\n }\n\n .wrap {\n min-height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n header {\n padding: 18px 20px;\n background: linear-gradient(90deg, #0ea5e9, #6366f1);\n color: #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,.08);\n }\n header .title {\n margin: 0;\n font-weight: 700;\n letter-spacing: .2px;\n }\n header .subtitle {\n margin: 2px 0 0;\n opacity: .9;\n font-weight: 500;\n font-size: 0.95rem;\n }\n\n .card {\n margin: 18px auto;\n width: min(1200px, 95vw);\n background: var(--card);\n border: 1px solid var(--border);\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);\n display: flex;\n flex-direction: column;\n }\n\n .toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n border-bottom: 1px solid var(--border);\n background: #fafafa;\n flex-wrap: wrap;\n }\n .toolbar .pill {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n border: 1px solid var(--border);\n border-radius: 999px;\n padding: 8px 12px;\n color: var(--muted);\n font-size: 0.9rem;\n background: #fff;\n }\n .toolbar a.button {\n margin-left: auto;\n text-decoration: none;\n background: var(--brand);\n color: #fff;\n border-radius: 999px;\n padding: 10px 14px;\n font-weight: 600;\n transition: transform .05s ease-in-out, box-shadow .2s;\n box-shadow: 0 6px 16px rgba(14,165,233,.25);\n white-space: nowrap;\n }\n .toolbar a.button:hover { transform: translateY(-1px); }\n\n .frame-wrap {\n position: relative;\n width: 100%;\n height: min(82vh, 1000px);\n background: #fff;\n overflow: hidden;\n }\n\n iframe {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n \/* Loading state *\/\n .loading {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);\n }\n .spinner {\n width: 42px;\n height: 42px;\n border: 3px solid #e5e7eb;\n border-top-color: var(--brand);\n border-radius: 50%;\n animation: spin 0.9s linear infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Fallback notice *\/\n .fallback {\n display: none;\n padding: 22px;\n border-top: 1px solid var(--border);\n background: #f9fafb;\n color: var(--muted);\n font-size: 0.95rem;\n }\n .fallback a {\n color: var(--brand);\n font-weight: 600;\n text-decoration: none;\n }\n\n footer {\n text-align: center;\n color: var(--muted);\n font-size: 0.9rem;\n padding: 18px 12px 28px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <header>\n <h1 class=\"title\">Register for the Event<\/h1>\n <p class=\"subtitle\">Complete your registration below. If the embedded form doesn\u2019t load, use the \u201cOpen Full Page\u201d button.<\/p>\n <\/header>\n\n <main class=\"card\" role=\"main\" aria-label=\"Registration embed\">\n <div class=\"toolbar\">\n <span class=\"pill\" aria-hidden=\"true\">\ud83d\udd12 Secure form<\/span>\n <span class=\"pill\" aria-hidden=\"true\">\ud83d\udd52 Takes ~3\u20135 minutes<\/span>\n <a class=\"button\" id=\"openFull\" href=\"https:\/\/www.aanmelder.nl\/169303\/registration\" target=\"_blank\" rel=\"noopener\">Open Full Page<\/a>\n <\/div>\n\n <div class=\"frame-wrap\" id=\"frameWrap\">\n <div class=\"loading\" id=\"loading\" aria-live=\"polite\">\n <div class=\"spinner\" aria-label=\"Loading registration form\"><\/div>\n <\/div>\n\n <!-- The embedded registration page -->\n <iframe\n id=\"regFrame\"\n title=\"Event Registration\"\n src=\"https:\/\/www.aanmelder.nl\/169303\/registration\"\n loading=\"eager\"\n referrerpolicy=\"no-referrer-when-downgrade\"\n allow=\"clipboard-write; geolocation *; payment *\">\n <\/iframe>\n <\/div>\n\n <div class=\"fallback\" id=\"fallback\" role=\"note\">\n Having trouble with the embedded form? It may be blocked from loading inside other websites. \n Please <a href=\"https:\/\/www.aanmelder.nl\/169303\/registration\" target=\"_blank\" rel=\"noopener\">open the registration page in a new tab<\/a>.\n <\/div>\n <\/main>\n\n <footer>\n Tip: If your browser or the registration site blocks embedding, the button above will always work.\n <\/footer>\n <\/div>\n\n <script>\n (function () {\n const iframe = document.getElementById('regFrame');\n const loading = document.getElementById('loading');\n const fallback = document.getElementById('fallback');\n\n \/\/ Hide loader when the iframe signals it has loaded something\n iframe.addEventListener('load', () => {\n loading.style.display = 'none';\n });\n\n \/\/ After a short timeout, if still loading, show fallback hint\n setTimeout(() => {\n const stillLoading = getComputedStyle(loading).display !== 'none';\n if (stillLoading) {\n fallback.style.display = 'block';\n }\n }, 3500);\n })();\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"parent":0,"template":"elementor_canvas","class_list":["post-420","elementskit_content","type-elementskit_content","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/educationfest.nl\/nl\/wp-json\/wp\/v2\/elementskit-content\/420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/educationfest.nl\/nl\/wp-json\/wp\/v2\/elementskit-content"}],"about":[{"href":"https:\/\/educationfest.nl\/nl\/wp-json\/wp\/v2\/types\/elementskit_content"}],"version-history":[{"count":3,"href":"https:\/\/educationfest.nl\/nl\/wp-json\/wp\/v2\/elementskit-content\/420\/revisions"}],"predecessor-version":[{"id":425,"href":"https:\/\/educationfest.nl\/nl\/wp-json\/wp\/v2\/elementskit-content\/420\/revisions\/425"}],"wp:attachment":[{"href":"https:\/\/educationfest.nl\/nl\/wp-json\/wp\/v2\/media?parent=420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}