Einbindung per Javascript: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Manchmal ist es einfach eleganter, die Buchungsfunktion und den Kalender per Javascript einzubauen statt einen "iframe" einzubinden. Den Code für den Javascr…“) |
|||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 3: | Zeile 3: | ||
Hier ein Beispielcode: | Hier ein Beispielcode: | ||
| − | < | + | <pre><script src='https://api.more-bookings.com/public_load_calendar_booking?object_id=ag1mZXdveWllbGRtZ210chwLEhFjdXN0b21lcl9wcm9wZXJ0eSIFZGVtbzEM&lang=de'></script> |
| − | </ | + | <div id='moreBookingsCal'></div> |
| + | </pre> | ||
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. | 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. | ||
| Zeile 15: | Zeile 16: | ||
Weiterhin können Sie beim Design des Kalenders aus verschiedenen Möglichkeiten auswählen. Spielen Sie gerne mit verschiedenen Optionen herum. | Weiterhin können Sie beim Design des Kalenders aus verschiedenen Möglichkeiten auswählen. Spielen Sie gerne mit verschiedenen Optionen herum. | ||
[[Datei:Einstellungen Kalender Javascript-Einbau.png|miniatur|zentriert|Einstellungen Kalender Javascript-Einbau]] | [[Datei:Einstellungen Kalender Javascript-Einbau.png|miniatur|zentriert|Einstellungen Kalender Javascript-Einbau]] | ||
| + | |||
| + | Die unteren Buttons erzeugen Sie mit folgendem Code: | ||
| + | Button für Buchungsfunktion: | ||
| + | <pre> | ||
| + | <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')"> | ||
| + | </pre> | ||
| + | |||
| + | Button für Kontaktfunktion: | ||
| + | <pre> | ||
| + | <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')"> | ||
| + | </pre> | ||
| + | |||
| + | 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. | ||
Aktuelle Version vom 29. Juni 2024, 11:32 Uhr
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.
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.
