So integrieren Sie eine Terminplanungssoftware wie Calendly, TidyCal oder Youcanbookme

In diesem Artikel erfahren Sie wie Sie eine Terminplanungssoftware bei systeme.io integrieren können.

Sie benötigen: 

  • ein systeme.io Konto
  • eine Sales Funnel Seite

  • ein Calendly, TidyCal oder YouCanBook.me Konto


Die folgende Methode kann mit Calendly, TidyCal & YouCanBook.me angewendet werden.


Betrachten wir als Beispiel Calendly.


1.In Ihrem Calendly Konto:

Generieren und kopieren Sie den HTML-Code Ihrer Terminplanung.


2. In Ihrem systeme.io-Konto:

Fügen Sie das "HTML Code" Element in Ihre Seite ein


Fügen Sie den von Ihrer Kalendersoftware bereitgestellten Code in den von Ihnen hinzugefügten HTML-Code ein und speichern bitte den Code und Ihre Seite.


Wenn Sie dann eine Vorschau Ihrer Seite anzeigen, sehen Sie den Calendly-Kalender.


Hinweis: Dieses Feature ist sehr nützlich, da es Ihnen ermöglicht, das Facebook Pixel zu Ihrer Terminplanung hinzuzufügen, was mit einigen Terminplanungssoftware nicht immer direkt möglich ist.


So integrieren Sie Calendly in ein Popup

Befolgen Sie alle vorherigen Schritte und danach

  1. In Ihrem benutzerdefinierten Popup-Code

Fügen Sie das Attribut id  zu dem von Calendly bereitgestellten div -Element hinzu. Sie können einen beliebigen Wert verwenden, achten Sie nur darauf, dass er für die Seite eindeutig ist.

  1. Auf der Hauptseite des Editors

Gehen Sie zur Seite Settings , klicken Sie auf Edit footer code , und fügen Sie den Code wie folgt ein

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

Wenn Sie sich entschieden haben, Ihren eigenen Wert für id zu verwenden, verwenden Sie ihn in diesem Code anstelle von calendly-container .


So integrieren Sie TidyCal in ein Popup

Zur Verdeutlichung illustrieren wir es anhand eines Beispiels:

1. Ein Code wie der folgende wurde von TidyCal zur Integration 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, in das Sie Ihren Kalender einfügen möchten. Kopieren Sie dann diese Zeile <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>