Änderungen

Zur Navigation springen Zur Suche springen

Responsive Buchungsseite

2.740 Bytes hinzugefügt, 17:06, 22. Nov. 2018
keine Bearbeitungszusammenfassung
[[Category:Buchungsseite]]
Diese Seite erklärt, wie sie Sie die responsive Version der Buchungsseite einrichten.
== Widget für die Website ==Gehen Sie zu EINSTELLUNGEN>BUCHUNGSSEITE->WIDGETS um den Code für Website Widgets zu generieren. == Responsive Buchungsseite einrichten =====Konzept=== Durch das modulare Design haben sie Sie volle Kontrolle über das Layout. Es stehen ihnen einige Standardlayouts zur Verfügung die sie aktiveren könen.
== Widget für dei Website ==Module====Gehen sie zu EINSTELLUNGEN>BUCHUNGSSEITE->WIDGETS um den Code für Website Widgets zu generierenModule können hinzugefügt oder entfernt werden. Sie haben zusätzliche Einstellungen, worüber Sie auf die induviduellen Bedürfnisse zugeschnitten werden können. Für die meisten Module müssen Inhalte eingegeben werden. Verfügbare Module sind:
[https://wiki.beds24.com/index.php?title=Category:Developers Hier] finden sie weitere Optionen.*Bilder Galerie oder Slider für Unterkunft, Einheiten und Offerten*Bild für Unterkunft, Einheiten und Offerten*Featues (Ausstattungsmerkmale) für Unterkunft und Einheiten*Belegungskalender (ein oder mehrere Monate) für Unterkunft, Einheiten und Offerten== Responsive Buchungsseite individualisieren ==*Preistabelle für Offerten *Beschreibungen für Unterkunft, Einheiten und Offerten=== Bilder ===*AGBIn KONFIGURATION->BUCHUNGSSEITE->BILDER können sie Bilder hochladen und den Modulen zuordnen.*Karte
===Anderes Layout auswählen=Templates==== Gehen sie zu KONFIGURATION->BUCHUNGSSEITE-> DESIGN->LAYOUT und wählen sie das Layout, welches sie nutzen möchtenEs gibt eine Reihe von Tempates mit unterschiedlichen Modulen. Templates können wie zur Verfügung gestellt genutzt werden oder nach eigenen Bedürfnissen individualisiert werden.
Der aktuelle Standard ist Template 7.
<div><ul>
<li style="display: inline-block; vertical-align: top;"> [[File:layout1.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout Template 1</p> <p style="font-weight: bold;">Module:</p>
Offerte: Slider, Beschreibung 1, Kalender, Offerte Auswahl (Button/Selector),<br><br>
Unterkunft Unten: Beschreibung 2]] [https://www.beds24.com/booking2.php?propid=13434&layout=1 Demo ansehen]</li>
<li style="display: inline-block; vertical-align: top;"> [[File:layout2.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout Template 2</p> <p style="font-weight: bold;">Module:</p> Unterkunft Oben: Slider<br><br>
Offerte: Offerte Auswahl (Button/Selector), Preistabelle<br><br>
Unterkunft Unten: Beschreibung 2]] [https://www.beds24.com/booking2.php?propid=13434&layout=2 Demo ansehen]</li>
<li style="display: inline-block; vertical-align: top;"> [[File:layout3.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout Template 3</p> <p style="font-weight: bold;">Module:</p>
Einheit: Slider, Beschreibung <br><br>
Offerte: Preistabelle, Offerte Auswahl (Button/Selector), Slider, Beschreibung 2<br><br>
Unterkunft Unten: Beschreibung 2]] [https://www.beds24.com/booking2.php?propid=13434&layout=3 Demo ansehen]</li><li style="display: inline-block; vertical-align: top;"> [[File:layout4.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Template 4</p> <p style="font-weight: bold;">Module:</p>Unterkunft Oben: Slider<br><br>Offerte: Bild, Beschreibung 1, Kalender, Offerte Auswahl (Button/Selector), Beschreibung 2<br><br>Unterkunft Unten: Beschreibung 2]] [https://www.beds24.com/booking2.php?propid=13434&layout=4 Demo ansehen]</li>
</ul></div>
<div><ul>
<li style="display: inline-block; vertical-align: top;"> [[File:layout4.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 4</p> <p style="font-weight: bold;">Module:</p>Unterkunft Oben: Slider<br><br>Offerte: Bild, Beschreibung 1, Kalender, Offerte Auswahl (Button/Selector), Beschreibung 2<br><br>Unterkunft Unten: Beschreibung 2]] </li><li style="display: inline-block;vertical-align: top;"> [[File:layout5.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout Template 5</p> <p style="font-weight: bold;">Module:</p> Unterkunft Oben: Slider<br><br>
Offerte: Kalender und Preistabelle, Offerte Auswahl (Button/Selector)<br><br>
Unterkunft Unten: Beschreibung 2]] [https://www.beds24.com/booking2.php?propid=13434&layout=5 Demo ansehen] </li><li style="display: inline-block; vertical-align: top;"> [[File:layout6.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout Template 6</p> <p style="font-weight: bold;">Module:</p> Unterkunft Oben: Beschreibung 1<br><br>
Offerte: Offerte Auswahl (Button/Selector), Preistabelle<br><br>
Eineheit Unten: Slider, Beschreibung]] [https://www.beds24.com/booking2.php?propid=13434&layout=6 Demo ansehen]</li><li style="display: inline-block; vertical-align: top;"> [[File:layout7.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Template 7</p> <p style="font-weight: bold;">Module:</p> Unterkunft Oben: Slider<br><br>Einheit: Features <br><br>Offerte: Offerte Auswahl (Button/Selector), Belegungskalender]] [https://www.beds24.com/booking2.php?propid=13434&layout=2 Demo ansehen]</li>
</ul></div>
=== =Layouts====Wenn Sie auf verschiedenen Webseiten oder Blogs eine andere Buchungsseite anzeigen möchten können Sie verschiedene Layouts anlegen. Die Facebook App nutzt das "Standard" Layout individualisieren, welches in KONFIGURATION->BUCHUNGSSEITE ausgewählt ist.  === Bilder ===In KONFIGURATION->BUCHUNGSSEITE->BILDER können Sie Bilder hochladen und diese Unterkunft, Einheiten oder Offerten zuordnen. === Set up Wizard===Dieser [https://www.beds24.com/wizard/wizard2.php Set up Wizard] führt Sie durch die Schritte. Loggen Sie sich einfach mit Ihrem Benutzernamen und Passwort ein und folgen den Schritten.  ===Buchungsmaske invididualisieren===Gehen sie Sie zu KONFIGURATION->BUCHUNGSSEITE -> DESIGN->LAYOUT.  Wenn Sie nur ein Layout benutzen möchten lassen Sie den selector für "Layout" dort sowie den Selector für "Standard Layout" in KONFIGURATION->BUCHUNGSSEITE auf 1.  ==== Template auswählen ====Wählen Sie das Template welches sie das Layout nutzen möchten und klicken sie dann auf "AnpassenVoreinstellung laden".
==== Wählen sie, was sie anzeigen möchten Module ändern ====
Die responsive Buchungsseite besteht aus Abschnitten:
"Offerte" enthält die Standardofferte einer Einheit
Für jeden Abschnitt können sie Sie aus verschiedenen Modulen wählen. Für die meisten Module wählenmüssen Inhalte eingegeben werden. Klicken Sie auf die Kontexthilfe (? Icons) um zu sehen, wo die Inhalte eingegeben werden können. Jedes Modul hat zusätzliche Einstellungen, die es ihnen erlauben, die Anzeige nach Ihren Bedürfnisen auszurichten. Zu den zusätzlichen Einstellungen gelangen Sie über einen Klick auf "Manage".   Diese [https://www.beds24.com/booking2.php?propid=24226&lang=de Demosite] zeigt die wesentlichen Module.  
'''Module Unterkunft'''
</gallery>
*Wenn Sie Slider oder Bild benutzen und "Style" auf "Volle Breite" gestellt haben, müssen Sie sicher stellen, dass Position = Zeile 1 Position 1, Desktop = Volle Breite, Mobile = Volle Breite eingestellt sind. In Zeile 1 darf kein anderes Modul positioniert sein. Stellen Sie auch sicher, dass Sie alle nicht genutzen Module deaktivieren. *Bedingungen zeigt die Informationen anWenn Sie eine '''Google Map''' zeigen wollen, müssen Sie Ihren die sie unter Google Map API Key in KONFIGURATION->UNTERKUNFTBUCHUNGSSEITE->BESCHREIBUNG eingegeben habenDEVELOPERS eingeben. Normalerweise reicht ein kostenloser Key aus. Den Key können Sie hier generieren: https://developers.google.com/maps/documentation/javascript/get-api-key*Die Karte benutzt die KoordinatenAGB und Stornobedingungen können können über Template Variablen auch Buchungsbestätigungen und Auto Action Emails eingefügt werden. Ein Link zu den AGB kann überall eingefügt werden, die sie unter wo Texte eingegeben werden können. Unter KONFIGURATION->UNTERKÜNFTE->BESCHREIBUNG eingegeben habenFRAGEN BEI BUCHUNG kann eine obligatorische individuelle Frage mit Kästchen angelegt werden. Dann muss der Gast ankreuzen, dass der die AGB akzeptiert. Falls notwendig Bei Bedarf kann ein Link eingefügt werden z.B: API Key unter KONFIGURATION->BUCHUNGSSEITE->DEVELOPER eingegeben werden"Die <a href="http://www.meinewebsite.*Features können unter KONFIGURATION-de/agb" target="_blank">UNTERKÜNFTE-AGB </a>BESCHREIBUNG eingegeben habenhabe ich gelesen und akzeptiert. Wenn sie auf "Manage" klicken können sie die Breite der Spalten anpassenTauschen Sie www.meinewebsite.de/agb gegen den Link zu Ihren AGB aus.
'''Module Einheit'''
</gallery>
*Features können unter KONFIGURATION->UNTERKÜNFTE->EINHEITEN->SETUP eingegeben haben.
'''Module Offerten'''
</gallery>
Die '''Karte''' benutzt die Koordinaten, die sie unter KONFIGURATION->UNTERKUNFT->BESCHREIBUNG eingegeben haben*Marketing Spalte. Die '''Karte''' benutzt die Koordinaten, die sie unter KONFIGURATION->UNTERKUNFT->BESCHREIBUNG eingegeben habenMarketingspalte wird nur in den Modulen "Preistabelle" und "Kalender und Preistabelle" angezeigt HINWEIS: *Für Offerten können die Module Kalender und Preistabelle und Kalender nicht gleichzeitig genutzt werden. Wenn sie Sie mehrere Offerten haben, zeigen die Kalender die gleiche Verfügbarkeit für alle Offerten.
Platzierung: Module sind in Zeilen angeordnet. Jeder Abschnitt kann mehrere Zeilen haben.
Module sind in Zeilen angeordnet. Jeder Abschnitt kann mehrere Zeilen haben.
Width on desktop and mobile: Jede Zeile hat 12 Spalten. Die Breite eines Moduls ist über die Spalten definiert.
[[Media:row.png|große Ansicht]]
 
In alle "Beschreibung" Module kann Text oder HTLM eingefügt werden.
 
Klicken sie auf "Manage" um die Einstellungen eines Moduls zu ändern. Für alle Module können sie einstellen, ob sie immer sichtbar sind oder sich über einen Link öffnen.
 
Wenn sie eines oder mehrere dieser Module aktiviert haben,:
*Einheit Beschreibung 1 ("Einheit mehr Details" der adaptiven Buchungsseite) gehen sie KONFIGURATION->UNTERKÜNFTE->EINHEITEN->SETUP um den Inhalt des Moduls anzulegen oder zu ändern.
*Offerte Beschreibung 1 ("Offerte Zusammenfassung" der adaptiven Buchungsseite) gehen sie KONFIGURATION->UNTERKÜNFTE->OFFERTEN um den Inhalt des Moduls anzulegen oder zu ändern.
*Offerte Beschreibung 2 ("Offerte mehr Details" der adaptiven Buchungsseite) gehen sie KONFIGURATION->UNTERKÜNFTE->OFFERTEN um den Inhalt des Moduls anzulegen oder zu ändern.
*Marketing Spalte - gehen sie KONFIGURATION->UNTERKÜNFTE->OFFERTEN um den Inhalt des Moduls anzulegen oder zu ändern.
 
Wenn sie eines oder mehrere dieser Module aktiviert haben,:
*Unterkunft Beschreibung 1 ("Header" der adaptiven Buchungsseite)
*Unterkunft Beschreibung 2 ("Footer"der adaptiven Buchungsseite)
*Unterkunft Beschreibung - Buchungsseite 1 ("Kurzbeschreibung Unterkunft " der adaptiven Buchungsseite)
*Unterkunft Beschreibung - Buchungsseite 3 ("Preiskalender Header Header " der adaptiven Buchungsseite)
*Marketing Spalte. Die Marketingspalte wird nur in den Modulen "Preistabelle" und "Kalender und Preistabelle" angezeigt.
 
Gehen sie KONFIGURATION->BUCHUNGSSEITE->DESIGN->INHALT um den Inhalt des Moduls anzulegen oder zu ändern.
Sie können die Änderungen unter diesem Layout oder einem anderen Layout speichern. Die Option "auf Voreinstellung zurücksetzen" entfernt alle Änderungen.
==== Farben und Schriften ====
Farben und Schriften KONFIGURATION->BUCHUNGSSEITE->DESIGN->STYLE geändert werden.
 
Aktuelle Voreinstellungen sind:
 
{| class="wikitable"
| '''Einstellung '''|| '''Wert'''
|-
|Hintergrundfarbe Seite ||#f4f4f4
|-
|Hintergrundfarbe Content ||#f4f4f4
|-
|Textfarbe Content ||#424242
|-
|Farbe Link ||#008acc
|-
|Farbe Rahmen ||#dfdfdf
|-
|Highlightfarbe von ||#ffffff
|-
|Highlightfarbe bis ||#ffffff
|-
|Highlightfarbe Text ||#424242
|-
|Formular Hintergrundfarbe ||#ffffff
|-
|Formular Textfarbe ||#424242
|-
|Hintergrundfarbe gewählte Daten ||none
|-
|Textfarbe gewählte Daten ||#222222
|-
|Hintergrundfarbe verfügbare Daten ||#f2f2f2
|-
|Textfarbe verfügbare Daten ||#424242
|-
|Hintergrundfarbe Daten auf Anfrage ||#dddddd
|-
|Textfarbe Daten auf Anfrage ||#777777
|-
|Hintergrundfarbe nicht verfügbare Daten ||#f2dede
|-
|Textfarbe nicht verfügbare Daten ||#a94442
|-
|Button Stil ||flat
|-
|Farbe Button ||#008acc
|-
|Text Button ||#ffffff
|-
|Schriftart ||Arial (Helvetica)
|-
|Schriftgröße ||14px
|-
|}
==== Verhalten ====
==== Inhalt ====
Zusätzliche Informationen können der Buchungsseite in KONFIGURATION->BUCHUNGSSEITE->DESIGN->INHALT hinzugefügt werden. Hier können sie Sie auch die Warnhinweise ändern, die erscheinen, wenn eine Einheit nicht verfügbar ist. ====Multiple Layouts====Wenn sie verschiedene Layouts benutzen wollen, können sie das Layout über einen Parameter zur URL definieren. Beispiel  https://www.beds24.com/booking2.php?propid=13437&layout=2 öffnet die Buchungsseite in Layout 1. Wenn sie Wordpress benutzen können sie dem Shortcode einen Parameter hinzufügen. Weitere Informationen finden sie in den Plugin Einstellungen.  ===AGB und Stornobedingungen===AGB und Stornobedingungen können unter KONFIGURATION->UNTERKÜNFTE->BESCHREIBUNG eingeben. Sie werden auf der Buchungsseite angezeigt, wenn sie das entsprechende Modul in KONFIGURATION->BUCHUNGSSEITE->LAYOUT aktivieren. Über Template Variablen können die Texte auch in Buchungsbestätigungen und Auto Action Emails eingefügt werden. Ein Link zu den AGB kann überall eingefügt werden, wo Texte eingegeben werden können.  '''Bestätigung der AGB durch den Gast''' In KONFIGURATION->UNTERKÜNFTE->FRAGEN BEI BUCHUNG können sie hierfür eine "Individuelle Fragen" (Typ= Kästchen, Nutzung=Pflicht) anlegen.  '''Auf AGB in den Buchungsfragen hinweisen''' Unter KONFIGURATION -> UNTERKÜNFTE -> FRAGEN BEI BUCHUNG kann eine obligatorische individuelle Frage mit Kästchen angelegt werden. Dann muss der Gast ankreuzen, dass der die AGB akzeptiert. 
Bei Bedarf kann ein Link eingefügt werden z== Mobilgeräte ==Jeds Modul hat zusätzliche Einstellungen, die es ihnen erlauben, die Anzeige auf Desktop und Mobilgeräten nach Ihren Bedürfnisen auszurichten. Zu den zusätzlichen Einstellungen gelangen Sie in "Layout" über einen Klick auf "Manage".B:
Die <a href="http://www.meinewebsite.de/agb" target="_blank">AGB </a> habe ich gelesen und akzeptiert.Dort können Sie festlegen, ob Module auf Mobilgeräten*direkt angegzeigt werdenTauschen sie www.meinewebsite.de/agb gegen den *über einen Link zu ihren AGB aus.angezeigt werden*nur auf Desktops aber nicht auf Mobilgeräten angegzeigt werden
== Internationalisierung ==
===Währungsrechner ===
Wenn sie Sie Gästen die Möglichkeit geben wollen, Preise in eine andere Währung umgerechnet zu sehen, können sie Sie den Währungsrechner aktivieren. Fügen sie Sie beispielsweise &cur=EUR or &cur=USD zur URL der Buchungsseite hinzu um die Seite direkt mit einem Umrechnungskurs zu öffen. Wenn sie Sie Wordpress mit Short Codes benutzen, fügen sie Sie cur=EUR oder cur=USD Zum Short Code hinzu. Klicken sie Sie [https://wiki.beds24.com/index.php?title=Category:Developers hier] für eine komplette Liste der Währungscodes.
=== Sprachen ===
Wenn Sie ihren Ihren Gästen eine mehrsprachige Buchungsseite anbieten möchten, können sie Sie auswählen, welche Sprachen sie anbieten. Wenn sie Sie mehr als eine Sprache aktivieren, können sie ihre Sie Ihre Beschreibungen, Informationen und Benachrichtigungen über Tabs mehrsprachig eingeben.
Die Sprachversion kann über einen Spachselektor ausgewählt werden. Die "Standardsprache Buchungsseite" legt fest, welche Sprachfassung als Erstes angezeigt wird. Wenn sie Sie einen eingebetteten Iframe auf einer mehrsprachigen Website benutzen, können sie Sie für jede Sprachversion die passende Buchungsseite einbetten. Klicken sie Sie [[Sprachen|hier]] für eine Anleitung.
== Weitere Optionen ==
=== Anfragen erlauben, wenn kein Preis gefunden wird ===
Wenn sie Sie Raten benutzen, können sie in den Raten "Anfrage erlauben" = ja einstellen. Wenn sie Sie generell nur "Anfragen" erhalten möchten gehen sie Sie zu KONFIGURATION->UNTERKÜNFTE->REGELN und stellen "Buchungstyp" = Anfrage
=== TripAdvisor Widgets ===
Tripadvisor stellt Code Snippet für Bewertungswidgets zur Verfügung.
1. Kopierens sei Kopieren Sie den Code aus ihrem Ihrem TripAdvisor Account. 2. Fügen Sie den Code ein, indem Sie im Modul auf "Bearbeiten" klicken und dann auf "Quellcode".  Stellen Sie sicher, dass das Modul welches Sie nutzen möchten aktiviert ist === Triptease Preisvergleichs Widget===Um diese Funktion zu nutzen benötigen Sie einen Account mit Triptease. Weitere Informationen hierzu finden Sie [[Triptease.com|hier]]. === Zusätzliche Informationen und Warungen ===Zusätzliche Informationen können unter KONFIGURATION->BUCHUNGSSEITE->DESIGN->CONTENT angelegt werden. Hier können Sie auch die Warungen individualisieren, die angezeigt werden, wenn keine Verfügbarkeit vorhanden ist. === Cookies=== Sie können ein Tool wie dieses https://cookieconsent.insites.com/download/ nutzen, welches ein Skript erzeugt, dass Sie in KONFIGURATION->BUCHUNGSSEITE ->DEVELOPER "Einfügen in HTML" eingeben. ==Multiple Layouts==Sie können bis zu 6 verschiedene Layouts gleichzeitig einsetzen.
2Das "Standard" Layout wird in KONFIGURATION->BUCHUNGSSEITE ausgewählt. Die Facebook App nutzt das "Standard" Layout, welches in KONFIGURATION->BUCHUNGSSEITE ausgewählt ist. Fügen sie den Code ein Wenn Sie verschiedene Layouts benutzen wollen, indem sie im Modul auf können Sie vor dem "BearbeitenSpeichern" klicken und dann den Selektor auf "Quellcode"die gewünschte Nummer ändern. Um ein anderes als das Standard Layout zu öffnen können Sie über einen Parameter zur URL definieren. Beispiel  https://www.beds24.com/booking2. php?propid=13437&layout=2
Stellen öffnet die Buchungsseite in Layout 1. Wenn Sie Wordpress benutzen können sie sicher, dass das Modul welches sie nutzen möchten aktiviert istdem Shortcode einen Parameter hinzufügen. Weitere Informationen finden Sie in den Plugin Einstellungen.
== Developer ==
Funktionen für Entwickler sind in KONFIGURATION->BUCHUNGSSEITE->DEVELOPER verfügbar.
*Wenn sie Sie mit CSS arbeiten können, können sie ihre Sie Ihre eigenen Styles anlegen
*Scripts z.B. für Google Analytics können eingefügt werden
*Alle fixen Texte auf der Buchungsseite können ausgetauscht werden
Stripe und Paymill verlinken ihre Ihre eigenen Buttons, die nicht verändert werden können. Um den Buttontext eines anderen Gateways zu ändern können sie Sie ein Code Snippet unter "HTML" einfügen
Anleitung:
== Multiple Unterkünfte ==
Wenn sie Sie multiple Unterkünfte haben, können sie Sie alle Unterkünfte in ihrem Ihrem Account auf einer Buchungsseite anzeigen. Diese verlinkt auf die Buchungsseiten der einzelnen Unterkünfte, wo die Buchung vorgenommen wird.
== Von adaptiver Version auf responsive Version wechseln ==
Gehen sie Sie zu KONFIGURATION->BUCHUNGSSEITE und wählen sie Sie "Version Buchungsseite"= Responsive. Damit aktivieren sie Sie Layout 1.
Wenn sie Sie von der adaptiven auf die responsive Version wechseln müssen sie Sie die Bilder erneut zuordnen. Gehen sie Sie zu KONFIGURATION->BUCHUNGSSEITE ->BILDER. Wählen die Sie die Einheit, dann "Offerte 1" und ordnen das/die Bilder zu, die sie Sie zeigen möchten. Wenn sie Sie mehr als eine Offerte aktiviert haben, wiederholen sie Sie das für jede Offerte.
Die meisten Einstellungen werden automatisch übernommen.
HINWEIS: Wenn sie Sie "Version Buchungsseite"= Responsive auswählen ändert sich die Buchungsseite auf ihrer Ihrer Website. Wenn sie Sie nur testen wollen, können sie Sie dies tun, in dem sie Sie &version=3 zur URL ihrer Ihrer Buchungsseite hinzufügen. Um die verschiedenen Layouts zu sehen fügen sie Sie zu Nummer hinzu. z.B. &version=3&layout=2 zeigt Layout 2. Alternativ können sie ihre Ihre Unterkunft zum Testen kopieren. Wenn sie Sie das tun stellen sie Sie sicher, dass alle Channel Manager Verbindungen in der kopierten Unterkunft deaktiviert sind. Für die zusätzlichen Einheiten fällt die normale Gebühr an. Wenn sie Sie mit den Anpassungen fertig sind können die Sie die "Unterkunft klonen" Funktion in SUBACCOUNT (Menue oben rechts) nutzen, um die Änderungen auf ihre Ihre "echte" Unterkunft zu übertragen.

Navigationsmenü