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

Wybierz swoją platformę

Wybierz platformę, na której chcesz zainstalować widget Theraplo, a pokażemy Ci dedykowany przewodnik integracji.

Uniwersalna integracja HTML

Krok 1: Skonfiguruj połączenie z Theraplo

Przed załadowaniem widgetu, musisz skonfigurować połączenie z systemem Theraplo. Dodaj poniższy kod w sekcji <head>:

<script>
  window.__THERAPLO_CONFIG__ = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
  };
</script>

Ważne: Skontaktuj się z zespołem Theraplo, aby otrzymać swoje dane konfiguracyjne. Zamień wartości YOUR_* na prawdziwe dane dostarczone przez Theraplo.

Krok 2: Załaduj skrypt widgetu

Dodaj poniższy kod w sekcji <head> (po konfiguracji):

<script>
  var script = document.createElement("script");
  script.src = "https://cdn.theraplo.com/widget/load.js";
  script.type = "module";
  document.head.appendChild(script);
</script>

Krok 3: Dodaj kontener widgetu

W miejscu, gdzie chcesz wyświetlić kalendarz, dodaj:

<div id="practicare-calendar"></div>

Wskazówka: Jeśli skrypt został dodany poprawnie, w konsoli przeglądarki (DevTools, F12) pojawi się komunikat: Theraplo widget loaded

Typy widgetów

Widget z pełną listą specjalistów

Wyświetla wszystkich dostępnych specjalistów z możliwością filtrowania po usłudze, lokalizacji i specjalizacji.

<div id="practicare-calendar"></div>

Widget konkretnego specjalisty

Dedykowany widok dla pojedynczego specjalisty z dodatkowymi parametrami.

<div
  id="practicare-calendar-small"
  data-id="USER_ID"
  data-service-id="SERVICE_ID"
  data-location-id="LOCATION_ID"
></div>

Ważne: Zamień wartości w WIELKICH_LITERACH na rzeczywiste ID z panelu Theraplo.

Szczegóły atrybutów danych

Atrybut	Opis	Gdzie znaleźć
data-id	ID konkretnego specjalisty	Panel → Specjaliści
data-service-id	ID usługi (np. konsultacja online)	Panel → Usługi
data-location-id	ID lokalizacji (online/gabinet)	Panel → Lokalizacje

Dostosowanie wyglądu

Widget automatycznie dostosowuje się do szerokości kontenera. Rekomendowane ustawienia CSS:

#practicare-calendar,
#practicare-calendar-small {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

@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.

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ą.

Skontaktuj się: kontakt@theraplo.pl Formularz kontaktowy