Wie bettet man das Buchungs-Widget in eine reaktionsfähige Website ein?

Wie kann ich das Buchungs-Widget auf der Website einbinden

 

Es gibt verschiedene Möglichkeiten zur Integration der Onlinebuchung.

Einfache Seitenweiterleitung:

https://phorest.com/book/salons/subdomain

 

Einbettung via iFrame (wird nicht empfohlen):

<iframe src="https://phorest.com/book/salons/subdomain" width="700px" height="500px" name="onlinebooking" title="onlinebooking" style="border:none;"></iframe>

 

Integration des "Floating-Menus" via JavaScript:

<script src="https://booking-widget.phorestcdn.com/obwidget.bundle.js"></script><script>window.widget = new OBWidget('subdomain')</script>

 

Achtung!

*subdomain* bitte durch die eigene Subdomain ersetzen

 

Tipp

Mit der folgenden CSS kannst du den Jetzt buchen Button am unteren Rechten Bildschirmrand ausblenden.

.ob-widget-btn {visibility: hidden;}

 

 

 

Hier noch ein paar Hinweise, wie der Code in einigen der beliebten Web Builder CMS einfügt werden kann:

 

Squarespace

  1. Gehe zu Einstellungen
  2. Dann Erweitert
  3. Dann Code Injection
  4. Kopiere dann den Code in den Header

 

Wix

  1. Website Öffnen & Bearbeiten
  2. Dann Einstellungen und Website-Verwaltung wählen und im nächsten Menü nochmals auf Einstellungen klicken
  3. Hier den Bereich Erweitert suchen und Benutzerdefinieter Code wählen
  4. Hier im Textkörper - Ende den Code einfügen und die Option Body - end wählen

 

Wix (alte Version)

  1. Website Öffnen & Bearbeiten
  2. Dann im Menü Einstellungen und anschließend Analysewerkzeuge wählen
  3. Jetzt mit dem Button + Neues Werkzeug ein Benutzerdefiniertes Werkzeug hinzufügen
  4. Hier den Code einfügen und die Option Body - end wählen

 

Weebly

  1. Edit Site 
  2. Then Settings (in navigation)
  3. Then SEO 
  4. Paste entire code excerpt into Header Code

 

Wordpress

Die Integration mit Wordpress erfordert das Herunterladen eines Plugins namens 'Insert Header and Footer Scripts'

  1. Wähle Plugins vom Dash 
  2. Klicke auf Hinzufügen
  3. Suche nach Header and Footer Scripts und installiere es
  4. Füge dann den Code in der Header Section ein

 

Jimdo

  1. Einstellungen 
  2. Header bearbeiten
  3. Füge dann den Code ein

 

 

 


Link zur dedizierten Online-Buchungsseite


Wenn der Button "Jetzt Buchen" auf Ihrer Website hinzugefügt wird, ist es nicht notwendig, einen separaten Button "Online buchen" hinzuzufügen.


Wenn du auf deiner Website bereits einen Button "Online buchen" hast, welchen du weiterhin verwenden möchtest, befolge die folgenden Schritte:


Installiere zunächst die Schaltfläche Floating-Jetzt-Buchen-Schaltfläche wie oben beschrieben.

Sobald dies geschehen ist, kannst du den Button mit folgenden Link verknüpfen. Für "yourwebsiteurl" verwendest du natürlich deine eigene Domain:

http://yourwebsiteurl/#onlinebookings

 

 


Verwendung von IFrames


Wir empfehlen den Einsatz von IFrames auf Webseiten aus verschiedenen Gründen nicht, aber vor allem, weil diese Seiten von Chrome und Safari als ungesichert gekennzeichnet werden. Der andere Grund ist, dass die Verwendung des neuen Widgets für Online-Buchungen erwiesenermaßen besser ist.



Wenn du aus irgendeinem Grund einen IFrame auf deiner Website für deine Online-Buchungen verwenden möchtest, folge den Schritten unter "Link zur dedizierten Online-Buchungsseite", die den gleichen Effekt bietet.

 

 


Design anpassen 

Wichtig: Du kannst das Design selber in Phorest Desktop anpassen in den Online-Buchungs-Einstellungen. Dazu müssen wir vorher eventuell altes CSS bei uns entfernen. Kontaktiere uns dazu bitte.

 

Beispiel echter Salon:

http://www.colohrumhaar.de/

War dieser Beitrag hilfreich?
4 von 5 fanden dies hilfreich