Das Widget kann die Nutzer entweder auf eine neue Seite mit der Buchungsplattform weiterleiten oder ihnen erlauben, auf der aktuellen Seite zu buchen, indem sie das Iframe-Widget installieren. Der Installationsprozess ist schnell und einfach und mit allen Geräten wie Desktops, Tablets, Smartphones usw. kompatibel.

Nachfolgend finden Sie die Schritte zur Installation der einzelnen verfügbaren Widgets.

Text-Hyperlink

Auf neuen Tab umleiten, durch Text verlinken. Beispiel:

 

 

Fügen Sie diesen Code in den Teil des Website-Codes ein, wo Sie den Hyperlink einfügen möchten:

Knopf

Klicken Sie auf diese Schaltfläche, um das Widget auf eine neue Registerkarte umzuleiten. Beispiel:

 

 

Fügen Sie diesen Code in den Teil des Website-Codes ein, in dem die Schaltfläche erscheinen soll:

Floating-Button

Diese Schaltfläche, die das Widget auf eine neue Registerkarte umleitet, ist fest und immer sichtbar. Beispiel:

 

 

Fügen Sie diesen Code in den <body>-Tag Ihrer Website ein:

Integrierter Iframe

Schauen Sie sich das folgende Beispiel an:

 

 

Fügen Sie diesen Code in den Teil des Website-Codes ein, in dem Sie den iframe haben möchten:

Iframe + Button

Dieses Skript schaltet je nach Bildschirmgröße zwischen Iframe und Schaltfläche um. Die Schaltfläche wird auf Smartphones angezeigt, um den horizontalen Bildlauf im iframe zu vermeiden.

Fügen Sie den nachstehenden Code in den <body>-Tag Ihrer Website ein:

Link in einem an die Größe des Bildschirms angepassten Iframe (Media Queries)

Um in jedem Fall einen festen Längengrad zu vermeiden und das Scrollen zu verhindern, verwenden wir Media Queries, um es an die unterschiedlichen Bildschirmgrößen der jeweiligen Geräte anzupassen:

 

Fügen Sie die folgenden Stile vor dem </head>-Tag ein:

<style type="text/css">

.thefork{
width: 100%;
border:none;
overflow: scroll;
}
/* Media queries widget */ 
@media only screen and (max-width : 320px) { 
    .thefork{
    min-height: 840px;
    }
}
@media only screen and (min-width : 321px) and (max-width : 516px){
    .thefork{
    min-height: 650px; 
    }
}
@media only screen and (min-width : 517px) { 
    .thefork{
    min-height: 550px; 
    }
}
</style>

 

Von nun an ändert sich die Höhe des Iframes abhängig von der Breite des Bildschirms und des HTML-Blocks, der ihn enthält. Die folgende Tabelle zeigt die Beziehung der Maße.

 

Bildschirmbreite Widget-Höhe Widget-Breite
Bis zu 320px 840px 100%
Von 321 bis 516px 650px 100%
Von 517px 550px 100%