Calendly w Divi — dodaj kalendarz rezerwacji online
Calendly to jedna z najpopularniejszych platform do rezerwacji spotkań online, która świetnie sprawdza się u coachów, konsultantów, lekarzy i freelancerów. Pozwala klientowi samodzielnie wybrać dogodny termin, a Tobie eliminuje wymianę kilkunastu maili przy ustalaniu godziny. W tym poradniku pokazujemy trzy sprawdzone sposoby integracji Calendly ze stroną zbudowaną w Divi oraz wskazówki, jak dopasować wygląd kalendarza do identyfikacji wizualnej marki.
Sposób 1: Osadzenie inline (najprościej)
Najprostsza metoda polega na osadzeniu kalendarza bezpośrednio w treści strony. W panelu Calendly przejdź do ustawień osadzania i wybierz opcję Inline, a następnie skopiuj wygenerowany kod HTML. W Divi dodaj moduł Code w wybranym miejscu układu i wklej skopiowany fragment. Kalendarz wyświetli się jako naturalna część strony, dzięki czemu użytkownik rezerwuje termin bez opuszczania witryny — to najlepszy wybór dla dedykowanej podstrony „Umów spotkanie”.
Sposób 2: Widget popup
Wariant popup jest idealny, gdy chcesz, by rezerwacja otwierała się po kliknięciu przycisku CTA typu „Umów spotkanie”. Calendly udostępnia kod, który dodajesz globalnie w opcjach motywu Divi, w sekcji kodu w stopce. Następnie wystarczy przypisać odpowiedni atrybut z adresem kalendarza do dowolnego linku lub przycisku — kliknięcie otworzy okno z kalendarzem nałożone na bieżącą stronę. To rozwiązanie nie zaburza układu strony i dobrze działa w sekcji hero.
Sposób 3: Pływający przycisk
Pływający przycisk to element widoczny przez cały czas, najczęściej umieszczony w prawym dolnym rogu ekranu. Calendly oferuje gotowy kod, który dodajesz globalnie do witryny w opcjach motywu. Dzięki temu możliwość rezerwacji towarzyszy użytkownikowi na każdej podstronie, niezależnie od tego, jak głęboko przewinął treść. To dobry wybór dla stron usługowych, na których umówienie spotkania jest głównym celem konwersji.
Stylizacja Calendly w Divi
Calendly pozwala dopasować kolory kalendarza do identyfikacji wizualnej marki, dzięki czemu widget nie wygląda jak obce wtrącenie na stronie. W parametrach osadzanego kodu możesz ustawić kolor przewodni, tło oraz kolor tekstu tak, aby współgrały z paletą Twojego projektu w Divi. Warto też zadbać o spójną typografię i odpowiedni odstęp wokół modułu, by kalendarz wizualnie należał do reszty układu.
Której metody użyć?
Jeśli zależy Ci na prostocie i dedykowanej stronie rezerwacji, wybierz osadzenie inline. Gdy rezerwacja ma być akcją wywoływaną z konkretnego przycisku, sięgnij po widget popup. Pływający przycisk sprawdzi się natomiast wtedy, gdy chcesz, by możliwość umówienia spotkania była stale dostępna na całej stronie. We wszystkich przypadkach pamiętaj o przetestowaniu działania kalendarza na urządzeniach mobilnych, bo to z nich pochodzi dziś większość rezerwacji.
FAQ — najczęstsze pytania
Czy do integracji Calendly z Divi potrzebuję wtyczki?
Nie. Calendly udostępnia gotowy kod osadzania, który wklejasz w moduł Code w Divi lub w globalne pola kodu w opcjach motywu. Nie potrzebujesz do tego żadnej dodatkowej wtyczki, co upraszcza utrzymanie strony i nie obciąża jej zbędnymi skryptami.
Którą metodę osadzenia wybrać dla strony usługowej?
Dla typowej strony usługowej najlepiej sprawdza się widget popup uruchamiany z przycisku „Umów spotkanie” w sekcji hero, ewentualnie uzupełniony o pływający przycisk dostępny na każdej podstronie. Osadzenie inline warto zarezerwować dla dedykowanej podstrony rezerwacji.
Czy kalendarz Calendly działa poprawnie na telefonach?
Tak, wszystkie metody osadzania są responsywne, ale zawsze warto sprawdzić działanie na realnym urządzeniu mobilnym. Zwróć szczególną uwagę na osadzenie inline, by widget nie był zbyt wąski, oraz na popup, by przycisk wywołujący był wygodny do kliknięcia kciukiem.
Czy mogę dopasować wygląd Calendly do kolorystyki strony?
Tak. W parametrach osadzanego kodu Calendly możesz ustawić kolor przewodni, tło i kolor tekstu, dzięki czemu kalendarz będzie współgrał z paletą Twojego projektu w Divi. Dla pełnej spójności zadbaj dodatkowo o odpowiednie odstępy i typografię wokół modułu.
Pobierz Divi -10% →