Widget Kalendarza Online Theraplo
Zintegruj system rezerwacji wizyt ze swoją stroną internetową w kilka minut. Nasz widget działa z każdą stroną HTML, React, Vue, Angular, WordPress i innymi platformami.
Dlaczego widget Theraplo?
- ✓ Łatwa integracja - wystarczy jeden skrypt JavaScript
- ✓ Responsywny design - działa na desktop i mobile
- ✓ Bez przeładowań strony - płynne doświadczenie użytkownika
- ✓ Automatyczna synchronizacja z kalendarzem Theraplo
- ✓ Dostosowywalne filtry i widoki
Krok 1: Dodanie skryptu Theraplo
Aby widget działał poprawnie, dodaj poniższy kod JavaScript do sekcji <head> swojej strony HTML lub w komponencie głównym aplikacji:
<script>
var script = document.createElement("script");
script.src = "https://theraplo.pl/widget.js"; // URL do skryptu Theraplo
script.type = "module";
document.head.appendChild(script);
</script>Wskazówka: Jeśli skrypt został dodany poprawnie, w konsoli przeglądarki (DevTools, F12) pojawi się komunikat: Theraplo widget loaded
Integracja z popularnymi frameworkami
React / Next.js:
useEffect(() => {
const script = document.createElement("script");
script.src = "https://theraplo.pl/widget.js";
script.type = "module";
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}, []);WordPress:
Dodaj kod w Wygląd → Edytor motywu → functions.php lub użyj wtyczki “Insert Headers and Footers”:
add_action('wp_head', function() {
echo '<script>
var script = document.createElement("script");
script.src = "https://theraplo.pl/widget.js";
script.type = "module";
document.head.appendChild(script);
</script>';
});Krok 2: Wybór typu widgetu
A) Widget z pełną listą specjalistów i filtrami
Wyświetla wszystkich dostępnych specjalistów z możliwością filtrowania po usłudze, lokalizacji i specjalizacji. Idealny dla klinik i większych praktyk.
<div id="practicare-calendar"></div>
B) Widget konkretnego specjalisty
Dedykowany widok dla pojedynczego specjalisty. Świetny dla stron osobistych terapeutów lub podstron poświęconych konkretnym osobom.
<div id="practicare-calendar-small" data-id="USER_ID" data-service-id="SERVICE_ID" data-user-service-id="VARIANT_ID" data-location-id="LOCATION_ID" data-type-id="TYPE_ID" ></div>
Ważne: Zamień wartości w WIELKICH_LITERACH (np. USER_ID) na rzeczywiste identyfikatory z panelu administracyjnego Theraplo.
Szczegóły atrybutów danych
| Atrybut | Opis | Gdzie znaleźć w Theraplo |
|---|---|---|
| data-id | ID konkretnego specjalisty. Widget pokaże tylko jego kalendarz. | Panel → Specjaliści |
| data-service-id | ID usługi. Domyślnie wybiera typ wizyty (np. konsultacja online). | Panel → Usługi |
| data-user-service-id | ID wariantu usługi przypisanego do specjalisty. Zawęża widok do konkretnego wariantu. | Panel → Specjalista → Warianty usług |
| data-location-id | ID lokalizacji. Ustawia domyślnie miejsce wizyty (online/gabinet). | Panel → Lokalizacje |
| data-type-id | ID nurtu terapeutycznego lub specjalizacji. | Panel → Nurty |
Uwaga: Wszystkie atrybuty są opcjonalne. Użyj ich tylko gdy chcesz ograniczyć lub wstępnie wybrać określone opcje w widgecie.
Krok 3: Dostosowanie wyglądu
Widget automatycznie dostosowuje się do szerokości kontenera. Rekomendowane ustawienia CSS:
/* Podstawowy kontener */
#practicare-calendar,
#practicare-calendar-small {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* Responsywność */
@media (max-width: 768px) {
#practicare-calendar,
#practicare-calendar-small {
padding: 10px;
}
}Często zadawane pytania
Czy widget działa na urządzeniach mobilnych?
Tak! Widget jest w pełni responsywny i automatycznie dostosowuje się do rozmiaru ekranu.
Czy mogę mieć wiele widgetów na jednej stronie?
Tak, możesz dodać dowolną liczbę widgetów na stronie, każdy z różnymi parametrami.
Jak widget wpływa na wydajność strony?
Widget jest ładowany asynchronicznie i nie blokuje renderowania strony. Rozmiar skryptu to ok. 50KB (gzip).
Czy widget wymaga jQuery lub innych bibliotek?
Nie, widget jest samodzielny i nie wymaga dodatkowych zależności.
Potrzebujesz pomocy?
Nasz zespół wsparcia chętnie pomoże Ci w integracji widgetu z Twoją stroną internetową.