Wie füge ich Calendly direkt in eine Seite meiner Spreadmind Plattform ein?

Calendly ist ein online Tool für eine effiziente Planung von Meetings oder Telefongesprächen. Du kannst Calendly bspw. für ein kostenloses Kennenlerngespräch nutzen. In dieser Anleitung zeigen wir dir, wie du deinen Calendly Terminkalender direkt auf eine Seite in deine Spreadmind Plattform einbinden kannst: 

INHALTSVERZEICHNIS:
  1. Calendly Account registrieren
  2. Terminbuchung erstellen
  3. Code für Kalender kopieren
  4. Code für Kalender in Seite einbinden - mit Divi
  5. Code für Kalender in Seite einbinden - ohne Divi

1. Calendly Account registrieren

Um einen Terminkalender zu erstellen, benötigst du einen Calendly Account, welchen du hier registrieren kannst: Calendly. Wir haben für diese Anleitung den kostenlosen BASIC Plan von Calendly gewählt.

2. Terminbuchung erstellen

Nach deinem Login kannst du in deinem Calendly Account unter "Ereignistypen" einen neuen Ereignistyp für deine Terminbuchung erstellen oder einen bereits erstellen für das Einbetten in deine Spreadmind Plattform verwenden:

3. Code für Kalender kopieren

Klicke bei dem Ereignistyp, welchen du als Terminbuchungskalender auf deiner Spreadmind Plattform einbinden möchtest, auf den Teilen Button:

Gehe im Popup-Fenster zum Reiter "Der Website hinzufügen", wähle die Option Inline einbetten aus und klicke auf den Button "Fortfahren":

Im nächsten Schritt musst du lediglich auf den Button Code kopieren klicken, damit der oben dargestellte HTML-Code in deinen Zwischenspeicher gelegt wird: 

In der linken Spalte des Popups kannst du auch noch ein paar individuelle Anpassungen am Design vornehmen.

3. Code für Kalender in Seite einbinden – mit Divi

Logge dich nun in deine Spreadmind Plattform ein und gehe im Frontend zu der Seite, auf welcher du deinen Terminbuchungskalender einbinden möchtest. Aktiviere den visuellen Builder und füge das Code-Modul hinzu:

In den Modul-Einstellungen kannst du nun über Strg+V den HTML-Code, den du zuvor im Calendly Account in den Zwischengespeicher kopiert hast, einfügen:

Nachdem du die Modul-Einstellungen gespeichert hast, wirst du eine große leere weiße Fläche sehen, anstelle des Kalenders. Hier scheint Divi Schwierigkeiten zu haben, den Code im aktivierten visuellen Builder auslesen und darstellen zu können:

Aber keine Sorge – Speicher den Vorgang rechts unten über den Button Speichern ab und klicke oben im Admin Menü auf Visuellen Builder verlassen, um den Divi Builder zu beenden. 

Nun wird dir dein Terminbuchungskalender von Calendly direkt auf deiner Seite innerhalb deiner Spradmind Plattform angezeigt:

4. Code für Kalender in Seite einbinden – ohne Divi

Wenn du auf einer Seite den Divi Builder nicht benutzen solltest, kannst du den Code auch direkt über den Standard-Editor einbinden. Gerade wenn du die Terminbuchung innerhalb eines Online Kurses in einer Lektion anbieten möchtest und eben nicht mit Divi arbeitest, ist dies mit ein paar Klicks getan.

Wir zeigen dir dies nun am Beispiel einer Lektion. Bei einer Seite oder einem anderen Inhaltstyp ist der Vorgang genau gleich.

Gehe dazu im Backend zu "Online Kurs" > "Lektionen" zu deiner gewünschten Lektion und klicke auf "Bearbeiten" (erscheint, sobald du mit der Maus über die Zeile fährst). 

Im Bearbeitungsmodus der Lektion wechselst du im Editor in die Text-Ansicht:

In der Text-Ansicht des Editors kannst du nun jeglichen HTML-Code und eben auch Skripte, wie den von unserer Calendly Terminbuchung, einfach einfügen:

Hat das deine Frage beantwortet? Danke für dein Feedback Beim Senden Ihres Feedbacks ist ein Problem aufgetreten. Bitte versuche es später erneut.

Brauchst du noch weitere Hilfe? Kontaktiere das Spreadmind Support Team Kontaktiere das Spreadmind Support Team