Embed Code

Use your expo-IP instance as part of your own WebSite with the expo-IP Embed Code.

Embedding expo-IP instances in external websites

Trade fairs can be integrated into external websites via iFrame or as an overlay (modal).
Two steps are required for this:

1. Integrate embed code into the external website
2. Set settings: "Allow embedding of expo-IP in other websites".

1. integrate embed code into the external website

First, the following code must be inserted into the web page:

<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 the first line must be xxx.expo-ip.com can be exchanged for the URL of your trade fair.

For embedding in an iFrame, the following container is added anywhere on the web page:

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

The snippet then loads the trade fair into this container when the page is called up. The size is customisable.

Alternatively, a button can be integrated instead of the iFrame. When clicking on the button, the trade fair opens in a modal window (overlay).

For this option, the following code must be included:

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

2. set settings: "Allow embedding of expo-IP in other websites".

In the backend you have to activate the setting "Allow embedding of expo-IP in other websites" under Fair -> Preferences by ticking the checkbox.

Background

In order to be able to embed the fair in other websites, the cookies must also be able to be transmitted to this website. This can pose a security risk.

The setting "Embed fairs" changes the cookie settings from sameSite=Strict; Secure; to sameSite=None; Secure; and thus enables embedding.

Further information on this topic can be found, for example, at https://web.dev/samesite-cookies-explained/.