Einbindung via iFrame

Interalp Touristik GmbH

Mit der WebBox - Buchungsmaske können Besucher direkt auf der Webseite online buchen. So integrieren Sie die WebBox - Buchungsmaske perfekt in eine Unterseite der Webseite.

Sie benötigen für den Einbau:

Kunden-Link: Ihr Link zur WebBox

Einbau Empfehlung:

Die WebBox - Buchungsmaske sollte in einer neuen Unterseite "Buchen" oder "Online Buchen" eingebaut werden. Ist bereits schon ein Buchungssystem in der Webseite vorhanden, sollte dies gegen die WebBox - Buchungsmaske getauscht werden.

Die WebBox - Buchungsmaske ist responsive und passt sich automatisch an Ihre Inhaltsbreite an. Zudem können Farben definiert werden. Teilen Sie uns Ihre gewünschten Farbcodes mit und wir passen die Maske für Sie an.

Fügen Sie dazu diesen Code auf der neuen oder bereits vorhandenen Unterseite an der Stelle in der Unterseite ein, an der die WebBox - Buchungsmaske geladen werden soll:

Einbindung Google Analytics

Der Google Anlytics Trackingcode muss zwischen <HEAD></HEAD> eingebunden werden. Damit das cross domain tracking funktioniert, sollten die WebBox Domain (interalp.at) sowie die eigene Domain (meine-domain.at) in der Verweis-Ausschlussliste aufgenommen werden.

1. Melden Sie sich in Ihrem Analytics-Konto an.
2. Klicken Sie in der Menüleiste oben auf einer Seite auf den Tab Verwalten.
3. Wählen Sie mit dem Drop-down-Menü in der Spalte Konto das Analytics-Konto aus, das die Property enthält, mit der Sie arbeiten möchten.
4. Verwenden Sie das Drop-down-Menü in der Spalte Property, um eine Property auszuwählen.
5. Klicken Sie auf Tracking-Informationen.
6. Klicken Sie auf Verweis-Ausschlussliste.
7. Klicken Sie auf + VERWEISAUSSCHLUSS HINZUFÜGEN, um eine Domain hinzuzufügen.
8. Geben Sie den Namen der Domain ein.
9. Klicken Sie zum Speichern auf Erstellen.

<iframe id="wb-widget" data-src="[IHR_LINK_ZUR_WEBBOX]?mode=iframe" src="[IHR_LINK_ZUR_WEBBOX]?mode=iframe" style="height: 586px; overflow: hidden; width: 100%;" scrolling="no"></iframe>
<script type="text/javascript">

var UA_Id = "[GA_Code]";
var waitCount = 0;
var headerHeight = 0,
    webBoxElement = document.getElementById("wb-widget"),
    webBoxMethod = window.addEventListener ? "addEventListener" : "attachEvent",
    webBoxListener = window[webBoxMethod],
    webBoxMessage = webBoxMethod == "attachEvent" ? "onmessage" : "message",
    webBoxParams = "";


webBoxListener(webBoxMessage, function (e) {

    if (e.data !== "" && e.origin.indexOf("webbox") > -1) {
        document.getElementById("wb-widget").style.height = parseInt(e.data.height) + "px";
        if (e.data.offsetTop !== undefined) {
            window.scrollTo(0, parseInt(e.data.offsetTop) + (webBoxElement.getBoundingClientRect().top - document.body.getBoundingClientRect().top) - headerHeight);
        } else if (e.data.scroll !== undefined) {
            setTimeout(function () {
                window.scrollTo(0, window.scrollY + 1);
            }, 500);
        };
    };

}, false);

window.onscroll = function () {

    var elementPosTop = webBoxElement.getBoundingClientRect().top + window.pageYOffset - headerHeight,
        elementHeight = webBoxElement.offsetHeight,
        windowScrollTop = window.pageYOffset,
        topValue = windowScrollTop - elementPosTop;

    if (windowScrollTop < elementPosTop) {
        topValue = 0;
    };

    webBoxElement.contentWindow.postMessage({
        "height": elementHeight,
        "top": topValue
    }, "*");

};

window.onload = function () {

    var elementPosTop = webBoxElement.getBoundingClientRect().top + window.pageYOffset - headerHeight,
        elementHeight = webBoxElement.offsetHeight,
        windowScrollTop = window.pageYOffset,
        topValue = windowScrollTop - elementPosTop;

    if (windowScrollTop < elementPosTop) {
        topValue = 0;
    };

    webBoxElement.contentWindow.postMessage({
        "height": elementHeight,
        "top": topValue
    }, "*");

};

function getURLParameter(name) {

    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);

    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

};

if (getURLParameter("Op") !== "") webBoxParams = "&Op=" + getURLParameter("Op");
if (getURLParameter("DateFrom") !== "") webBoxParams += "&DateFrom=" + getURLParameter("DateFrom");
if (getURLParameter("DateTo") !== "") webBoxParams += "&DateTo=" + getURLParameter("DateTo");
if (getURLParameter("Room") !== "") webBoxParams += "&Room=" + getURLParameter("Room");
if (getURLParameter("Package") !== "") webBoxParams += "&Package=" + getURLParameter("Package");

if (webBoxParams.length > 0) {
    webBoxElement.setAttribute("data-src", webBoxElement.getAttribute("data-src") + webBoxParams);
}

// Check if Google Analytics is already loaded
function check_ga() {

    if (typeof gtag !== "undefined") {
        gtag('get', UA_Id, 'client_id', (clientId) => {
            webBoxElement.setAttribute("src", webBoxElement.getAttribute("data-src") + "&_ga=" + clientId);
            console.log("Google Analytics gtag.js found with clientID:" + clientId);
        });
    } else if (typeof ga !== "undefined") {
        ga(function (tracker) {

            // If tracker is undefined we try to check with ga.getAll()
            if (tracker === undefined) {
                var tracker2 = ga.getAll()[0];
                var clientId = tracker2.get('clientId');
                console.log("Google Tag Manager found with clientId: " + clientId);

                webBoxElement.setAttribute("src", webBoxElement.getAttribute("data-src") + "&_ga=" + clientId);
            } else {
                var clientId = tracker.get('clientId');
                console.log("Google Analytics ga.js found with clientID: " + clientId)
                webBoxElement.setAttribute("src", webBoxElement.getAttribute("data-src") + "&_ga=" + clientId);
            }
        });
    } else {

        // Wait max. 1,5 seconds until we load the webbox without Google Analytics
        if (waitCount > 3) {
            console.log("No Google Analytics found.");
            webBoxElement.setAttribute("src", webBoxElement.getAttribute("data-src"));
        } else {
            waitCount += 1;
            setTimeout(check_ga, 500);
        }
    }
}

// Check if Google Anyltics is already loaded
check_ga();
</script>

Ersetzen Sie folgende Placeholder:
[IHR_LINK_ZUR_WEBBOX] - Link zu Ihrer WebBox
[GA_Code] - Google Analytics Code (UA-12345678-9)
[HEADER_HÖHE] - Höhe des Headers (wenn Header fixiert, ansonsten 0 einfügen)
Beispiel: https://backstage.at1.webbox.interalp.at

Individueller Quickbucher mit Parameter zur Datumsübergabe

Sollte in der Website ein Quickbucher bestehen, in dem der Gast in jeder Seite sein Wunschdatum eingeben kann und zur Suche in Online Bucher weitergeleitet wird muss das Datum mittels folgendem Parameter weitergegeben werden:

Parameter

Name: Op || Wert: SetState
Name: DateFrom || Wert: [Anreisedatum] || Format: 2016-04-08
Name: DateTo || Wert: [Abreisedatum] || Format: 2016-04-08