Hogyan integrálhat időpontfoglaló szoftvereket, mint a Calendly, TidyCal vagy Youcanbookme

Ez az oldal bemutatja, hogyan integrálhatja a találkozóütemező szoftvert a systeme.io-val.

Amire szüksége lesz:

• Egy systeme.io fiók
• Egy értékesítési tölcsér oldal
• Egy Calendly, TidyCal, vagy YouCanBook.me fiók

Az alábbi módszer működik a Calendly, TidyCal és YouCanBook.me esetében.

Példaként a Calendly-t fogjuk használni.

1. A Calendly fiókjában: Generálja és másolja ki a naptár/esemény beágyazási kódját.

2. A systeme.io fiókjában:

Adja hozzá a Nyers HTML elemet az oldalához.

Illessze be a naptárszoftver által biztosított kódot az imént hozzáadott 'Nyers HTML' elembe, majd mentse az oldalt.

Végül, amikor előnézetben megtekinti az oldalt, látni fogja a Calendly naptárt.

Hogyan integrálhatja a Calendly-t egy felugró ablakba

Kövesse az előző lépéseket, de adjon hozzá egy Nyers HTML elemet a felugró ablakhoz, ahol szeretné, hogy a naptár megjelenjen.

1. A felugró ablak egyéni kódjában

Adjon hozzá egy id  attribútumot a Calendly által biztosított div  elemhez. Bármilyen értéket használhat; azonban győződjön meg róla, hogy egyedi az oldalon.

2. A fő szerkesztő oldalon

Lépjen a Beállítások menüpontra, kattintson a Lábléc kód szerkesztése gombra.

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

Ha a calendly-container -től eltérő id  nevet választott, győződjön meg róla, hogy lecseréli a kód beillesztése után.

Hogyan integrálhatja a TidyCal-t egy felugró ablakba

Íme egy példa:

1. A TidyCal egy, az alábbihoz hasonló beágyazási kódot biztosított:

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

2. Először adjon hozzá egy Nyers HTML elemet a felugró ablakához. Ezután másolja csak a következő sort a TidyCal kódból, és illessze be az elembe: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>  és illessze be a HTML elemébe.

3. Ezután lépjen az oldal beállításaihoz, és kattintson a 'Lábléc kód szerkesztése' gombra. Be kell illesztenie a TidyCal által biztosított kód többi részét <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>  és hozzá kell adnia az alábbi kódrészletet:

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