Hur man integrerar bokningsprogram som Calendly, TidyCal eller Youcanbookme

Den här sidan visar hur du integrerar bokningsprogramvara med systeme.io.

Vad du behöver:

• Ett systeme.io konto
• En försäljningssida för tratten
• Ett Calendly-, TidyCal- eller YouCanBook.me-konto

Följande metod fungerar med Calendly, TidyCal och YouCanBook.me.

Vi tar Calendly som exempel.

1. På ditt Calendly-konto: Generera och kopiera inbäddningskoden för din kalender/evenemang.

2. På ditt systeme.io konto:

Lägg till elementet Raw HTML på din sida.

Klistra in koden som tillhandahålls av din kalenderprogramvara i elementet 'Raw HTML' som du just lade till, och spara sedan sidan.

Slutligen, när du förhandsgranskar din sida, kommer du att se Calendly-kalendern.

Hur man integrerar Calendly i en popup

Följ de föregående stegen, men lägg till ett Raw HTML-element i popupen där du vill att din kalender ska visas.

1. I din popup anpassad kod

Lägg till ett id    till div    som Calendly tillhandahåller. Du kan använda vilket värde som helst; Men se till att det är unikt för sidan.

2. På huvudredaktörens sida

Gå till Inställningar, klicka på Redigera sidfotskod.

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

Om du valde ett annat id    än calendly-container   , se till att ersätta det efter att du klistrat in koden.

Hur man integrerar TidyCal i en popup

Här är ett exempel:

1. TidyCal tillhandahöll en inbäddningskod liknande den nedan:

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

2. Lägg först till ett Raw HTML-element i din popup. Kopiera sedan endast följande rad från din TidyCal-kod och klistra in den i elementet: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>    och klistra in den i ditt HTML-element.

3. Gå sedan till sidinställningarna och klicka på 'Redigera sidfotskod'. Du behöver klistra in resten av koden som tillhandahålls av TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>    och inkludera utdraget nedan:

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