Hvordan integrere timeplanleggingsprogramvare som Calendly, TidyCal eller Youcanbookme

Denne siden viser deg hvordan du integrerer avtaleplanleggingsprogramvare med systeme.io.

Hva du trenger:

• En systeme.io konto
• En salgstrakt-side
• En Calendly-, TidyCal- eller YouCanBook.me-konto

Følgende metode fungerer med Calendly, TidyCal og YouCanBook.me.

Vi bruker Calendly som eksempel.

1. På Calendly-kontoen din: Generer og kopier innbyggingskoden for kalenderen/arrangementet ditt.

2. På din systeme.io konto:

Legg til Raw HTML-elementet på siden din.

Lim inn koden fra kalenderprogramvaren din i 'Raw HTML'-elementet du nettopp la til, og lagre siden.

Til slutt, når du forhåndsviser siden din, vil du se Calendly-kalenderen.

Hvordan integrere Calendly i en popup

Følg de forrige stegene, men legg til et Raw HTML-element i popup-vinduet der du vil at kalenderen din skal vises.

1. I din popup egendefinert kode

Legg til et id til div som Calendly gir. Du kan bruke hvilken som helst verdi, men sørg for at det er unikt for siden.

2. På hovedredaktørens side

Gå til Innstillinger, klikk på Rediger bunntekstkode.

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

Hvis du valgte et id annet enn calendly-container, sørg for å erstatte det etter at koden er limt inn.

Hvordan integrere TidyCal i en popup

Her er et eksempel:

1. TidyCal leverte en innebygd kode lik den nedenfor:

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

2. Først, legg til et rå HTML-element i popup-vinduet ditt. Kopier deretter kun følgende linje fra TidyCal-koden din og lim den inn i elementet: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>     og lim den inn i HTML-elementet ditt.

3. Gå deretter til sideinnstillingene og klikk på 'Rediger bunntekstkode'. Du må lime inn resten av koden levert av TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>og inkludere utdraget nedenfor:

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