Einbindung per Javascript

Aus Wiki
Version vom 29. Juni 2024, 11:32 Uhr von Christian Petersen (Diskussion | Beiträge)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Manchmal ist es einfach eleganter, die Buchungsfunktion und den Kalender per Javascript einzubauen statt einen "iframe" einzubinden. Den Code für den Javascript-Einbau finden Sie unter "Website--> Belegungskalender und Buchung in vorhandene Website einbinden".

Hier ein Beispielcode:

<script src='https://api.more-bookings.com/public_load_calendar_booking?object_id=ag1mZXdveWllbGRtZ210chwLEhFjdXN0b21lcl9wcm9wZXJ0eSIFZGVtbzEM&lang=de'></script>
<div id='moreBookingsCal'></div>

Wenn Sie den Einbau-Ort frei bestimmen können, sollten Sie den Teil von <script> bis </script> im Kopf der Seite (Head) unterbringen. Das "div" dann dort, so der Kalender erscheinen soll. Wenn Sie nicht auf den Kopf zugreifen können, dann geht es meistens auch, indem Sie beides dort einbinden, wo der Kalender erscheinen soll.

Nach dem Einbau erscheint auf Ihrer Website ein Kalender(1), eine Legende, eine Preisliste(2), ein Buchungs-Button und ein Kontakt-Button. Zusätzlich können Sie an anderer Stelle weitere Buchungs- oder Kontakt-Buttons unterbringen (4)

Die Beschriftung des Buchungs- und Kontakt-Buttons lässt sich anpassen, indem Sie unter "Einstellungen" andere Texte eintragen. Sie können dort auch beide Buttons ausschalten. Dies macht dann Sinn, wenn Sie diese Schaltflächen an anderer Stelle unterbringen wollen. Die Preisliste lässt sich dort auch ein- und ausschalten.

Weiterhin können Sie beim Design des Kalenders aus verschiedenen Möglichkeiten auswählen. Spielen Sie gerne mit verschiedenen Optionen herum.

Einstellungen Kalender Javascript-Einbau

Die unteren Buttons erzeugen Sie mit folgendem Code: Button für Buchungsfunktion:

<input type="button" value="Preisauskunft & Buchung" class="uk-button uk-width-1-1" id="buchenbutton" data-contact_intent="guest_booking" data-lang="de" data-objectkey='ag1mZXdveWllbGRtZ210chwLEhFjdXN0b21lcl9wcm9wZXJ0eSIFZGVtbzEM'  data-dialogue='modal' onclick="guest_booking2(this, 'MoreBookingsPre')">

Button für Kontaktfunktion:

<input type="button" value="Vermieter kontaktieren" class="uk-button uk-width-1-1" id="buchenbutton" data-contact_intent="contact_owner" data-lang="de" data-objectkey='ag1mZXdveWllbGRtZ210chwLEhFjdXN0b21lcl9wcm9wZXJ0eSIFZGVtbzEM'  data-dialogue='modal' onclick="guest_booking2(this, 'MoreBookingsPre')">

Natürlich können Sie auch hier die Texte frei wählen und müssen den richtigen Wert für "data-objectkey" einpflegen. Durch Veränderung des Parameters "data-lang" verändern Sie die Sprache des Buchungs- oder Kontaktdialoges.

Der Text, der nach einer erfolgreichen Buchung oder Kontaktaufnahme am Bildschirm angezeigt wird, lässt sich unter "Website-->Danke nach Gast-Buchung" anpassen.