Hvordan man integrerer aftalebookingssoftware som Calendly, TidyCal eller YouCanBookMe

Denne side viser dig, hvordan du integrerer aftaleplanlægningssoftware med systeme.io.

Hvad du skal bruge:

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

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

Vi bruger Calendly som et eksempel.

1. På din Calendly-konto: Generer og kopier indlejringskoden til din kalender/begivenhed.

2. På din systeme.io-konto:

Tilføj Raw HTML-elementet til din side.

Indsæt koden fra din kalendersoftware i det 'Raw HTML'-element, du lige har tilføjet, og gem derefter siden.

Endelig, når du forhåndsviser din side, vil du se Calendly-kalenderen.

Sådan integrerer du Calendly i en popup

Følg de foregående trin, men tilføj et Raw HTML-element til den popup, hvor du vil have din kalender vist.

1. I din brugerdefinerede popup-kode

Tilføj en id -attribut til div -elementet leveret af Calendly. Du kan bruge en hvilken som helst værdi; sørg dog for, at den er unik for siden.element provided by Calendly.

2. På redigeringssiden for hoveddelen

Gå til Indstillinger, og klik på Rediger sidefodskode.

<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 -navn andet end calendly-container , skal du sørge for at erstatte det, efter du har indsat koden

Sådan integrerer du TidyCal i en popup

Her er et eksempel:

1. TidyCal har leveret en indlejringskode, der ligner 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 skal du tilføje et Raw HTML-element til din popup. Kopier derefter kun følgende linje fra din TidyCal-kode og indsæt den i elementet: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>    og indsæt det i dit HTML-element.

3. Gå derefter til sideindstillingerne og klik på 'Rediger sidefodskode'. Du skal indsætte resten af ​​koden fra TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>   og inkluder uddraget nedenfor:

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