Wie kann ich den Kalender-iFrame von Smoobu in meine externe Website einbauen?
Aktualisiert
In dieser Anleitung wird erklärt, wie du den Kalender-iFrame von Smoobu in deine externe Webseite einbinden kannst, damit Besucher die Verfügbarkeit auf einen Blick sehen können. Der Kalender ist ein schreibgeschütztes Tool, das verfügbare und nicht verfügbare Termine anzeigt und Gästen hilft, die Verfügbarkeit vor der Buchung schnell zu überprüfen. Alle Buchungen müssen über das Buchungssystem abgeschlossen werden.
Schritt für Schritt
1) Klicke auf Fortgeschrittene Einstellungen > Kalender-iFrame
2) Wähle „Standard“ oder „iframe“ und die passende Sprache aus.
Standard: Ein Webdesigner kann den Code ändern, indem er den Teil „false” in „true” ändert und das Aussehen des Kalenders mit CSS anpasst.
Iframe: Das ist wie eine Spiegelung aus unserer Software und kann daher nicht geändert werden.
3) Kopiere den Code für deine Unterkunft/Unterkünfte und füge ihn in den HTML-Code deiner Website ein.
Hallo, mir ist nicht klar, wie man das CSS beim Buchungskalender im Standard-modus verändern kann. Welche Variable muss auf "true" geändert, damit das CSS freigeschaltet wird?
So wie ich das sehe muss das bei dem div mit der Klasse "calenderContent" geschehen. Ich nehme an es ist die Variable data-disable-css="false", die auf "true" gesetzt werden muss. Ist das richtig? Wie würde die Veränderung als Code aussehen?
Müssen die Veränderungen anschließend in der Subklasse ..multiCalendarWidget vorgenommen werden?
Danke für die Hilfe.
PS: Mit dem Styling (auch über die angegebenen "root Einstellungen" hinaus) hatte ich bisher keine Probleme. Ein aktueller Stand kann unter https://www.daheim-im-hirschen.webflow.io/ eingesehen werden.
Kommentare
3 Kommentare
Hallo, mir ist nicht klar, wie man das CSS beim Buchungskalender im Standard-modus verändern kann. Welche Variable muss auf "true" geändert, damit das CSS freigeschaltet wird?
So wie ich das sehe muss das bei dem div mit der Klasse "calenderContent" geschehen. Ich nehme an es ist die Variable data-disable-css="false", die auf "true" gesetzt werden muss. Ist das richtig? Wie würde die Veränderung als Code aussehen?
Müssen die Veränderungen anschließend in der Subklasse ..multiCalendarWidget vorgenommen werden?
Danke für die Hilfe.
PS: Mit dem Styling (auch über die angegebenen "root Einstellungen" hinaus) hatte ich bisher keine Probleme. Ein aktueller Stand kann unter https://www.daheim-im-hirschen.webflow.io/ eingesehen werden.
Hat sich erledigt. Die Anpassungen können direkt im div vorgenommen werden:
<div id="smoobuApartment488418de" class="calendarWidget">
<div class="calendarContent"
data-load-calendar-url="https://login.smoobu.com/de/cockpit/widget/single-calendar/488418"
data-verification="d90b595727f76f4ca6176c40e37d803a726c66800feae5f14be8744ce6548eb8"
data-baseUrl="https://login.smoobu.com"
data-disable-css="false">
</div>
<script
type="text/javascript"
src="https://login.smoobu.com/js/Apartment/CalendarWidget.js">
</script>
<style>
.multiCalendarWidget{
color: black !important;
max-width: unset !important;
font: 300 100%/1.5em 'Inconsolata', monospace !important;
background: rgba(255, 255, 255, 0.5) !important;
}
</style>
</div>
Irina Fuhrmann
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.