Tutorial: "target" / Element ID

Über die Erweiterung target innerhalb des settings-Objekts kann das TOSC5 Buchungswidget gezielt in ein bereits vorhandenes HTML-Element Ihrer Website eingebunden werden.

Anstatt das Widget an der Standardposition zu laden, wird es exakt in jenem Element platziert, das Sie definieren.

Verwendung von “target”

Im Parameter target geben Sie die eindeutige id des HTML-Elements an, in dem das Buchungswidget angezeigt werden soll.

Voraussetzungen

Das Ziel-Element muss bereits im DOM vorhanden sein, wenn das Widget geladen wird.
Die angegebene id darf auf der Seite nur einmal vorkommen.

Beispielcode:

...<body>
<!-- Header Ihrer Webseite -->
<div class="header">Header Element Ihrer Webseite</div>

<!-- Element in das der TOSC5 geladen werden soll -->
<div id="tosc5target"></div>

<!-- Footer Ihrer Webseite -->
<div class="footer">Footer Element Ihrer Webseite</div><!-- EinbauCode -->
<script>
window.dw = window.dw || function () { (dw.q = dw.q || []).push(arguments) };
dw(
    'settings', '9e23f320-2d0b-4bc6-a92f-8d20496c4ec2', {
        "context": {
            "serviceIds": [],
            "productIds": [],
            "packageIds": []
        },
        "lang": 'de',
        "target": 'tosc5target'
    }
);
</script>
<script async src="https://web5.deskline.net/start/ACCOWEB/9e23f320-2d0b-4bc6-a92f8d20496c4ec2/index.js"></script>
...