Einbindung in eigene Webseite
Wie kann ich die Online-Terminbuchung in meine Webseite einbinden?
Wenn eine eigene Webseite genutzt wird, gibt es verschiedene Möglichkeiten die Terminbuchung von Terminpanda einzubinden.
Variante 1: Weiterleitung zu Terminpanda
Auf Deiner Webseite kannst Du an eine passende Stelle, z. B. als Button, im Menü oder im Text, einen Link zu Deinem Profil bei Terminpanda setzen. Hierzu navigieren wir 
Hauptmenü ->Online- Einstellungen und kopieren dort den Link zum Online-Profil. Das geht mit einem Rechtsklick oder auch über Profil teilen. Der Link sieht so aus:
https://terminpanda.de/anbieter/CosmeticsParadise+Q4-I
Im nächsten Schritt bauen wir den Link in die eigene Webseite ein. Das ist bei jeder Webseite unterschiedlich gelöst, daher können wir hier keine Anleitung bereitstellen.
Das kann so aussehen:
Link zum Online-Profil im Fließtext.
Wenn einer der Links oben angeklickt wird, öffnet sich im gleichen oder in einem neuen Fenster das Profil bei Terminpanda.
Nun bieten wir noch eine extra Option an, damit sich direkt das Fenster zur Buchung öffnet. Schließlich war Dein Kunde bereits auf Deiner Webseite und benötigt nicht nochmals eine Vorstellung auf eurer Profilseite. Dazu genügt es, am Ende des Links ein ?embedded=true anzuhängen. Damit man das nicht händisch machen musst, findet sich unter Kalender -> Menü -> Online-Terminbuchung -> Webseiten-Einbindung der fertigen Link. Dieser sieht so aus:
https://terminpanda.de/anbieter/CosmeticsParadise+Q4-I?embedded=true Nun öffnet sich direkt das Fenster zur Terminbuchung.
Variante 2: Anzeige der Buchung auf der Webseite
Auf Webseiten gibt es die Möglichkeit, ein sogenanntes iFrame zu nutzen. (Erklärung vom CHIP Magazin) Das ist ein Fenster innerhalb der eigenen Webseite, welches den Inhalt einer anderen Webseite anzeigt. Am häufigsten wird das z. B. für YouTube Videos genutzt. Es hat den Vorteil, dass der Kunde Deine Webseite nicht verlassen muss und sich z. B. nach einer Buchung noch weiter über Dein Angebot informiert.
Die Einbindung auf der eigenen Seite kann in einem Teilbereich erfolgen oder man kann sie auch als eigene Unterseite nutzen. Wie das praktisch funktioniert, ist hier erneut individuell von Deiner Webseite abhängig. Wenn Du dir eine Webseite über WordPress, GoDaddy, Elementor oder ähnliche Anbieter selbst zusammenklickst, findest ihr die Funktion häufig unter "html", "embed" oder "iFrame".
Dort muss dann folgender HTML Code eingefügt werden:
<iframe width="100%" height="700px" src="https://terminpanda.de/anbieter/CosmeticsParadise+Q4-I?embedded=true">
</iframe>Je nach eigener Seite kannst Du die Bestandteile width="100%" height="700px" komplett auslassen oder Du musst sie individuell anpassen. In der Praxis kann das dann z. B. so aussehen:
Anschließend empfehlen wir, die Darstellung in mehreren Browsern, z. B. Chrome und Safari, und auf mobilen Endgeräten auszuprobieren.
Anpassung der Hintergrundfarbe
Wie im Screenshot oben zu sehen, nutzen wir eine Hintergrundfarbe für den iFrame. Falls diese Farbe nicht mit Deiner Webseite harmoniert, gibt es die Möglichkeit, sie anzupassen. Dazu wird am Ende des Links folgender Text angehangen:
&color=000000
Die 000000 sind dabei der HEX Farbcode für die Wunschfarbe, in diesem Fall Schwarz. Der komplette Link, den Du im iFrame einbetten musst, sieht dann so aus:
frame width="100%" height="700px" src="https://terminpanda.de/anbieter/CosmeticsParadise+Q4-I?embedded=true&color=000000">
</iframe>Wie findest Du nun den passenden Hexwert für Deine Wunschfarbe? Einfach Farbwähler in Google eintippen, dort gibt es eine direkte Funktion. Achte darauf, dass Du das # beim Code weglässt!
Last updated