Clasora

Osadzanie terminarza na własnej stronie

Integracje

Ustawienia → Integracje pozwala odwiedzającym rezerwować u Ciebie bezpośrednio z Twojej własnej strony, przez osadzony terminarz, zamiast kierować ich tutaj.

1. Zezwól na swoją domenę

W sekcji Dozwolone domeny wpisz dokładne źródło strony, na której pojawi się terminarz, czyli wyłącznie schemat i host, bez ścieżki i bez ukośnika na końcu:

https://apply.acme.com     ✓
https://acme.com:8443      ✓
acme.com                   ✗  brak schematu
https://acme.com/book      ✗  zawiera ścieżkę
https://acme.com/          ✗  ukośnik na końcu

https://www.acme.com i https://acme.com to różne źródła. Jeśli odwiedzający mogą trafić na stronę oboma adresami, dodaj oba.

Ta lista jest jednocześnie włącznikiem: dopóki jest pusta, terminarza nie da się nigdzie osadzić. Możesz dodać do 50 domen, a usunięcie działa natychmiast.

2. Wklej fragment kodu

Każda zatwierdzona usługa ma własny fragment kodu. Skopiuj go i wklej na stronie w miejscu, w którym terminarz ma się pojawić:

<div class="scheduling-embed" data-service="SERVICE_ID"></div>
<script src="https://embed.example.com/embed.js" async></script>

<div> wyznacza miejsce; znacznik script może znaleźć się w dowolnym miejscu strony i wystarczy raz, nawet przy kilku terminarzach. Jeśli widzisz komunikat, że nie masz jeszcze zatwierdzonych usług do osadzenia, usługa jest wciąż weryfikowana. Jej fragment pojawi się po zatwierdzeniu.

3. Ustaw język

Język widżetu na tej stronie decyduje o tym, co widzą odwiedzający. Zostaw opcję zgodnie z językiem strony, a terminarz odczyta atrybut lang ze znacznika <html> Twojej strony, ten sam, z którego korzystają wyszukiwarki i czytniki ekranu, więc poprawnie zlokalizowana strona nie wymaga żadnej dodatkowej konfiguracji:

<!doctype html>
<html lang="es">      <!-- terminarz wyświetla się po hiszpańsku -->
  <head>…</head>
  <body>…</body>
</html>

Znaczniki regionalne działają: lang="pt-BR" zostaje sprowadzone do najbliższego obsługiwanego języka, a nie odrzucone.

Aby pominąć język strony dla jednego terminarza, dodaj data-locale do div-a osadzenia. Ma pierwszeństwo zarówno przed językiem strony, jak i przed ustawieniem na tej stronie:

<div class="scheduling-embed" data-service="SERVICE_ID" data-locale="de"></div>

Jeśli Twoja strona ma własny przełącznik języka, każ terminarzowi za nim podążać. Zmiana następuje w miejscu, więc wszystko, co odwiedzający już wypełnił, zostaje zachowane:

window.SchedulerEmbed.setLocale("sr");

Krótko mówiąc, wygrywa pierwsze ustawione: data-locale, następnie <html lang> Twojej strony, następnie Język widżetu, następnie przeglądarka odwiedzającego, a na końcu angielski.

Pozostałe opcje

Dodaj je do div-a osadzenia:

data-mode="popup" pokazuje przycisk otwierający terminarz w nakładce zamiast osadzać go w treści strony.

data-label="Zarezerwuj" ustawia tekst przycisku w trybie nakładki.

data-min-height="480" ustawia wysokość w pikselach, zanim terminarz zgłosi swój rzeczywisty rozmiar. Zwiększ ją, jeśli widzisz przeskok przy ładowaniu.

Dostępne są jeszcze dwa wywołania, jeśli Twoja strona wstawia treść dynamicznie lub mierzy konwersje:

// Przeskanuj stronę ponownie po dodaniu div-a terminarza
window.SchedulerEmbed.refresh();

// Uruchamia się, gdy odwiedzający dokończy rezerwację
window.SchedulerEmbed.onBooking(function (e) {
  console.log(e.bookingId, e.serviceId);
});

Jeśli terminarz się nie ładuje

Źródło strony nie znajduje się na liście dozwolonych albo nie zgadza się dokładnie. Wystarczy http zamiast https lub brak www.

Fragment trafił tam, gdzie skrypt nie może się uruchomić, np. do bloku zwykłego tekstu lub ograniczonego HTML w kreatorze stron.

Zmieniono wartość data-service. Wklej fragment bez zmian, zamiast przepisywać identyfikator.

Usługa została wycofana lub nie jest już zatwierdzona.