hr-design-system-handlebars 1.123.1 → 1.123.2

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.123.2 (Thu Nov 13 2025)
+
+#### ⚠️ Pushed to `main`
+
+- Add support for 23 Degrees embed and refactor external service component ([@szuelch](https://github.com/szuelch))
+- :bug: Fix lazyLoad default value in external service data policy component ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.123.1 (Tue Nov 11 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3895,7 +3895,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1762853689058;
+  counter-reset: cnt1763030567815;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4356,7 +4356,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1762853689058 1;
+  counter-increment: cnt1763030567815 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4374,7 +4374,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1762853689058);
+  content: counter(cnt1763030567815);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/external-service/externalServiceDs.feature.js

@@ -9,7 +9,7 @@ import {
     loadScript,
     removeScript,
     replaceAnimated,
-    requestTimeout
+    requestTimeout,
 } from 'hrQuery'
 
 const ExternalService = function (context) {
@@ -36,7 +36,6 @@ const ExternalService = function (context) {
         isExternalServiceLoaded = false,
         tiktokOnPage = []
 
-
     const testDOMElements = function () {
         console.log(rootElement)
         console.log(rootParent)
@@ -78,6 +77,9 @@ const ExternalService = function (context) {
         switch (embedType) {
             case 'js':
                 switch (id) {
+                    case '23degrees':
+                        createTwentyThreeDegreesEmbed()
+                        break
                     case 'facebook-post':
                         createFacebookEmbed()
                         break
@@ -86,7 +88,7 @@ const ExternalService = function (context) {
                         break
                     case 'tiktok':
                         createTikTokEmbed()
-                        break    
+                        break
                     case 'twitter':
                         createTwitterEmbed()
                         break
@@ -135,28 +137,16 @@ const ExternalService = function (context) {
         gemeindewahlergebnis.createErgebnis()
     }
     const createWahlOMatEuwaEmbed = function () {
-
         const divTag = document.createElement('div')
         divTag.id = 'wahl-o-mat-europawahl-2024'
         rootElement.insertBefore(divTag, null)
-        loadScript(
-            'wahl-o-mat-js',
-            'https://static.hr.de/wahl-o-mat/embed.js',
-            true
-        )
-
+        loadScript('wahl-o-mat-js', 'https://static.hr.de/wahl-o-mat/embed.js', true)
     }
     const createWahlOMatButawaEmbed = function () {
-
         const divTag = document.createElement('div')
         divTag.id = 'wahl-o-mat-bundestagswahl-2025'
         rootElement.insertBefore(divTag, null)
-        loadScript(
-            'wahl-o-mat-js',
-            'https://static.hr.de/wahl-o-mat/bundestagswahl/embed.js',
-            true
-        )
-
+        loadScript('wahl-o-mat-js', 'https://static.hr.de/wahl-o-mat/bundestagswahl/embed.js', true)
     }
 
     const createWahlEmbed = function () {
@@ -179,86 +169,100 @@ const ExternalService = function (context) {
     }
 
     const werWaehlteWenEmbed = function () {
-        let iframe = document.createElement('iframe');
-        let cleanUrl;
-        const parts = embedCode.split('*');
+        let iframe = document.createElement('iframe')
+        let cleanUrl
+        const parts = embedCode.split('*')
         if (parts.length === 2) {
-            const params = parts[1].split(' ');
-            cleanUrl = parts[0].trim();
+            const params = parts[1].split(' ')
+            cleanUrl = parts[0].trim()
             for (const param of params) {
-                const [key, value] = param.split('=');
+                const [key, value] = param.split('=')
                 if (key === 'id') {
-                    iframe.id = value;
+                    iframe.id = value
                 } else {
-                    iframe.setAttribute(key, value);
+                    iframe.setAttribute(key, value)
                 }
             }
         }
 
-        iframe.src = cleanUrl;
-        iframe.style.width = "100%";
-        iframe.style.border = "0";
+        iframe.src = cleanUrl
+        iframe.style.width = '100%'
+        iframe.style.border = '0'
         if (lazyLoad) {
-            iframe.loading = "lazy";
+            iframe.loading = 'lazy'
         }
-        rootElement.appendChild(iframe);
-
-        window.addEventListener("message", function (e) {
-            if (e.data.contentUrl && e.data.contentUrl.includes("/wahl/embed/2025-02-23-BT-DE/wer-waehlte-wen/")) {
-                let h = parseInt(e.data.height, 10) + 2;
-                if (iframe.id === "ts-embed-wer-waehlte-wen-2025-02-23-BT-DE") {
-                    iframe.style.height = h + "px";
+        rootElement.appendChild(iframe)
+
+        window.addEventListener('message', function (e) {
+            if (
+                e.data.contentUrl &&
+                e.data.contentUrl.includes('/wahl/embed/2025-02-23-BT-DE/wer-waehlte-wen/')
+            ) {
+                let h = parseInt(e.data.height, 10) + 2
+                if (iframe.id === 'ts-embed-wer-waehlte-wen-2025-02-23-BT-DE') {
+                    iframe.style.height = h + 'px'
                 }
             }
-        });
+        })
     }
-    
+
     const createUniqueID = function () {
-        console.log("Erzeuge einzigartige ID")
-        uniqueId = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(2, 10)
+        console.log('Erzeuge einzigartige ID')
+        uniqueId = Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, '')
+            .substring(2, 10)
     }
 
     const getAspectRatioClass = function () {
         switch (iFrameConfig.aspectRatio) {
             case '16x9':
-                return "ar-16-9"
+                return 'ar-16-9'
             case '16x7':
-                return "ar-16-7"
+                return 'ar-16-7'
             case '4x3':
-                return "ar-4-3"
+                return 'ar-4-3'
             case '100x27':
-                return "ar-100-27"
+                return 'ar-100-27'
             case '100':
-                return "ar-1-1"
+                return 'ar-1-1'
             case '9x16':
-                return "ar-9-16"
+                return 'ar-9-16'
             case '7x16':
-                return "ar-7-16"
+                return 'ar-7-16'
             default:
-                return "ar-16-9"
+                return 'ar-16-9'
         }
     }
 
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
         createUniqueID()
-        console.log("UniqueID" + uniqueId)
+        console.log('UniqueID' + uniqueId)
         if (iFrameConfig.noResponsiveIframe == 'true') {
-
             //Klassisches Iframe mit AR-Wrapper oder fester Höhe
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode, lazyLoad)
+            noResponsiveIframe = new DataWrapperNoResponsiveIframe(
+                context,
+                iFrameConfig.aspectRatio,
+                iFrameConfig.fixedHeight,
+                uniqueId,
+                embedCode,
+                lazyLoad
+            )
             noResponsiveIframe.createNoResponsiveIframe()
 
             if (iFrameConfig.refreshContent == 'true') {
-                console.log("contentRefresher anfügen")
-                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, false)
+                console.log('contentRefresher anfügen')
+                contentRefresher = new DataWrapperContentRefresher(
+                    context,
+                    uniqueId,
+                    iFrameConfig.refreshIntervall,
+                    false
+                )
                 contentRefresher.createRefresher()
             }
-
-        }
-        else {
+        } else {
             if (iFrameConfig.webcomponent == 'true') {
-
                 // Webcomponent
                 const divTag = document.createElement('div')
                 divTag.id = 'datawrapper-chart-' + uniqueId
@@ -278,13 +282,16 @@ const ExternalService = function (context) {
                 divTag.appendChild(noScriptTag)
 
                 if (iFrameConfig.refreshContent == 'true') {
-                    console.log("contentRefresher anfügen")
-                    contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, true)
+                    console.log('contentRefresher anfügen')
+                    contentRefresher = new DataWrapperContentRefresher(
+                        context,
+                        uniqueId,
+                        iFrameConfig.refreshIntervall,
+                        true
+                    )
                     contentRefresher.createRefresher()
                 }
-            }
-            else {
-
+            } else {
                 //Responsives Iframe
                 var iframe = document.createElement('iframe')
                 //Auflösen nach Tailwind-Klassen //dataWrapper-embed
@@ -297,7 +304,7 @@ const ExternalService = function (context) {
                 iframe.src = embedCode
                 iframe.id = 'datawrapper-chart-' + uniqueId
                 if (lazyLoad) {
-                    iframe.loading = "lazy";
+                    iframe.loading = 'lazy'
                 }
                 rootElement.insertBefore(iframe, null)
 
@@ -307,14 +314,80 @@ const ExternalService = function (context) {
                     true
                 )
                 if (iFrameConfig.refreshContent == 'true') {
-                    console.log("contentRefresher anfügen")
-                    contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, false)
+                    console.log('contentRefresher anfügen')
+                    contentRefresher = new DataWrapperContentRefresher(
+                        context,
+                        uniqueId,
+                        iFrameConfig.refreshIntervall,
+                        false
+                    )
                     contentRefresher.createRefresher()
                 }
+            }
+        }
+    }
+
+    const createTwentyThreeDegreesEmbed = function () {
+        removeDatapolicyBox()
+        const foundMatchesForSlug = embedCode.match(/embed\/([^/?]+)/)
+        const slug =
+            foundMatchesForSlug && foundMatchesForSlug.length > 1 ? foundMatchesForSlug[1] : null
+        if (slug) {
+            const script = document.createElement('script')
+            script.src = `https://app.23degrees.io/services/public/embed-code/${slug}`
+            script.type = 'text/javascript'
+
+            const css = `
+            .responsive23-${slug} {
+                width: 100%;
+                padding-top: 100%;
+            }
+
+            @media (max-width: 800px) {
+                .responsive23-${slug} {
+                padding-top: 80%;
+                }
+            }
 
+            @media (max-width: 600px) {
+                .responsive23-${slug} {
+                padding-top: 90.91%;
+                }
             }
 
+            @media (max-width: 480px) {
+                .responsive23-${slug} {
+                padding-top: 111.11%;
+                }
+            }
 
+            @media (max-width: 360px) {
+                .responsive23-${slug} {
+                padding-top: 142.86%;
+                }
+            }`
+            const style = document.createElement('style')
+            style.textContent = css
+
+            const iFrame = document.createElement('iframe')
+            iFrame.src = embedCode
+            iFrame.style.position = 'absolute'
+            iFrame.style.top = '0'
+            iFrame.style.left = '0'
+            iFrame.style.width = '100%'
+            iFrame.style.height = '100%'
+            iFrame.style.border = '0'
+            iFrame.allowFullscreen = true
+            iFrame.title = '23degrees Embed'
+            const div = document.createElement('div')
+            div.className = `responsive23-${slug}`
+            div.id = `container23-${slug}`
+            div.style.position = 'relative'
+            div.appendChild(iFrame)
+
+            rootElement.appendChild(style)
+            rootElement.appendChild(div)
+            rootElement.appendChild(script)
         }
     }
 
@@ -382,21 +455,21 @@ const ExternalService = function (context) {
         if (!document.getElementById('tiktok-js')) {
             loadScript('tiktok-js', '//www.tiktok.com/embed.js', true)
         }
-        const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}`;
-        const tiktokEmbedData = await fetch(tiktokEmbedDataUrl);
-        const tiktokEmbedDataJson = await tiktokEmbedData.json(); 
+        const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}`
+        const tiktokEmbedData = await fetch(tiktokEmbedDataUrl)
+        const tiktokEmbedDataJson = await tiktokEmbedData.json()
         replaceAnimated(rootElement, tiktokEmbedDataJson.html, false, reloadTikTokEmbed)
     }
 
-    const reloadTikTokEmbed = function() {
-        if(!tiktokOnPage.length) {
-            const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]`;
-            tiktokOnPage = Array.from(document.querySelectorAll(selector),);
+    const reloadTikTokEmbed = function () {
+        if (!tiktokOnPage.length) {
+            const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]`
+            tiktokOnPage = Array.from(document.querySelectorAll(selector))
         }
         if (typeof tiktokEmbed !== 'undefined' && tiktokOnPage.length) {
-            tiktokEmbed.lib.render(tiktokOnPage);
+            tiktokEmbed.lib.render(tiktokOnPage)
         } else {
-            reloadTikTokEmbed();
+            reloadTikTokEmbed()
         }
     }
 
@@ -429,16 +502,40 @@ const ExternalService = function (context) {
 
     const loadIframe = function () {
         console.log('load iframe ' + id)
-        const loadingAttribute = lazyLoad ? "loading='lazy'" : "";
-        iframe = "<iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
-        if (iFrameConfig.aspectRatio) {
-            iframe = "<div class='!h-full'><div class='" + getAspectRatioClass() + "'><iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
+        const loadingAttribute = lazyLoad ? "loading='lazy'" : ''
+        iframe =
+            "<iframe id='i_frame' " +
+            loadingAttribute +
+            " data-isloaded='0' src='" +
+            embedCode +
+            "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
+        if (iFrameConfig && iFrameConfig.aspectRatio) {
+            iframe =
+                "<div class='!h-full'><div class='" +
+                getAspectRatioClass() +
+                "'><iframe id='i_frame' " +
+                loadingAttribute +
+                " data-isloaded='0' src='" +
+                embedCode +
+                "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
             //TODO Weiche Animation der Inhalte
         } else {
-            if (iFrameConfig.fixedHeight) {
-                iframe = "<div style='height:" + iFrameConfig.fixedHeight + "px'><iframe data-isloaded='0' "+ loadingAttribute +" src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+            if (iFrameConfig && iFrameConfig.fixedHeight) {
+                iframe =
+                    "<div style='height:" +
+                    iFrameConfig.fixedHeight +
+                    "px'><iframe data-isloaded='0' " +
+                    loadingAttribute +
+                    " src='" +
+                    embedCode +
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
-                iframe = "<div class='!h-full'><iframe data-isloaded='0' "+ loadingAttribute +" src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                iframe =
+                    "<div class='!h-full'><iframe data-isloaded='0' " +
+                    loadingAttribute +
+                    " src='" +
+                    embedCode +
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
         }
         replaceAnimated(rootElement, iframe, false)
@@ -447,29 +544,33 @@ const ExternalService = function (context) {
     const initDataPolicy = function () {
         if (dataPolicyCheck) {
             acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
-            listen('click', handleDatapolicy, acceptButton)
+            acceptButton && listen('click', handleDatapolicy, acceptButton)
             if (settingsCookie.isSettingsCookieExistent(id)) {
-                console.log("Dienst " + id + " ist im Cookie enthalten und hat den Wert " + settingsCookie.isSettingsCookieAccepted(id))
+                console.log(
+                    'Dienst ' +
+                        id +
+                        ' ist im Cookie enthalten und hat den Wert ' +
+                        settingsCookie.isSettingsCookieAccepted(id)
+                )
                 if (settingsCookie.isSettingsCookieAccepted(id)) {
-                    console.log("Lade den Dienst")
-                    loadServiceWithDataPolicyButton();
-                }
-                else {
-                    console.log("Zeige Datapolicy-Box")
-                    dataPolicyBox.style.visibility = 'visible';
-                }
-            }
-            else {
-                console.log("Dienst " + id + " ist im Cookie nicht enthalten, prüfe daher den Default")
-                if (document.getElementById(id).getAttribute("data-whitelist") == "true") {
-                    console.log("Ist per Default eingeschaltet")
-                    console.log("Lade den Dienst")
-                    loadServiceWithDataPolicyButton();
+                    console.log('Lade den Dienst')
+                    loadServiceWithDataPolicyButton()
+                } else {
+                    console.log('Zeige Datapolicy-Box')
+                    dataPolicyBox.style.visibility = 'visible'
                 }
-                else {
-                    console.log("Ist per Default ausgeschaltet")
-                    console.log("Zeige Datapolicy-Box")
-                    dataPolicyBox.style.visibility = 'visible';
+            } else {
+                console.log(
+                    'Dienst ' + id + ' ist im Cookie nicht enthalten, prüfe daher den Default'
+                )
+                if (document.getElementById(id).getAttribute('data-whitelist') == 'true') {
+                    console.log('Ist per Default eingeschaltet')
+                    console.log('Lade den Dienst')
+                    loadServiceWithDataPolicyButton()
+                } else {
+                    console.log('Ist per Default ausgeschaltet')
+                    console.log('Zeige Datapolicy-Box')
+                    dataPolicyBox.style.visibility = 'visible'
                 }
             }
             listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)

package/dist/views/components/external-service/external_service_with_datapolicy_check.hbs

@@ -2,7 +2,7 @@
         {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}   
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
                 "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
             {{~> components/external-service/components/external_service_data_policy ~}}
         </div>

package/dist/views_static/components/external-service/external_service_with_datapolicy_check.hbs

@@ -2,7 +2,7 @@
         {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}   
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
                 "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
             {{~> components/external-service/components/external_service_data_policy ~}}
         </div>

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.123.1",
+  "version": "1.123.2",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/fixtures/content/copytext/copytext_externalservice.json

@@ -107,10 +107,29 @@
                     }
                 }
             }
+        },
+        {
+            "isHeadline": true,
+            "text": "23Degrees"
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "paragraphBoxItem": {
+                "isExternalService": true,
+                "toModel": {
+                    "externalService": {
+                        "@->jsoninclude": "external-service/external_service.inc.json",
+                        "@->contentpath": "23degrees"
+                    }
+                }
+            }
         }
     ],
     "dataPolicy": {
         "serviceList": [
+            { "key": "23degrees", "value": "23Degrees (Kommunalwahl 2026)" },
             { "key": "ard_mediathek", "value": "ARD Mediathek (Video)" },
             { "key": "arte_concert", "value": "Arte Concert" },
             { "key": "arte_concert_new", "value": "Arte Concert 2.0" },

package/src/assets/fixtures/external-service/external_service.inc.json

@@ -1,4 +1,18 @@
 {
+    "23degrees": {
+        "externalServiceConfig": {
+            "isWhitelisted": true,
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "23degrees",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "23degrees (Kommunalwahl 2026)"
+        },
+        "serviceUrl": "https://app.23degrees.io/embed/Qbk0sdqMq9V7oZj0-bar-horizontal-test-parametrisierung-and?filter=JTdCJTIyYTAlMjIlM0ElMjJTdWx6YSUyMiU3RA==",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
     "360Grad": {
         "externalServiceConfig": {
             "isWhitelisted": true,

package/src/assets/fixtures/external-service/external_service.json

@@ -127,6 +127,15 @@
             "@->contentpath": "Flourish"
         }
     },
+    "twentyThreeDegrees": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "23degrees"
+        }
+    },
     "Giphy": {
         "config": {
             "useAsSnapshot": false

package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"TikTok"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"tiktok","externalServiceEmbedType":"js","externalServiceName":"TikTok"},"serviceUrl":"https://www.tiktok.com/@hessenschau/video/7497190033804283158","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"tiktok","externalServiceEmbedType":"js","externalServiceName":"TikTok"},"serviceUrl":"https://www.tiktok.com/@ratingmyfood.ffm/video/7488362181789158658","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Instagram"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"tiktok","value":"TikTok"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"TikTok"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"tiktok","externalServiceEmbedType":"js","externalServiceName":"TikTok"},"serviceUrl":"https://www.tiktok.com/@hessenschau/video/7497190033804283158","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"tiktok","externalServiceEmbedType":"js","externalServiceName":"TikTok"},"serviceUrl":"https://www.tiktok.com/@ratingmyfood.ffm/video/7488362181789158658","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Instagram"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"23Degrees"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"23degrees","externalServiceEmbedType":"js","externalServiceName":"23degrees (Kommunalwahl 2026)"},"serviceUrl":"https://app.23degrees.io/embed/Qbk0sdqMq9V7oZj0-bar-horizontal-test-parametrisierung-and?filter=JTdCJTIyYTAlMjIlM0ElMjJTdWx6YSUyMiU3RA==","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"23degrees","value":"23Degrees (Kommunalwahl 2026)"},{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"tiktok","value":"TikTok"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}

package/src/stories/views/components/external-service/externalServiceDs.feature.js

@@ -9,7 +9,7 @@ import {
     loadScript,
     removeScript,
     replaceAnimated,
-    requestTimeout
+    requestTimeout,
 } from 'hrQuery'
 
 const ExternalService = function (context) {
@@ -36,7 +36,6 @@ const ExternalService = function (context) {
         isExternalServiceLoaded = false,
         tiktokOnPage = []
 
-
     const testDOMElements = function () {
         console.log(rootElement)
         console.log(rootParent)
@@ -78,6 +77,9 @@ const ExternalService = function (context) {
         switch (embedType) {
             case 'js':
                 switch (id) {
+                    case '23degrees':
+                        createTwentyThreeDegreesEmbed()
+                        break
                     case 'facebook-post':
                         createFacebookEmbed()
                         break
@@ -86,7 +88,7 @@ const ExternalService = function (context) {
                         break
                     case 'tiktok':
                         createTikTokEmbed()
-                        break    
+                        break
                     case 'twitter':
                         createTwitterEmbed()
                         break
@@ -135,28 +137,16 @@ const ExternalService = function (context) {
         gemeindewahlergebnis.createErgebnis()
     }
     const createWahlOMatEuwaEmbed = function () {
-
         const divTag = document.createElement('div')
         divTag.id = 'wahl-o-mat-europawahl-2024'
         rootElement.insertBefore(divTag, null)
-        loadScript(
-            'wahl-o-mat-js',
-            'https://static.hr.de/wahl-o-mat/embed.js',
-            true
-        )
-
+        loadScript('wahl-o-mat-js', 'https://static.hr.de/wahl-o-mat/embed.js', true)
     }
     const createWahlOMatButawaEmbed = function () {
-
         const divTag = document.createElement('div')
         divTag.id = 'wahl-o-mat-bundestagswahl-2025'
         rootElement.insertBefore(divTag, null)
-        loadScript(
-            'wahl-o-mat-js',
-            'https://static.hr.de/wahl-o-mat/bundestagswahl/embed.js',
-            true
-        )
-
+        loadScript('wahl-o-mat-js', 'https://static.hr.de/wahl-o-mat/bundestagswahl/embed.js', true)
     }
 
     const createWahlEmbed = function () {
@@ -179,86 +169,100 @@ const ExternalService = function (context) {
     }
 
     const werWaehlteWenEmbed = function () {
-        let iframe = document.createElement('iframe');
-        let cleanUrl;
-        const parts = embedCode.split('*');
+        let iframe = document.createElement('iframe')
+        let cleanUrl
+        const parts = embedCode.split('*')
         if (parts.length === 2) {
-            const params = parts[1].split(' ');
-            cleanUrl = parts[0].trim();
+            const params = parts[1].split(' ')
+            cleanUrl = parts[0].trim()
             for (const param of params) {
-                const [key, value] = param.split('=');
+                const [key, value] = param.split('=')
                 if (key === 'id') {
-                    iframe.id = value;
+                    iframe.id = value
                 } else {
-                    iframe.setAttribute(key, value);
+                    iframe.setAttribute(key, value)
                 }
             }
         }
 
-        iframe.src = cleanUrl;
-        iframe.style.width = "100%";
-        iframe.style.border = "0";
+        iframe.src = cleanUrl
+        iframe.style.width = '100%'
+        iframe.style.border = '0'
         if (lazyLoad) {
-            iframe.loading = "lazy";
+            iframe.loading = 'lazy'
         }
-        rootElement.appendChild(iframe);
-
-        window.addEventListener("message", function (e) {
-            if (e.data.contentUrl && e.data.contentUrl.includes("/wahl/embed/2025-02-23-BT-DE/wer-waehlte-wen/")) {
-                let h = parseInt(e.data.height, 10) + 2;
-                if (iframe.id === "ts-embed-wer-waehlte-wen-2025-02-23-BT-DE") {
-                    iframe.style.height = h + "px";
+        rootElement.appendChild(iframe)
+
+        window.addEventListener('message', function (e) {
+            if (
+                e.data.contentUrl &&
+                e.data.contentUrl.includes('/wahl/embed/2025-02-23-BT-DE/wer-waehlte-wen/')
+            ) {
+                let h = parseInt(e.data.height, 10) + 2
+                if (iframe.id === 'ts-embed-wer-waehlte-wen-2025-02-23-BT-DE') {
+                    iframe.style.height = h + 'px'
                 }
             }
-        });
+        })
     }
-    
+
     const createUniqueID = function () {
-        console.log("Erzeuge einzigartige ID")
-        uniqueId = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(2, 10)
+        console.log('Erzeuge einzigartige ID')
+        uniqueId = Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, '')
+            .substring(2, 10)
     }
 
     const getAspectRatioClass = function () {
         switch (iFrameConfig.aspectRatio) {
             case '16x9':
-                return "ar-16-9"
+                return 'ar-16-9'
             case '16x7':
-                return "ar-16-7"
+                return 'ar-16-7'
             case '4x3':
-                return "ar-4-3"
+                return 'ar-4-3'
             case '100x27':
-                return "ar-100-27"
+                return 'ar-100-27'
             case '100':
-                return "ar-1-1"
+                return 'ar-1-1'
             case '9x16':
-                return "ar-9-16"
+                return 'ar-9-16'
             case '7x16':
-                return "ar-7-16"
+                return 'ar-7-16'
             default:
-                return "ar-16-9"
+                return 'ar-16-9'
         }
     }
 
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
         createUniqueID()
-        console.log("UniqueID" + uniqueId)
+        console.log('UniqueID' + uniqueId)
         if (iFrameConfig.noResponsiveIframe == 'true') {
-
             //Klassisches Iframe mit AR-Wrapper oder fester Höhe
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode, lazyLoad)
+            noResponsiveIframe = new DataWrapperNoResponsiveIframe(
+                context,
+                iFrameConfig.aspectRatio,
+                iFrameConfig.fixedHeight,
+                uniqueId,
+                embedCode,
+                lazyLoad
+            )
             noResponsiveIframe.createNoResponsiveIframe()
 
             if (iFrameConfig.refreshContent == 'true') {
-                console.log("contentRefresher anfügen")
-                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, false)
+                console.log('contentRefresher anfügen')
+                contentRefresher = new DataWrapperContentRefresher(
+                    context,
+                    uniqueId,
+                    iFrameConfig.refreshIntervall,
+                    false
+                )
                 contentRefresher.createRefresher()
             }
-
-        }
-        else {
+        } else {
             if (iFrameConfig.webcomponent == 'true') {
-
                 // Webcomponent
                 const divTag = document.createElement('div')
                 divTag.id = 'datawrapper-chart-' + uniqueId
@@ -278,13 +282,16 @@ const ExternalService = function (context) {
                 divTag.appendChild(noScriptTag)
 
                 if (iFrameConfig.refreshContent == 'true') {
-                    console.log("contentRefresher anfügen")
-                    contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, true)
+                    console.log('contentRefresher anfügen')
+                    contentRefresher = new DataWrapperContentRefresher(
+                        context,
+                        uniqueId,
+                        iFrameConfig.refreshIntervall,
+                        true
+                    )
                     contentRefresher.createRefresher()
                 }
-            }
-            else {
-
+            } else {
                 //Responsives Iframe
                 var iframe = document.createElement('iframe')
                 //Auflösen nach Tailwind-Klassen //dataWrapper-embed
@@ -297,7 +304,7 @@ const ExternalService = function (context) {
                 iframe.src = embedCode
                 iframe.id = 'datawrapper-chart-' + uniqueId
                 if (lazyLoad) {
-                    iframe.loading = "lazy";
+                    iframe.loading = 'lazy'
                 }
                 rootElement.insertBefore(iframe, null)
 
@@ -307,14 +314,80 @@ const ExternalService = function (context) {
                     true
                 )
                 if (iFrameConfig.refreshContent == 'true') {
-                    console.log("contentRefresher anfügen")
-                    contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall, false)
+                    console.log('contentRefresher anfügen')
+                    contentRefresher = new DataWrapperContentRefresher(
+                        context,
+                        uniqueId,
+                        iFrameConfig.refreshIntervall,
+                        false
+                    )
                     contentRefresher.createRefresher()
                 }
+            }
+        }
+    }
+
+    const createTwentyThreeDegreesEmbed = function () {
+        removeDatapolicyBox()
+        const foundMatchesForSlug = embedCode.match(/embed\/([^/?]+)/)
+        const slug =
+            foundMatchesForSlug && foundMatchesForSlug.length > 1 ? foundMatchesForSlug[1] : null
+        if (slug) {
+            const script = document.createElement('script')
+            script.src = `https://app.23degrees.io/services/public/embed-code/${slug}`
+            script.type = 'text/javascript'
+
+            const css = `
+            .responsive23-${slug} {
+                width: 100%;
+                padding-top: 100%;
+            }
+
+            @media (max-width: 800px) {
+                .responsive23-${slug} {
+                padding-top: 80%;
+                }
+            }
 
+            @media (max-width: 600px) {
+                .responsive23-${slug} {
+                padding-top: 90.91%;
+                }
             }
 
+            @media (max-width: 480px) {
+                .responsive23-${slug} {
+                padding-top: 111.11%;
+                }
+            }
 
+            @media (max-width: 360px) {
+                .responsive23-${slug} {
+                padding-top: 142.86%;
+                }
+            }`
+            const style = document.createElement('style')
+            style.textContent = css
+
+            const iFrame = document.createElement('iframe')
+            iFrame.src = embedCode
+            iFrame.style.position = 'absolute'
+            iFrame.style.top = '0'
+            iFrame.style.left = '0'
+            iFrame.style.width = '100%'
+            iFrame.style.height = '100%'
+            iFrame.style.border = '0'
+            iFrame.allowFullscreen = true
+            iFrame.title = '23degrees Embed'
+            const div = document.createElement('div')
+            div.className = `responsive23-${slug}`
+            div.id = `container23-${slug}`
+            div.style.position = 'relative'
+            div.appendChild(iFrame)
+
+            rootElement.appendChild(style)
+            rootElement.appendChild(div)
+            rootElement.appendChild(script)
         }
     }
 
@@ -382,21 +455,21 @@ const ExternalService = function (context) {
         if (!document.getElementById('tiktok-js')) {
             loadScript('tiktok-js', '//www.tiktok.com/embed.js', true)
         }
-        const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}`;
-        const tiktokEmbedData = await fetch(tiktokEmbedDataUrl);
-        const tiktokEmbedDataJson = await tiktokEmbedData.json(); 
+        const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}`
+        const tiktokEmbedData = await fetch(tiktokEmbedDataUrl)
+        const tiktokEmbedDataJson = await tiktokEmbedData.json()
         replaceAnimated(rootElement, tiktokEmbedDataJson.html, false, reloadTikTokEmbed)
     }
 
-    const reloadTikTokEmbed = function() {
-        if(!tiktokOnPage.length) {
-            const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]`;
-            tiktokOnPage = Array.from(document.querySelectorAll(selector),);
+    const reloadTikTokEmbed = function () {
+        if (!tiktokOnPage.length) {
+            const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]`
+            tiktokOnPage = Array.from(document.querySelectorAll(selector))
         }
         if (typeof tiktokEmbed !== 'undefined' && tiktokOnPage.length) {
-            tiktokEmbed.lib.render(tiktokOnPage);
+            tiktokEmbed.lib.render(tiktokOnPage)
         } else {
-            reloadTikTokEmbed();
+            reloadTikTokEmbed()
         }
     }
 
@@ -429,16 +502,40 @@ const ExternalService = function (context) {
 
     const loadIframe = function () {
         console.log('load iframe ' + id)
-        const loadingAttribute = lazyLoad ? "loading='lazy'" : "";
-        iframe = "<iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
-        if (iFrameConfig.aspectRatio) {
-            iframe = "<div class='!h-full'><div class='" + getAspectRatioClass() + "'><iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
+        const loadingAttribute = lazyLoad ? "loading='lazy'" : ''
+        iframe =
+            "<iframe id='i_frame' " +
+            loadingAttribute +
+            " data-isloaded='0' src='" +
+            embedCode +
+            "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
+        if (iFrameConfig && iFrameConfig.aspectRatio) {
+            iframe =
+                "<div class='!h-full'><div class='" +
+                getAspectRatioClass() +
+                "'><iframe id='i_frame' " +
+                loadingAttribute +
+                " data-isloaded='0' src='" +
+                embedCode +
+                "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
             //TODO Weiche Animation der Inhalte
         } else {
-            if (iFrameConfig.fixedHeight) {
-                iframe = "<div style='height:" + iFrameConfig.fixedHeight + "px'><iframe data-isloaded='0' "+ loadingAttribute +" src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+            if (iFrameConfig && iFrameConfig.fixedHeight) {
+                iframe =
+                    "<div style='height:" +
+                    iFrameConfig.fixedHeight +
+                    "px'><iframe data-isloaded='0' " +
+                    loadingAttribute +
+                    " src='" +
+                    embedCode +
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
-                iframe = "<div class='!h-full'><iframe data-isloaded='0' "+ loadingAttribute +" src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                iframe =
+                    "<div class='!h-full'><iframe data-isloaded='0' " +
+                    loadingAttribute +
+                    " src='" +
+                    embedCode +
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
         }
         replaceAnimated(rootElement, iframe, false)
@@ -447,29 +544,33 @@ const ExternalService = function (context) {
     const initDataPolicy = function () {
         if (dataPolicyCheck) {
             acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
-            listen('click', handleDatapolicy, acceptButton)
+            acceptButton && listen('click', handleDatapolicy, acceptButton)
             if (settingsCookie.isSettingsCookieExistent(id)) {
-                console.log("Dienst " + id + " ist im Cookie enthalten und hat den Wert " + settingsCookie.isSettingsCookieAccepted(id))
+                console.log(
+                    'Dienst ' +
+                        id +
+                        ' ist im Cookie enthalten und hat den Wert ' +
+                        settingsCookie.isSettingsCookieAccepted(id)
+                )
                 if (settingsCookie.isSettingsCookieAccepted(id)) {
-                    console.log("Lade den Dienst")
-                    loadServiceWithDataPolicyButton();
-                }
-                else {
-                    console.log("Zeige Datapolicy-Box")
-                    dataPolicyBox.style.visibility = 'visible';
-                }
-            }
-            else {
-                console.log("Dienst " + id + " ist im Cookie nicht enthalten, prüfe daher den Default")
-                if (document.getElementById(id).getAttribute("data-whitelist") == "true") {
-                    console.log("Ist per Default eingeschaltet")
-                    console.log("Lade den Dienst")
-                    loadServiceWithDataPolicyButton();
+                    console.log('Lade den Dienst')
+                    loadServiceWithDataPolicyButton()
+                } else {
+                    console.log('Zeige Datapolicy-Box')
+                    dataPolicyBox.style.visibility = 'visible'
                 }
-                else {
-                    console.log("Ist per Default ausgeschaltet")
-                    console.log("Zeige Datapolicy-Box")
-                    dataPolicyBox.style.visibility = 'visible';
+            } else {
+                console.log(
+                    'Dienst ' + id + ' ist im Cookie nicht enthalten, prüfe daher den Default'
+                )
+                if (document.getElementById(id).getAttribute('data-whitelist') == 'true') {
+                    console.log('Ist per Default eingeschaltet')
+                    console.log('Lade den Dienst')
+                    loadServiceWithDataPolicyButton()
+                } else {
+                    console.log('Ist per Default ausgeschaltet')
+                    console.log('Zeige Datapolicy-Box')
+                    dataPolicyBox.style.visibility = 'visible'
                 }
             }
             listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)

package/src/stories/views/components/external-service/external_service.stories.js

@@ -10,8 +10,6 @@ hbsTemplates['noDatapolicyCheck'] = handlebars.compile(`
     {{> components/external-service/external_service_with_datapolicy_check }}   
   `)
 
-
-
 const TemplatePageExternalService = (args) => {
     return hbsTemplates['default']({ ...args })
 }
@@ -34,7 +32,7 @@ export default {
             iframeHeight: 400,
         },
         chromatic: {
-            disableSnapshot: true
+            disableSnapshot: true,
         },
     },
 }
@@ -62,7 +60,7 @@ export const ExterneDiensteDatawrapperNoResponsiveFixedHeight = {
 export const ExterneDiensteDatawrapperNoResponsiveAspectRatio = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Aspect Ratio)',
-    args: fixtures.Datawrapper_CDN_NoResponsiveAspectRatio.args
+    args: fixtures.Datawrapper_CDN_NoResponsiveAspectRatio.args,
 }
 export const ExterneDiensteDatawrapperContentRefresher = {
     render: TemplatePageExternalService.bind({}),
@@ -75,6 +73,12 @@ export const WahlGemeindeErgebnis = {
     args: fixtures.Wahl_Gemeinde_Ergebnis.args,
 }
 
+export const twentyThreeDegrees = {
+    render: TemplatePageExternalService.bind({}),
+    name: '23 Degrees (Kommunalwahl 2026)',
+    args: fixtures.twentyThreeDegrees.args,
+}
+
 export const Snapshot = {
     render: snapshotTemplate.bind({}),
     name: 'Snapshot',
@@ -82,5 +86,5 @@ export const Snapshot = {
     args: fixtures,
     parameters: {
         chromatic: { disableSnapshot: false },
-    }
+    },
 }

package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs

@@ -2,7 +2,7 @@
         {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}   
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
                 "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
             {{~> components/external-service/components/external_service_data_policy ~}}
         </div>

package/src/stories/views/components/external-service/fixtures/external_service.json

@@ -1 +1 @@
-{"config":{"template":"default","layout":"grid","renderSnapshotsWrapper":false},"ARD_Mediathek_Video":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"ARTE_concert_new":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Datawrapper_CDN_NoResponsiveFixedHeightReload":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":true,"setTimeForReload":"300","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveFixedHeight":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveAspectRatio":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":"4x3"}},"Datawrapper_CDN":{"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Esri":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}},"Facebook":{"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Flourish":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Giphy":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Instagram":{"config":{"useAsSnapshot":true},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Twitter":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Vimeo":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube_360":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}},"Wahl_Gemeinde_Ergebnis":{"config":{"template":"noDatapolicyCheck","useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}
+{"config":{"template":"default","layout":"grid","renderSnapshotsWrapper":false},"ARD_Mediathek_Video":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"ARTE_concert_new":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Datawrapper_CDN_NoResponsiveFixedHeightReload":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":true,"setTimeForReload":"300","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveFixedHeight":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveAspectRatio":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":"4x3"}},"Datawrapper_CDN":{"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Esri":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}},"Facebook":{"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Flourish":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"twentyThreeDegrees":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"23degrees","externalServiceEmbedType":"js","externalServiceName":"23degrees (Kommunalwahl 2026)"},"serviceUrl":"https://app.23degrees.io/embed/Qbk0sdqMq9V7oZj0-bar-horizontal-test-parametrisierung-and?filter=JTdCJTIyYTAlMjIlM0ElMjJTdWx6YSUyMiU3RA==","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Giphy":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Instagram":{"config":{"useAsSnapshot":true},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Twitter":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Vimeo":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube_360":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}},"Wahl_Gemeinde_Ergebnis":{"config":{"template":"noDatapolicyCheck","useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}