--- language: de title: Wie füge ich die Buchungsfunktion zu meiner Website hinzu? category: Online booking summary: Lerne vier einfache Wege kennen, die Online-Buchung von TuCalendi per Link, Button oder Inline-Kalender in deine Website einzubinden. --- # Wie füge ich die Buchungsfunktion zu meiner Website hinzu? In diesem Tutorial zeigen wir dir, wie einfach du die **Online-Buchungsfunktion** für Meetings, Termine oder jedes andere Event, das du mit TuCalendi planst, zu deiner Website hinzufügen kannst. Es gibt mehrere Möglichkeiten, die Funktionen von TuCalendi in deine Website zu integrieren: - **Einen Link zur Buchungsseite auf deiner Website einfügen.** Das ist die einfachste Option. Dabei verlinkst du ein beliebiges Element deiner Website mit deiner persönlichen **Online-Buchungsseite** bei TuCalendi. - **Einen Buchungsbutton auf einer bestimmten Seite deiner Website hinzufügen.** Bei dieser Option platzierst du einen Button an einer bestimmten Stelle auf deiner Kontaktseite oder einer anderen Seite deiner Website. - **Einen Buchungsbutton auf allen Seiten deiner Website hinzufügen.** In diesem Fall wird der Buchungsbutton als **"schwebender Button"** auf allen Seiten an derselben Stelle angezeigt (unten rechts). Der Vorteil dieser Option: Besucher sehen den Buchungsbutton sofort und können von jeder Seite aus einen Termin buchen. - **Die Buchungsseite als Inline-Kalender auf deiner Website anzeigen.** Bei dieser Option wird die Online-Buchungsfunktion von TuCalendi als Fenster an einer **festen Position** auf einer bestimmten Seite deiner Website angezeigt. ## Option 1: Link zur Buchungsseite Erstelle in deinem **Content-Management-System** ein beliebiges Element oder füge einem Wort oder einer Wortgruppe im Inhalt einen Link zu deiner TuCalendi-Buchungsseite hinzu. **So findest du den Link zu deinen Kalendern oder zu einem Event**, das du in TuCalendi erstellt hast: Melde dich mit deinem Benutzernamen und Passwort bei deinem TuCalendi-Konto an. Gehe zur Option **"Kalender"**. ![Kalender mit Event](https://www.tucalendi.com/images/content/online-booking/v2-calendario-evento.png) **Kopiere die URL und füge sie** in deinem Content-Management-System in das Element deiner Website ein, in dem der Link erscheinen soll. ## Option 2: Button auf einer Seite deiner Website Du kannst einen Button, der zum Online-Buchungssystem von TuCalendi führt, an einer beliebigen Stelle auf einer oder mehreren Seiten deiner Website einfügen. Du könntest den Button zum Beispiel auf der Seite "Kontakt" deiner Website einbauen. **So erstellst du einen Button, der zu deinen Kalendern oder zu einem deiner Events** in TuCalendi führt: Melde dich mit deinem Benutzernamen und Passwort bei deinem TuCalendi-Konto an und gehe zur Option **"Kalender"**. ![Kalender mit einem Event](https://www.tucalendi.com/images/content/online-booking/v2-calendario-con-evento.png) **Klicke auf die drei Punkte** im Block des Events, für das du einen Button erstellen möchtest: ![Event-Menü](https://www.tucalendi.com/images/content/online-booking/v2-menu-evento.png) Klicke auf die Option **"Integrationscode"**: ![Widget-Einstellungen](https://www.tucalendi.com/images/content/online-booking/configuracion-widget.png) Klicke im Block **"Button"** auf **"Auswählen"**: ![Button-Code einbetten](https://www.tucalendi.com/images/content/online-booking/v2-incrustar-codigo-boton.png) **Du brauchst keine Programmierkenntnisse**: Lege einfach fest, wie der Button aussehen soll. Kopiere den Code, der im Block **"Code einbetten"** angezeigt wird, und füge ihn mit deinem Content-Management-System an der gewünschten Stelle auf deiner Website ein. ## Option 3: Schwebender Button auf allen Seiten deiner Website Mit der Option **schwebender Button** erscheint der Button immer unten rechts auf jeder Seite deiner Website. So können deine Besucher und Kunden von jeder Seite aus einen Termin bei dir oder deinem Team buchen. **Der Ablauf ist derselbe wie in Option 2 beschrieben**, allerdings gehst du in diesem Fall so vor: Sobald du in der Button-Konfiguration bist, gehe zum Block **"Button-Einstellungen"** und wähle unter **"Button-Typ"** die Option **"Schwebender Button"**. Der Code wird automatisch aktualisiert, um diesen Button-Typ zu erstellen. Kopiere anschließend den Code, der im Block **"Code einbetten"** angezeigt wird. Füge den Code zum Schluss mit deinem Content-Management-System in den Header des Quellcodes deiner Website ein, direkt vor dem Tag ****. ## Option 4: Inline-Kalender auf einer bestimmten Seite deiner Website Bei dieser Option wird die Lösung von TuCalendi als Fenster an einer **festen und bestimmten Position auf der Seite** deiner Wahl integriert. Auch dieser Ablauf ist ganz unkompliziert. Wir haben ihn so einfach gestaltet, dass du **kein technisches Wissen** benötigst. Melde dich mit deinem Benutzernamen und Passwort bei deinem TuCalendi-Konto an und gehe zur Option **"Kalender"**. ![Kalender mit einem Event](https://www.tucalendi.com/images/content/online-booking/v2-calendario-con-evento.png) **Klicke auf die drei Punkte** im Block des Events, für das du einen Inline-Kalender erstellen möchtest: ![Event-Menü](https://www.tucalendi.com/images/content/online-booking/v2-menu-evento.png) Klicke auf die Option **"Integrationscode"**: ![Widget-Einstellungen](https://www.tucalendi.com/images/content/online-booking/configuracion-widget.png) Klicke im Block **"Inline-Kalender"** auf **"Auswählen"**: ![Code für Inline-Kalender einbetten](https://www.tucalendi.com/images/content/online-booking/v2-incrustar-codigo-calendario-enlinea.png) Kopiere den Code, der im Block **"Code einbetten"** angezeigt wird, und füge ihn genau an der Stelle deiner Website ein, an der der Kalender erscheinen soll. Dafür nutzt du dein Content-Management-System, aber **Programmierkenntnisse sind nicht nötig**. > [!WARNING] > Wenn du die Farben des Kalenders und andere Optionen ändern möchtest, musst du das in den Einstellungen zum [Widget-Erscheinungsbild](https://www.tucalendi.com/en/s/widget/widget-appearance) tun.