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…“) |
|||
| 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> | ||
Version vom 29. Juni 2024, 10:28 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')">
