Kategorie:Widgets: Unterschied zwischen den Versionen
| (10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
[[Category:Konfiguration]] | [[Category:Konfiguration]] | ||
| − | [[Category: | + | [[Category:Buchungsseite]] |
[[Category:Troubleshooting]] | [[Category:Troubleshooting]] | ||
| + | <div class="heading">Widgets</div> | ||
| + | Diese Seite ist über das Menue {{#fas:cog}} (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS'' | ||
| − | + | = Widget über den Widget Designer erstellen= | |
| − | |||
| − | |||
*Wählen sie den Widgettyp aus. | *Wählen sie den Widgettyp aus. | ||
*Sndern sie die Einstellungen nach ihren Wünschen | *Sndern sie die Einstellungen nach ihren Wünschen | ||
| Zeile 12: | Zeile 12: | ||
*Gehen sie zu der Seite auf ihrer Website, wo sie das Widget einfügen möchten und fügen den kopierten Code in das HTML ein. Wenn sie nicht wissen, wie das geht, nutzen die die Hilfe ihres CMS Systems oder Websitebilders oder bitten sie ihren Webdesginer um Hilfe. | *Gehen sie zu der Seite auf ihrer Website, wo sie das Widget einfügen möchten und fügen den kopierten Code in das HTML ein. Wenn sie nicht wissen, wie das geht, nutzen die die Hilfe ihres CMS Systems oder Websitebilders oder bitten sie ihren Webdesginer um Hilfe. | ||
| − | + | Die Kalender in den Widgets zeigen bis zu einem Jahr im Voraus an. | |
| − | <nowiki><!-- Place this div on your page where you want the widget to show --></nowiki> | + | |
| + | <span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> Wenn sie mehrere Widgets auf einer Seite ihrer Website anzeigen möchten, stellen sie sicher, dass die den Code für das zweite Widget Code nicht ab Anfang sondern erst ab dieser Stelle einfügen: | ||
| + | |||
| + | <code><nowiki><!-- Place this div on your page where you want the widget to show --></nowiki></code> | ||
| + | |||
| + | <span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span>Die Sprachkodierung auf der Seite auf welcher die Widgets eingebettet sind muss UTF-8 sein. | ||
| − | = | + | <span style="color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> Der Belegungskalender verarbeitet Daten nur ein Jahr im voraus. Weiter in der Zukunft liegende Daten werden als verfügbar angezeigt sind aber nicht buchbar. |
| − | Wenn | + | == Wenn die Datumsauswahl nicht funktioniert oder Sie kein JQuery haben == |
| + | Das Widget wird versuchen, jqueryUI selbst zu laden. Wenn dies nicht richtig funktioniert oder Konflikte verursacht, können Sie es nach dem Jquery-Skript zu Ihrer Seite hinzufügen. | ||
| − | + | <code><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></code> | |
| − | |||
| − | |||
| − | + | <code><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"></code> | |
| − | == | + | |
| + | <code> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script></code> | ||
| + | |||
| + | Wenn Sie das Laden optimieren wollen, sollte es ausreichen, nur die JQueryUI-Datepicker-Module zu laden. | ||
| + | |||
| + | Das Widget kann gezwungen werden, nicht zu versuchen, seine eigenes JQueryUI zu laden, indem der folgende Parameter gesetzt wird. | ||
| + | |||
| + | <code> loadJQueryUI: false,</code> | ||
| + | |||
| + | Wenn Sie GDPR-konform sein müssen, müssen Sie möglicherweise die Bibliotheken herunterladen und selbst hosten. Wenn das der Fall ist deaktivieren Sie das Selbstladen, laden Sie die Bibliotheken auf Ihren Server herunter und ändern Sie die Links entsprechend. | ||
| + | |||
| + | ==Funktionen für Entwickler und Webdesigner == | ||
Erforderliche Kenntnisse: HTML, CSS | Erforderliche Kenntnisse: HTML, CSS | ||
| Zeile 34: | Zeile 49: | ||
Wenn sie das Wordpress Plugin einsetzen, benutzen sie bitte [[Wordpress_Plugin|diese Anleitung]]. | Wenn sie das Wordpress Plugin einsetzen, benutzen sie bitte [[Wordpress_Plugin|diese Anleitung]]. | ||
| − | = | + | = Eingebetteter Iframe oder Link zur Buchungsseite = |
| − | *Code für einen iFrame mit ihrer Buchungsseite kann unter | + | *Code für einen iFrame mit ihrer Buchungsseite kann unter {{#fas:cog}} (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > IFRAME GENERATOR generiert werden |
| − | *Links zu ihrer Buchungsseite können unter | + | *Links zu ihrer Buchungsseite können unter {{#fas:cog}} (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > LINKS erstellt werden |
| − | *Eine URL, die ihre Buchungsseite öffnet kann unter | + | *Eine URL, die ihre Buchungsseite öffnet kann unter {{#fas:cog}} (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > QUICK URL erstellt werden |
| − | *Buttons können unter | + | *Buttons können unter {{#fas:cog}} (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > BUTTON erstellt werden |
| − | *Code für ein Anfrageformular kann unter | + | *Code für ein Anfrageformular kann unter {{#fas:cog}} (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > ANFRAGEFORMULAR |
| + | |||
| + | ==Zur Checkout-Seite springen== | ||
| + | Sie können die Buchungsseite umgehen und das Widget direkt auf die Kassenseite umleiten, indem Sie diesen Parameter hinzufügen | ||
| + | <code>customParameter:'br1-xxxx=book'</code> | ||
| + | |||
| + | zum Widget. | ||
| + | |||
| + | Ersetzen Sie xxxx mit der ID der Einheit, die geöffnet werden soll. | ||
| + | |||
| + | = Troubleshooting = | ||
| + | ==Buchungsseite öffnet nicht die im Widget ausgewählten Daten und/oder Anzahl der Gäste== | ||
| + | Nutzen Sie diese [https://wiki.beds24.com/index.php/Embedded_Iframe#How_to_reliably_transfer_dates_and_other_data_from_a_booking_widget_on_one_page_to_a_booking_page_embedded_in_an_Frame_on_a_different_pageAnleitung] wenn Sie die Auswahl des Gastes vom Widget an den eingebetteten iFrame senden wollen. | ||
| + | |||
| + | == Probleme bei der Installation mit Wix== | ||
| + | Im Gegensatz zu fast allen anderen Websites unterstützt Wix kein JQuery. Klären Sie mit Wix ob/wie Sie JQuery auf ihrer Seite installieren können. Falls Wix ihnen nicht erlaugt JQuery hinzuzufügen können sie einen Button, Links oder die Widgets der letzten Generation benutzen. Diese erreichen sie über {{#fas:cog}} (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > BUTTON. | ||
| + | |||
| + | ==Konsole zeigt Fehler "bookWidget is not a function"== | ||
| + | Ihre Seite schein das Wort JQuery nicht zu akzeptieren. Tauschen Sie | ||
| + | |||
| + | jQuery(document).ready(function() { | ||
| + | |||
| + | jQuery('#bookWidget-44005-75744-0-1589444240').bookWidget({ | ||
| + | |||
| + | propid:75744, | ||
| + | |||
| + | formAction:'https://beds24.com/booking.php', | ||
| + | |||
| + | widgetLang:'en', | ||
| + | |||
| + | widgetType:'BookingStrip' | ||
| + | }); | ||
| + | |||
| + | |||
| + | gegen diesen Code aus: | ||
| + | |||
| + | $(document).ready(function() { | ||
| + | |||
| + | $('#bookWidget-44005-75744-0-1589444240').bookWidget({ | ||
| + | propid:75744, | ||
| − | + | formAction:'https://beds24.com/booking.php', | |
| − | |||
| − | |||
| − | |||
| − | + | widgetLang:'en', | |
| − | |||
| − | |||
| − | + | widgetType:'BookingStrip' | |
| − | + | }); | |
Aktuelle Version vom 3. Januar 2023, 16:04 Uhr
Diese Seite ist über das Menue (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS
Inhaltsverzeichnis
1 Widget über den Widget Designer erstellen
- Wählen sie den Widgettyp aus.
- Sndern sie die Einstellungen nach ihren Wünschen
- Klicken sie auf "Aktualisieren" um eine Vorschau zu sehen.
- Klicken sie auf "Code generiren" und kopieren das angezeigte Code Snippet.
- Gehen sie zu der Seite auf ihrer Website, wo sie das Widget einfügen möchten und fügen den kopierten Code in das HTML ein. Wenn sie nicht wissen, wie das geht, nutzen die die Hilfe ihres CMS Systems oder Websitebilders oder bitten sie ihren Webdesginer um Hilfe.
Die Kalender in den Widgets zeigen bis zu einem Jahr im Voraus an.
Wenn sie mehrere Widgets auf einer Seite ihrer Website anzeigen möchten, stellen sie sicher, dass die den Code für das zweite Widget Code nicht ab Anfang sondern erst ab dieser Stelle einfügen:
<!-- Place this div on your page where you want the widget to show -->
Die Sprachkodierung auf der Seite auf welcher die Widgets eingebettet sind muss UTF-8 sein.
Der Belegungskalender verarbeitet Daten nur ein Jahr im voraus. Weiter in der Zukunft liegende Daten werden als verfügbar angezeigt sind aber nicht buchbar.
1.1 Wenn die Datumsauswahl nicht funktioniert oder Sie kein JQuery haben
Das Widget wird versuchen, jqueryUI selbst zu laden. Wenn dies nicht richtig funktioniert oder Konflikte verursacht, können Sie es nach dem Jquery-Skript zu Ihrer Seite hinzufügen.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Wenn Sie das Laden optimieren wollen, sollte es ausreichen, nur die JQueryUI-Datepicker-Module zu laden.
Das Widget kann gezwungen werden, nicht zu versuchen, seine eigenes JQueryUI zu laden, indem der folgende Parameter gesetzt wird.
loadJQueryUI: false,
Wenn Sie GDPR-konform sein müssen, müssen Sie möglicherweise die Bibliotheken herunterladen und selbst hosten. Wenn das der Fall ist deaktivieren Sie das Selbstladen, laden Sie die Bibliotheken auf Ihren Server herunter und ändern Sie die Links entsprechend.
1.2 Funktionen für Entwickler und Webdesigner
Erforderliche Kenntnisse: HTML, CSS
Sie können die Parameter manuell einsetzen und ihr eigenes CSS nutzen. Wenn sie ihre eigenen Styles hinzufügen wollen nutzen sie Developer Tools um die Klassen der Widgets zu identifizieren.
Eine Übersicht über die Parameter finden sie im englischsprachigen Wiki.
1.3 Wordpress
Wenn sie das Wordpress Plugin einsetzen, benutzen sie bitte diese Anleitung.
2 Eingebetteter Iframe oder Link zur Buchungsseite
- Code für einen iFrame mit ihrer Buchungsseite kann unter (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > IFRAME GENERATOR generiert werden
- Links zu ihrer Buchungsseite können unter (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > LINKS erstellt werden
- Eine URL, die ihre Buchungsseite öffnet kann unter (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > QUICK URL erstellt werden
- Buttons können unter (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > BUTTON erstellt werden
- Code für ein Anfrageformular kann unter (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > ANFRAGEFORMULAR
2.1 Zur Checkout-Seite springen
Sie können die Buchungsseite umgehen und das Widget direkt auf die Kassenseite umleiten, indem Sie diesen Parameter hinzufügen
customParameter:'br1-xxxx=book'
zum Widget.
Ersetzen Sie xxxx mit der ID der Einheit, die geöffnet werden soll.
3 Troubleshooting
3.1 Buchungsseite öffnet nicht die im Widget ausgewählten Daten und/oder Anzahl der Gäste
Nutzen Sie diese [1] wenn Sie die Auswahl des Gastes vom Widget an den eingebetteten iFrame senden wollen.
3.2 Probleme bei der Installation mit Wix
Im Gegensatz zu fast allen anderen Websites unterstützt Wix kein JQuery. Klären Sie mit Wix ob/wie Sie JQuery auf ihrer Seite installieren können. Falls Wix ihnen nicht erlaugt JQuery hinzuzufügen können sie einen Button, Links oder die Widgets der letzten Generation benutzen. Diese erreichen sie über (KONFIGURATION) BUCHUNGSMASCHINE > WIDGETS > BUTTON.
3.3 Konsole zeigt Fehler "bookWidget is not a function"
Ihre Seite schein das Wort JQuery nicht zu akzeptieren. Tauschen Sie
jQuery(document).ready(function() {
jQuery('#bookWidget-44005-75744-0-1589444240').bookWidget({
propid:75744,
formAction:'https://beds24.com/booking.php',
widgetLang:'en',
widgetType:'BookingStrip' });
gegen diesen Code aus:
$(document).ready(function() {
$('#bookWidget-44005-75744-0-1589444240').bookWidget({
propid:75744,
formAction:'https://beds24.com/booking.php',
widgetLang:'en',
widgetType:'BookingStrip' });
Unterkategorien
Diese Kategorie enthält die folgenden 3 Unterkategorien (3 insgesamt):
Seiten in der Kategorie „Widgets“
Folgende 10 Seiten sind in dieser Kategorie, von 10 insgesamt.
