Auf dieser Seite erfahren Sie, wie Sie Terminbuchungssoftware mit systeme.io integrieren.

Sie benötigen: 

• Ein systeme.io-Konto
• Eine Sales Funnel Seite
• Ein Calendly, TidyCal oder YouCanBook.me-Konto

Die folgende Methode funktioniert mit Calendly, TidyCal und YouCanBook.me.

Wir verwenden Calendly als Beispiel.

1. In Ihrem Calendly-Konto: Erstellen Sie den Einbettungscode für Ihren Kalender bzw. Ihr Event und kopieren Sie ihn.

2. In Ihrem systeme.io-Konto:

Fügen Sie das Rohes HTML Element in Ihre Seite ein.

Fügen Sie den von Ihrer Kalender-Software bereitgestellten Code in das Element "Rohes HTML“ ein, das Sie gerade hinzugefügt haben, und speichern Sie anschließend die Seite.

Abschließend wird in der Vorschau Ihrer Seite der Calendly-Kalender angezeigt.

Hinweis: Diese Funktion ist sehr nützlich, da Sie damit den Facebook-Pixel zu Ihrer Buchungsseite hinzufügen können, was bei einigen Terminbuchungsplattformen nicht immer direkt möglich ist.

So integrieren Sie Calendly in ein Pop-up

Befolgen Sie die vorherigen Schritte, fügen Sie jedoch ein Raw HTML-Element zu dem Pop-up hinzu, an der Stelle, an der Ihr Kalender angezeigt werden soll.

1. Im benutzerdefinierten Code Ihres Pop-ups

Fügen Sie dem von Calendly bereitgestellten div -Element ein id -Attribut hinzu. Sie können einen beliebigen Wert verwenden. Stellen Sie jedoch sicher, dass dieser auf der Seite eindeutig ist.

2. Im Haupteditor

Gehen Sie zu Einstellungen und klicken Sie auf Footer-Code bearbeiten.

<script>
  document.addEventListener('open_popup', function() {
    Calendly.initInlineWidget({
      url: 'https://calendly.com/YOUR_CALENDLY_LINK',
      parentElement: document.getElementById('calendly-container')
    })
  })
</script>

Wenn Sie einen anderen id -Namen als calendly-container gewählt haben, ersetzen Sie ihn nach dem Einfügen des Codes entsprechend.

So integrieren Sie TidyCal in ein Popup

Hier ist ein Beispiel:

1. TidyCal hat einen Einbettungscode ähnlich dem folgenden bereitgestellt:

<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>
<script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>

2. Fügen Sie zunächst ein HTML-Element in das Popup ein. Kopieren Sie anschließend nur die folgende Zeile aus Ihrem TidyCal-Code und fügen Sie sie in das Element ein:

<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>   und fügen Sie sie in Ihr HTML-Element ein.

3. Gehen Sie dann zu den Seiteneinstellungen und klicken Sie auf "Fußzeilencode bearbeiten". Sie müssen den Rest des von TidyCal bereitgestellten Codes einfügen<script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>   sowie das Hinzufügen des folgenden Snippets:

<script>
  document.addEventListener('open_popup', function(){
    const embedTarget = document.querySelector('div.tidycal-embed')
    window.TidyCal?.init(embedTarget) 
  })
</script>