Embed Code

Verwenden Sie Ihre expo-IP Instanz als Bestandteil Ihrer eigenen WebSite mit dem expo-IP Embed Code.

Einbetten von expo-IP Instanzen in externe Webseiten

Messen können per iFrame oder als Overlay (Modal) in externe Webseiten eingebunden werden.
Dafür sind zwei Schritte erforderlich:

1. Einbettungscode in die externe Webseite integrieren
2. Einstellungen setzen: „Einbetten von expo-IP in andere WebSites erlauben“

1. Einbettungscode in die externe Webseite integrieren

Zunächst muss der folgende Code in die Webseite eingefügt werden:

<script>
    var exPeFair = 'xxx.expo-ip.com',
        exPeB = document.querySelector("body"),
        exPeEB = document.querySelector("#exPeEB"),
        exPeBw = document.createElement("div"),
        exPeBcb = exPeBw.cloneNode(true),
        exPeBif = document.createElement("iframe"),
        ipu = false,
        exPeGp = new URL(window.location.href),
        exPeAp;
    exPeGp = exPeGp.searchParams.get("exPeGp");
    exPeAp = '?isembed=1' + ((exPeGp == null) ? '' : '&' + decodeURIComponent(exPeGp));
    if (null == exPeEB) {
        ipu = true;
        exPeEB = exPeBw.cloneNode(true);
        exPeEB.id = 'exPeEB';
        exPeEB.className = 'ioc';
        exPeB.appendChild(exPeBw);
        var tgl_exPe = function() {
            var exPeBif = document.querySelector("#exPeEB .exPe_if");
            if (exPeB.classList.contains("exPeBshw")) {
                exPeB.classList.remove("exPeBshw");
            } else {
                exPeBif.setAttribute("src", "https://" + exPeFair + "/" + exPeAp);
                exPeB.classList.add("exPeBshw");
            }
        };
    } else {
        exPeEB.innerHTML = '';
        exPeEB.classList.add("ieip");
    }
    exPeBw.className = 'exPe_w';
    exPeBcb.className = 'exPe_cb';
    exPeBif.className = 'exPe_if';
    if (!ipu) exPeBif.setAttribute("src", "https://" + exPeFair + "/" + exPeAp);
    exPeBif.setAttribute("width", "100%");
    exPeBif.setAttribute("height", "100%");
    exPeBif.setAttribute("border", "0");
    exPeBif.setAttribute("name", "exPeBif");
    exPeBif.innerHTML = 'no iframe support';
    exPeBif.setAttribute("sandbox", "allow-downloads allow-forms allow-modals allow-scripts allow-same-origin allow-top-navigation allow-popups allow-pointer-lock");
    exPeBw.appendChild(exPeBif);
    if (ipu) {
        exPeBcb.addEventListener("click", tgl_exPe);
        exPeBcb.innerHTML = 'x';
    }
    exPeEB.appendChild(exPeBw);
    if (ipu) {
        exPeEB.appendChild(exPeBcb);
        exPeB.appendChild(exPeEB);
    }
</script>

<style>
    #exPeEB {
        display: block
    }

    #exPeEB.ieip {
        width: 100%;
        height: 50vh;
        min-height: 20em;
        overflow: hidden
    }

    #exPeEB.ioc {
        position: fixed;
        z-index: 99999;
        overflow: auto;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .7);
        transform: scale(0);
        opacity: .0;
        transition: all .2s;
        padding: 1vw;
        visibility: hidden;
        width: 1px;
        height: 1px
    }

    .exPeBshw #exPeEB {
        width: 100%;
        height: 100%
    }

    .exPeBshw #exPeEB.ioc {
        visibility: visible;
        transform: scale(1);
        opacity: 1;
        top: 0;
        left: 0
    }

    #exPeEB .exPe_w {
        width: 100%;
        height: 100%;
    }

    #exPeEB.ioc .exPe_w {
        border: 2px solid #fff
    }

    #exPeEB .exPe_cb {
        position: absolute;
        z-index: 1;
        top: 3px;
        right: 3px;
        font-size: 14px;
        width: 1.4em;
        height: 1.4em;
        background: #fff;
        color: #000;
        text-align: center;
        line-height: 1.4em;
        font-weight: bold;
        border-radius: 50%;
    }

    #exPeEB .exPe_if {
        border: 0;
    }
</style>

In der ersten Zeile muss xxx.expo-ip.com gegen die URL Ihrer Messe ausgetauscht werden.

Für die Einbettung in einem iFrame wird an beliebiger Stelle der Webseite folgender Container hinzugefügt:

<div id="exPeEB">Javascript aktivieren!</div>

Dann lädt das Snippet die Messe beim Seitenaufruf in diesen Container. Die Größe ist anpassbar.

Alternativ kann statt des iFrames ein Button eingebunden werden. Beim Klick auf den Button öffnet sich die Messe in einem modalen Fenster (Overlay).

Für diese Möglichkeit muss folgender Code eingebunden werden:

<a href="javascript:void(0);" onclick="tgl_exPe()">Messe öffnen</a>

2. Einstellungen setzen: „Einbetten von expo-IP in andere WebSites erlauben“

Im Backend müssen Sie unter Messe -> Voreinstellungen die Einstellung „Einbetten von expo-IP in andere WebSites erlauben“ einschaten, indem Sie den Haken in der Auswahlbox setzen.

Hintergrund

Um die Messe in andere Webseiten einbetten zu können, müssen die Cookies auch an diese Webseite übermittelt werden können. Das kann ein Sicherheitsrisiko darstellen.

Die Einstellung „Einbetten von Messen“ ändert die Cookie-Einstellungen von sameSite=Strict; Secure; auf sameSite=None; Secure; und ermöglicht so die Einbettung.

Weitere Informationen zu diesem Thema finden Sie z.B. unter https://web.dev/samesite-cookies-explained/