Calendly: Jak osadzić wyskakujące okienko planowania lub osadzony kalendarz w swojej witrynie lub witrynie WordPress

Widżet planowania kalendarza

Kilka tygodni temu byłem na stronie i zauważyłem, że gdy kliknąłem link, aby umówić się z nimi na spotkanie, nie zostałem przeniesiony do witryny docelowej, pojawił się widżet, który opublikował Calendly harmonogram bezpośrednio w wyskakującym okienku. To świetne narzędzie… trzymanie kogoś na swojej stronie jest znacznie lepszym doświadczeniem niż przekazywanie go na zewnętrzną stronę.

Co to jest Calendly?

Calendly integruje się bezpośrednio z Twoim Obszar roboczy Google lub inny system kalendarzy do tworzenia formularzy harmonogramów, które są zarówno piękne, jak i łatwe w użyciu. A co najlepsze, możesz nawet ograniczyć czas, w jakim pozwalasz komuś połączyć się z Tobą w Twoim kalendarzu. Na przykład często mam tylko kilka godzin wolnego czasu w określone dni na spotkania zewnętrzne.

Korzystanie z takiego harmonogramu jest również znacznie lepszym doświadczeniem niż samo wypełnianie formularza. Dla mnie firma doradcza ds. transformacji cyfrowej, organizujemy grupowe imprezy sprzedażowe, na których na spotkaniu uczestniczy zespół kierowniczy. Integrujemy również naszą internetową platformę spotkań z Calendly, dzięki czemu zaproszenia z kalendarza zawierają wszystkie łącza do spotkań online.

Calendly uruchomił skrypt widżetu i arkusz stylów, które świetnie sprawdzają się przy osadzeniu formularza planowania bezpośrednio na stronie, otwieranym przyciskiem, a nawet pływającym przyciskiem w stopce witryny. Skrypt dla Calendly jest dobrze napisany, ale dokumentacja do zintegrowania go z twoją witryną wcale nie jest dobra. W rzeczywistości jestem zaskoczony, że Calendly nie opublikowało jeszcze własnych wtyczek lub aplikacji na różne platformy.

Jest to niezwykle przydatne. Niezależnie od tego, czy korzystasz z usług domowych i chcesz zapewnić swoim klientom możliwość umówienia spotkania, wyprowadzasz psa, firmę SaaS, która chce, aby goście zaplanowali prezentację, czy też dużą korporację z wieloma członkami, musisz łatwo zaplanować... Calendly a wbudowane widżety to świetne narzędzie samoobsługowe.

Jak osadzić Calendly w swojej witrynie?

O dziwo, wskazówki dojazdu znajdziesz tylko na tych osadzonych na Typ zdarzenia poziom, a nie rzeczywisty poziom wydarzenia na Twoim koncie Calendly. Kod znajdziesz w menu rozwijanym ustawień typu zdarzenia w prawym górnym rogu.

kalendarzowo osadzić

Gdy to klikniesz, zobaczysz opcje dla typów osadzania:

osadź tekst wyskakujący

Jeśli pobierzesz kod i umieścisz go w dowolnym miejscu na swojej stronie, jest kilka problemów.

  • Jeśli chcesz wywołać kilka różnych widżetów na jednej stronie… być może mieć przycisk uruchamiający harmonogram (tekst wyskakujący) oraz przycisk stopki (widżet wyskakujący)… zamierzasz dodać arkusz stylów i kilka skryptów razy. To niepotrzebne.
  • Wywoływanie wbudowanego skryptu zewnętrznego i pliku arkusza stylów w witrynie nie jest najbardziej optymalnym sposobem dodania usługi do witryny.

Moim zaleceniem byłoby załadowanie arkusza stylów i kodu JavaScript w nagłówku… a następnie użycie innych widżetów tam, gdzie mają one sens w całej witrynie.

Jak działają widżety Calendly

Calendly ma dwa pliki, które są potrzebne do osadzenia w witrynie, arkusz stylów i javascript. Jeśli zamierzasz wstawić je do swojej witryny, dodałbym następujące w sekcji nagłówka kodu HTML:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Jeśli jednak korzystasz z WordPressa, najlepszą praktyką będzie użycie swojego functions.php plik, aby wstawić skrypty z wykorzystaniem najlepszych praktyk WordPressa. Tak więc w moim motywie potomnym mam następujące wiersze kodu do załadowania arkusza stylów i skryptu:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Spowoduje to załadowanie ich (i buforowanie) w całej mojej witrynie. Teraz mogę używać widżetów tam, gdzie mi się podobają.

Przycisk stopki Calendly

Chcę wywołać konkretne zdarzenie, a nie typ zdarzenia w mojej witrynie, więc ładuję w stopce następujący skrypt:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Zobaczysz Calendly skrypt rozkłada się w następujący sposób:

  • URL – dokładnie zdarzenie, które chcę załadować do mojego widżetu.
  • Tekst – tekst, który ma mieć przycisk.
  • Kolor – kolor tła przycisku.
  • kolor tekstu – kolor tekstu.
  • branding – usunięcie brandingu Calendly.

Wyskakujące okienko tekstowe Calendly

Chcę, aby było to również dostępne w mojej witrynie za pomocą linku lub przycisku. Aby to zrobić, wykorzystujesz zdarzenie onClick w swoim Calendly tekst zakotwiczenia. Mój ma dodatkowe klasy do wyświetlania go jako przycisku (nie widać na poniższym przykładzie):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Ta wiadomość może służyć do posiadania wielu ofert na jednej stronie. Być może masz 3 rodzaje wydarzeń, które chcesz osadzić… po prostu zmodyfikuj adres URL odpowiedniego miejsca docelowego, a to zadziała.

Wyskakujące okienko Calendly z wbudowanym kodem źródłowym

Wbudowane osadzanie jest nieco inne, ponieważ wykorzystuje div, który jest specjalnie wywoływany przez klasę i miejsce docelowe.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Znowu jest to przydatne, ponieważ możesz mieć wiele divów z każdym Calendly harmonogram na tej samej stronie.

Uwaga na marginesie: Chciałbym, żeby Calendly zmodyfikował sposób, w jaki zostało to zaimplementowane, aby nie musiało to być tak techniczne. Byłoby wspaniale, gdybyś mógł po prostu mieć klasę, a następnie użyć docelowego atrybutu href do załadowania widżetu. To wymagałoby mniej bezpośredniego kodowania w systemach zarządzania treścią. Ale… to świetne narzędzie (na razie!). Na przykład – wtyczka WordPress ze skrótami byłaby idealna dla środowiska WordPress. Jeśli jesteś zainteresowany, Calendly… Z łatwością zbuduję to dla Ciebie!

Zacznij korzystać z Calendly

Zastrzeżenie: Jestem użytkownikiem Calendly, a także współpracownikiem ich systemu. Ten artykuł zawiera linki partnerskie w całym artykule.