Acuity Scheduling zu deiner Website hinzufügen

Überprüfe die verschiedenen Möglichkeiten, wie du deine Termin-Seite mit deiner Website verbinden kannst.

Lasse deine Kunden direkt über deine Website buchen, indem du deinen Terminplaner darin einbettest. Füge Buttons zur Buchung und Buchungsleisten zu den Seiten deiner Website hinzu, um deine Kunden zu deinem Terminplaner zu führen.

Tipp: Wenn du loslegst und feststellst, dass du mehr praktische Hilfe beim Einrichten von Acuity Scheduling benötigst, kannst du einen professionellen Experten beauftragen.

Video ansehen

Was du hinzufügen kannst

Es gibt drei Möglichkeiten, Acuity zu einer Website hinzuzufügen:

• Eingebetteter Terminplaner – Du kannst das gesamte Online-Buchungserlebnis von Acuity auf deiner Website einbetten.
• Buchungs-Button – Du kannst auf deiner von Acuity generierten Termin-Seite für Kunden einen Button hinzufügen, der zu deinem Terminplaner führt.
• Buchungsleiste – Du kannst oben auf den Seiten deiner Website eine Leiste mit einem Buchungs-Button hinzufügen.

Deinen Terminplaner einbetten

Du kannst deinen Terminplaner in fast jede Website einbetten, egal ob du eine Squarespace-Website oder eine Website von einem anderen Anbieter verwendest. Du kannst deinen Standard-Terminplaner oder einen beliebigen Terminplaner, auf den du direkt verlinken kannst, einbetten.

Squarespace-Websites

Füge einen Termin-Block zu deiner Website hinzu.

Tipp: Um deine Buchung mit einem Passwort zu schützen, füge deinen Termin-Block zu einer Seite mit einem Seitenpasswort hinzu. Um deine Buchung exklusiv für Website-Mitglieder zur Verfügung zu stellen, füge Digitale Artikel zu deiner Website hinzu und füge dann deinen Termin-Block in deine zugriffsbeschränkten Inhalte ein.

Andere Websites

Um deinen Terminplaner in andere Websites einzubetten, kopiere zuerst den Einbettungscode, den Acuity für dich generiert, und füge ihn dann zu deiner Website hinzu. Die genauen Schritte zum Hinzufügen zu deiner Website variieren je nach Anbieter, beinhalten jedoch das Hinzufügen von HTML. Im untenstehenden Abschnitt findest du Tipps für bestimmte Anbieter. Wende dich andernfalls an deinen Website-Builder.

So erhältst du deinen Einbettungscode:

1. Klicke in Acuity auf Termin-Seite und dann auf Link.
2. Verwende im Abschnitt Direkte Links und Einbettung das Drop-down-Menü, um auszuwählen, ob du deinen Standard-Terminplaner oder einen spezialisierteren Terminplaner, z. B. für einen bestimmten Kalender oder eine bestimmte Terminart, einbetten möchtest.
3. Klicke entweder auf den Tab Terminplaner einbetten oder auf den Tab Andere einbetten. Es wird nur einer von beiden angezeigt.
4. Klicke auf Kopieren.

Einen Buchungs-Button hinzufügen

Wie du einen Buchungsbutton hinzufügst, hängt davon ab, ob du eine Squarespace-Website oder einen anderen Anbieter verwendest. Du kannst einen Button, der zu deiner Standard-Termin-Seite für Kunden oder zu einem beliebigen Terminplaner, auf den du direkt verlinken kannst,, einbetten.

Squarespace-Websites

Füge einen Button-Block zu deiner Website hinzu. Verwende bei der Auswahl des Links für deinen neuen Button einen Link zu deiner Terminplanungs-Seite oder einen direkten Link.

Andere Websites

Um einen Buchungsbutton zu deiner Website hinzuzufügen, kopiere zuerst den Code, den Acuity für dich generiert, und füge ihn dann zu deiner Website hinzu.

So erhältst du den Code:

1. Klicke in Acuity auf Termin-Seite und dann auf Link.
2. Verwende im Abschnitt Direkte Links und Einbettung das Drop-down-Menü, um auszuwählen, ob du auf deinen Standard-Terminplaner oder einen spezialisierteren Terminplaner, z. B. für einen bestimmten Kalender oder eine bestimmte Terminart, verlinken möchtest.
3. Klicke auf den Tab Buchungs-Button.
4. Klicke auf Kopieren.

Füge den Code, den du kopiert hast, zum Code deiner Website hinzu. Die genauen Schritte zum Hinzufügen zu deiner Website variieren je nach Anbieter. Im untenstehenden Abschnitt findest du Tipps für bestimmte Anbieter. Wende dich andernfalls an deinen Website-Builder.

Eine Buchungsleiste hinzufügen

Um eine Buchungsleiste zu deiner Website hinzuzufügen, kopiere zuerst den Code, den Acuity für dich generiert, und füge ihn dann zu deiner Website hinzu. Wie du eine Buchungsleiste hinzufügst, hängt davon ab, ob du eine Squarespace-Website oder einen anderen Anbieter verwendest. Deine Buchungsleiste enthält einen Button, der zu deiner Standard-Termin-Seite für Kunden oder zu einem beliebigen Terminplaner führt, auf den du direkt verlinken kannst.

So erhältst du den Code:

1. Klicke in Acuity auf Termin-Seite und dann auf Link.
2. Verwende im Abschnitt Direkte Links und Einbettung das Drop-down-Menü, um auszuwählen, ob du auf deinen Standard-Terminplaner oder einen spezialisierteren Terminplaner, z. B. für einen bestimmten Kalender oder eine bestimmte Terminart, verlinken möchtest.
3. Klicke auf den Tab Buchungsleiste.
4. Klicke auf Kopieren.

Squarespace-Websites

Verwende Code einfügen, um den Code in den Footer-Abschnitt deiner Website einzufügen.

„Code einfügen“ ist eine Premium-Funktion, die im Rahmen von Business- und E-Commerce-Abos verfügbar ist.

Andere Websites

Füge den Code, den du kopiert hast, zum Code deiner Website hinzu. Die genauen Schritte zum Hinzufügen zu deiner Website variieren je nach Anbieter. Im untenstehenden Abschnitt findest du Tipps für bestimmte Anbieter. Wende dich andernfalls an deinen Website-Builder.

Tipps zur Verwendung anderer Website-Builder

Drupal

Ändere dein Textformat zu „Full HTML“, um benutzerdefiniertes HTML hinzuzufügen, und füge dann den Code-Schnipsel von Acuity hinzu. 

GoDaddy

Folge den Anweisungen von GoDaddy zum Hinzufügen von benutzerdefiniertem HTML, um den von Acuity automatisch generierten Code hinzuzufügen.

Ionos

Füge den automatisch generierten Einbettungscode von Acuity zu einem Widget/HTML-Element hinzu. Möglicherweise musst du deinen Terminplaner in der Seitenansicht anzeigen, um zu überprüfen, ob er ordnungsgemäß funktioniert.

Um Ionos aufzufordern, deinen eingebetteten Terminplaner für Kunden auf Mobilgeräten anzuzeigen, deaktiviere die Option, nur optimierte Inhalte auf Smartphones und Tablets anzuzeigen.

Leadpages

Verwende das HTML-Widget von Leadpages, um den Code-Schnipsel von Acuity hinzuzufügen.

Shopify

Verwende den HTML-Editor, um den Code von Acuity zu einer deiner Seiten hinzuzufügen. Speichere deine Änderungen, bevor du versuchst, deinen neuen Terminplaner anzuzeigen.

Vistaprint/Webs.com

Verwende die benutzerdefinierte HTML-Funktion, um den automatisch generierten Code von Acuity zu deiner Website hinzuzufügen.

Weebly

Ziehe das Einbettungscode-Element von Weebly auf deine Webseite und füge dann den automatisch generierten Code von Acuity zu dem Widget hinzu.

Wix

Folge den Schritten von Wix, um das HTML-Element zu deiner Website hinzuzufügen. Wenn du bereit bist, Code zum HTML-Element hinzuzufügen, verwende das Code-Schnipsel, das Acuity für dich generiert.

Hinweis: Es ist nicht möglich, deinen Terminplaner einzubetten, wenn du Wix Artificial Design Intelligence anstelle des Editors verwendest.

Wenn der Rahmen, in dem sich dein eingebetteter Terminplaner befindet, kürzer ist als der Terminplaner selbst, kann es bei einigen Mobilgeräten zu Fehlern bei der Buchung kommen. Um dies zu verhindern, verwende den Wix Mobile-Editor, um den unteren Rand des eingebetteten Terminplaners nach unten zu ziehen, bis der gesamte Terminplaner sichtbar ist. Stelle sicher, dass der untere Rand des Terminplaners während des gesamten Buchungsvorgangs sichtbar ist.

WordPress

Um deinen Terminplaner in deine WordPress-Website einzubetten, verwende den Text-Editor von WordPress, um den Einbettungscode von Acuity hinzuzufügen.

So bettest du deinen Terminplaner ein:

1. Hol dir den Einbettungscode für deinen Terminplaner, indem du zum Menü „Link zur Termin-Seite“ gehst, auf Terminplaner einbetten und dann auf Kopieren klickst.
2. Verwende den Text-Editor von WordPress, um den Code, den du auf eine deiner Seiten kopiert hast, einzufügen.

Hinweis: Du kannst deinen Terminplaner auf Websites einbetten, die mit WordPress erstellt wurden, aber nicht auf Websites, die von WordPress.com gehostet werden. Von WordPress.com gehostete Websites haben URLs, die auf wordpress.com enden. Wenn du davon betroffen bist, füge stattdessen einen direkten Link zu deiner Termin-Seite für Kunden hinzu.

Zenfolio

Befolge die Anweisungen von Zenfolio zum Erstellen einer benutzerdefinierten Seite und zum Hinzufügen und Einbetten von Code. Verwende den Code von Acuity, um den Terminplaner einzubetten. 

Den Buchungs-Button und die Buchungsleiste anpassen

Schriftarten und andere Stile des Buchungs-Buttons und in der Buchungsleiste entsprechen in der Regel den Standardeinstellungen für deine Website.

Du kannst den Wortlaut des Buttons oder der Leiste ändern, indem du den von Acuity bereitgestellten Code-Schnipsel bearbeitest.

Die Buchungsleiste und der Buchungs-Button ändern ihre Farbe in Übereinstimmung mit der Farbe der Buttons und Akzente auf deinem Terminplaner. Erfahre, wie du die Farben deines Terminplaners ändern kannst.

Tipp: Um die Website-Navigation für ein möglichst breites Publikum zu ermöglichen, ist es wichtig, die Barrierefreiheit während des Designprozesses zu berücksichtigen. Erfahre mehr über das Erstellen barrierefreier Website-Inhalte.