Jak osadzić widget rezerwacji BookSite na WordPress

Masz stronę na WordPressie i chcesz, żeby klienci umawiali wizyty bez dzwonienia? Widget BookSite to jeden fragment kodu — po wklejeniu na stronę pojawia się przycisk „Rezerwuj online” i pełny kalendarz z Twoimi usługami, cenami i SMS-ami potwierdzającymi. WordPress zostaje bez zmian: nie przebudowujesz motywu ani nie instalujesz ciężkiej wtyczki z marketplace.

Co dostajesz po instalacji

• Pływający przycisk rezerwacji (FAB) w rogu ekranu — widoczny na każdej podstronie WordPressa.
• Pełnoekranowy formularz: wybór usługi, specjalisty, terminu i dane kontaktowe klienta.
• Synchronizacja z kalendarzem BookSite — te same terminy co w panelu, bez podwójnego wpisywania.
• SMS z potwierdzeniem i przypomnieniem (w aktywnym planie).
• Możliwość własnego przycisku w treści strony zamiast pływającego FAB.

Plan Widget BookSite (Plan Widget (dla gabinetów z działającą stroną WWW): 129 zł brutto miesięcznie przy rozliczeniu rocznym — 1419 zł brutto na rok (11 miesięcy opłaconych, jeden gratis)) jest przeznaczony właśnie dla firm, które mają już działającą stronę — np. na WordPressie — i chcą dodać rezerwację bez prowizji od wizyt.

Czego potrzebujesz przed startem

• Konto BookSite z aktywnym planem Widget (lub trialem) oraz uzupełnioną ofertą usług.
• Dostęp do panelu WordPress (rola administratora lub edytora z uprawnieniami do wtyczek).
• Adres swojej strony — np. mojgabinet.pl (bez https:// i bez końcowego slasha).
• 5–15 minut na skopiowanie kodu i sprawdzenie podglądu.

Krok 1 — dodaj domenę w panelu BookSite

To najważniejszy krok, który często pomijają. BookSite zezwala na osadzenie widgetu tylko na domenach wpisanych na Twojej liście — dzięki temu nikt obcy nie może podpiąć Twojego kalendarza pod cudzą stronę.

• Zaloguj się do panelu BookSite → sekcja Widget.
• W polu „Domena strony, gdzie wkleisz kod” wpisz adres witryny WordPress, np. mojgabinet.pl (bez www — system sam rozpoznaje obie wersje).
• Jeśli testujesz na subdomenie staging, dodaj też np. staging.mojgabinet.pl.
• Zapisz. Bez tego widget na żywej stronie może się nie załadować.

Krok 2 — skopiuj kod instalacji

W panelu BookSite → Widget znajdziesz unikalny identyfikator witryny (SITE_ID) i gotowy skrypt. Poniżej przykład — zamiast TWOJE_SITE_ID wklej wartość z panelu.

Wariant zalecany: pływający przycisk (FAB)

Jeden skrypt w nagłówku strony wystarczy, żeby przycisk rezerwacji był widoczny wszędzie — na stronie głównej, blogu, cenniku i kontakcie. Skrypt ładuje się z CDN BookSite (osobny host, szybki cache, bez cookies marketingowych).

<script src="https://cdn.booksite.pl/embed/widget-fab/TWOJE_SITE_ID" async></script>

Alternatywa: stały blok rezerwacji w treści

Jeśli wolisz kalendarz osadzony w konkretnym miejscu strony (np. pod opisem usług) zamiast pływającego przycisku — użyj drugiego skryptu i wklej go blokiem HTML tylko na wybranej podstronie.

<script src="https://cdn.booksite.pl/embed/widget/TWOJE_SITE_ID" async></script>

Krok 3 — wklej kod na WordPressie

Wybierz metodę dopasowaną do tego, jak zarządzasz stroną. We wszystkich przypadkach chodzi o to samo: skrypt FAB trafia do nagłówka całej witryny, żeby działał globalnie.

Metoda A — wtyczka do nagłówka (najprostsza dla laików)

Nie musisz edytować plików motywu. Zainstaluj jedną z popularnych wtyczek i wklej skrypt w sekcji „Header” (nagłówek):

• WPCode (dawniej Insert Headers and Footers) — Code Snippets → Add Snippet → typ „HTML Snippet” lub „Header & Footer” → wklej kod FAB → włącz na całej witrynie.
• Insert Headers and Footers — Ustawienia → Insert Headers and Footers → pole „Scripts in Header” → wklej kod → Zapisz.
• Code Snippets (autor Code Snippets Pro) — nowy snippet typu „HTML”, lokalizacja „Site Wide Header”.
• Header Footer Code Manager — dodaj nowy snippet, pozycja „Head”, strony „Entire site”.

Metoda B — functions.php motywu potomnego (dla własnego motywu)

Jeśli masz motyw potomny (child theme) i wolisz nie instalować kolejnej wtyczki, dodaj krótką funkcję PHP. Edytuj plik functions.php motywu potomnego — nigdy samego motywu nadrzędnego, bo aktualizacja motywu nadpisze zmiany.

/**
 * BookSite — widget rezerwacji na WordPress
 * Wklej do functions.php motywu potomnego (child theme)
 * lub jako snippet PHP w WPCode / Code Snippets (uruchom na froncie).
 */
function booksite_widget_in_head() {
    if ( is_admin() ) {
        return;
    }
    ?>
    <script src="https://cdn.booksite.pl/embed/widget-fab/TWOJE_SITE_ID" async></script>
    <?php
}
add_action( 'wp_head', 'booksite_widget_in_head', 5 );

Tę samą funkcję możesz wkleić jako snippet PHP w WPCode zamiast edytować plik ręcznie — wybierz „PHP Snippet”, uruchomienie „Everywhere” lub „Frontend only”, bez uruchamiania w panelu admina.

/**
 * BookSite — alternatywa z wp_enqueue_script (stopka strony).
 * Atrybut async dodajemy filtrem — bez tego skrypt ładuje się synchronicznie.
 */
function booksite_widget_enqueue() {
    if ( is_admin() ) {
        return;
    }
    wp_enqueue_script(
        'booksite-widget-fab',
        'https://cdn.booksite.pl/embed/widget-fab/TWOJE_SITE_ID',
        array(),
        null,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'booksite_widget_enqueue' );

function booksite_widget_async( $tag, $handle ) {
    if ( 'booksite-widget-fab' !== $handle ) {
        return $tag;
    }
    return str_replace( ' src', ' async src', $tag );
}
add_filter( 'script_loader_tag', 'booksite_widget_async', 10, 2 );

Metoda C — Elementor, Divi, Bricks i inne page buildery

• Elementor Pro: Szablony → Theme Builder → Header (lub Custom Code w Elementor → Custom Code → Head) → wklej skrypt FAB globalnie.
• Elementor (bez Pro): użyj wtyczki z Metody A — builder nie blokuje skryptu w head.
• Divi: Divi → Theme Options → Integrations → „Add code to the < head > of your blog” → wklej skrypt.
• Bricks / Oxygen: sekcja Global Scripts / Code → Head.
• Dla bloku iframe na jednej podstronie: widget HTML w edytorze strony → wklej INLINE_SCRIPT w wybranym miejscu.

Metoda D — edytor blokowy Gutenberg (tylko wariant iframe)

Sam blok „Własny HTML” na jednej stronie nie wystarczy dla pływającego przycisku na całej witrynie — do FAB nadal użyj Metody A lub B. Na pojedynczej podstronie „Rezerwacja” możesz dodać blok Własny HTML i wkleić skrypt iframe.

• Otwórz stronę w edytorze WordPress.
• Dodaj blok „Własny HTML” (Custom HTML).
• Wklej kod INLINE_SCRIPT.
• Opublikuj i sprawdź podgląd.

Metoda E — WooCommerce i sklep na WordPressie

Sklep WooCommerce to nadal WordPress — skrypt FAB w nagłówku działa na stronach produktów i checkoutu. Jeśli nie chcesz przycisku na koszyku, skorzystaj z wtyczki WPCode z regułą wykluczającą URL /cart i /checkout albo użyj własnego przycisku tylko na wybranych stronach (patrz niżej).

Własny przycisk zamiast pływającego FAB

W panelu BookSite możesz ukryć domyślny pływający przycisk i otwierać kalendarz z dowolnego elementu na stronie — przycisku w menu, banera Elementora lub linku w treści. Wystarczy atrybut id="booksite-widget".

<a href="#" id="booksite-widget">Umów wizytę online</a>

• Skrypt FAB musi być załadowany globalnie (Metoda A lub B).
• Element z id="booksite-widget" może być linkiem, przyciskiem DIV lub przyciskiem Elementora — ważne jest dokładnie to id.
• Możesz mieć kilka takich elementów na stronie — wszystkie otworzą ten sam kalendarz.

Krok 4 — sprawdź, czy działa

• Otwórz podgląd widgetu z panelu BookSite lub adres https://cdn.booksite.pl/embed/widget?site=TWOJE_SITE_ID — zobaczysz formularz tak, jak klient.
• Na stronie WordPress odśwież witrynę w trybie incognito (bez cache).
• Powinien pojawić się przycisk rezerwacji (lub Twój własny trigger).
• Kliknij, wybierz usługę i termin testowy — rezerwacja powinna trafić do kalendarza w panelu.

Rozwiązywanie problemów

Przycisk się nie pojawia

• Sprawdź domenę na liście dozwolonych w panelu BookSite (Krok 1).
• Upewnij się, że SITE_ID w skrypcie jest identyczne jak w panelu — bez spacji i cudzysłowów.
• Wyłącz na chwilę adblock i odśwież stronę.
• Wyczyść cache WordPressa i CDN (Cloudflare, hosting).
• W narzędziach deweloperskich przeglądarki (F12 → Console) szukaj błędów ładowania skryptu.

Widget ładuje się na localhost, ale nie na produkcji

Domena produkcyjna musi być dodana w panelu. Localhost i domeny .local działają tylko podczas developmentu — na żywo wpisz prawdziwy adres.

Konflikt z wtyczką optymalizacji lub CSP

Niektóre wtyczki agresywnie łączą lub opóźniają skrypty zewnętrzne. Dodaj https://cdn.booksite.pl do wyjątków w WP Rocket („Excluded JavaScript”) lub wyłącz minifikację JS na próbę. Jeśli hosting ustawia Content-Security-Policy, dozwól script-src dla https://cdn.booksite.pl.

Strona w trybie maintenance lub hasło

Widget działa dla odwiedzających, którzy widzą publiczną stronę. W podglądzie zalogowanego admina czasem cache pokazuje starą wersję — testuj w incognito.

Bezpieczeństwo i RODO

• Skrypt ładuje formularz rezerwacji z infrastruktury BookSite — dane klientów trafiają do Twojego panelu zgodnie z regulaminem i polityką prywatności BookSite.
• Nie wklejaj kodu z nieznanych źródeł — używaj wyłącznie snippetu z panelu BookSite.
• Motyw potomny i wtyczki snippetów aktualizuj regularnie; backup przed edycją functions.php to dobry nawyk.

Najczęstsze pytania

Poniżej skrót odpowiedzi — pełna lista w sekcji FAQ na tej stronie (widoczna też dla wyszukiwarek).

• Czy to wtyczka WordPress? — Nie, to jeden skrypt JS; nie szukaj „BookSite” w katalogu wtyczek.
• Czy muszę znać PHP? — Nie, wtyczka do nagłówka wystarczy.
• Czy działa z cache? — Tak, po dodaniu wyjątku lub wyczyszczeniu cache.
• Czy mogę mieć WordPress i BookSite Stronę jednocześnie? — Tak; plan Widget jest dla istniejącej witryny, plan Strona to gotowa strona na BookSite.