Integracja z Wordpress za pomocą dedykowanej wtyczki

Bookero 2020-08-07
Integracja z Wordpress za pomocą dedykowanej wtyczki

Wordpress to bezpłatny i zarazem jeden z najpopularniejszych systemów CMS do tworzenia stron internetowych. Liczba dostępnych do niego wtyczek pozwala na rozbudowę funkcjonalności strony przez użytkownika właściwie bez potrzeby znajomości wiedzy programistycznej.

Starając się uprościć do minimum możliwość integracji z Wordpress naszego formularza rezerwacyjnego zaprojektowaliśmy dedykowaną wtyczkę gotową do pobrania z bazy WP.

Pozwala ona na szybką i łatwą integrację ze stroną internetową bez konieczności wprowadzania zmian w kodzie strony.

Wtyczkę możemy pobrać bezpośrednio w panelu administratora Wordpress.

Kroki jakie musimy podjąć:

  • W menu po lewej stronie odnajdujemy zakładkę Wtyczki
  • Następnie klikamy w opcję Dodaj nową
  • W dostępnej wyszukiwarce wpisujemy słowo kluczowe bookero
  • W wynikach wyszukiwania pojawi się karta z opisem wtyczki
  • Następnie klikamy w przycisk Zainstaluj teraz
  • Po instalacji wtyczki pozostaje kliknąć w przycisk Aktywuj
  • W bocznym menu pojawi się dodatkowa zakładka Rezerwacje, gdzie będziemy mogli przeprowadzić konfigurację wtyczki

Przed przejściem do konfiguracji wtyczki musimy pobrać API Key, który jest dostępny bezpośrednio w panelu Bookero.

Wchodzimy w:

Konfiguracja → Ustawienia → Integracje → kopiujemy klucz z sekcji API Key

UWAGA! Pamiętaj, aby nie udostępniać osobom nieupoważnionym klucza API, gdyż przy jego pomocy można zarządzać rezerwacjami bez konieczności podawania danych do logowania. 

Wracając do panelu Wordpress wybieramy zakładkę Rezerwacje, a następnie Ustawienia, aby przeprowadzić konfigurację.

  1. W pierwszym kroku wybieramy wersję formularza jako 2.0. Wersja 1.0 dostępna jest dla starszych kont i nie wspiera już nowych funkcji dodawanych do systemu.
  2. Następnie wklejamy API Key, który wcześniej skopiowaliśmy z zakładki Integracje w panelu Bookero.
  3. Opcję Pokaż formularz ustawiamy na TAK jeśli chcemy, aby formularz wyświetlał się na stronie.
  4. Wczytaj CSS formularza również ustawiamy na TAK, aby zachować poprawną strukturę. Wybór NIE przeznaczony jest dla osób chcących zastosować własne style CSS dla formularza.

    WSKAZÓWKA: Jeśli chcemy dokonać zmiany kolorystyki lub fontu formularza nie jest konieczne odhaczenie wczytywania CSS na NIE. Wystarczy dokonać odpowiednich zmian bezpośrednio w pliku style.css.

  5. Ostatnim krokiem jest wybranie rodzaju formularza jaki ma się pojawić na stronie, a następnie zapisać zmiany.

Teraz wystarczy tylko w odpowiednim miejscu na stronie użyć schorcodu [bookero_form] dodając go za pomocą edytora WP bezpośrednio w treści strony.

W tym miejscu na stronie internetowej pojawi się wybrana wcześniej wersja formularza rezerwacyjnego.

WSKAZÓWKA: W przypadku wersji wtyczki Sticky Box nie ma potrzeby umieszczania dodatkowo shortcodu ponieważ formularz w tym przypadku wyświetla się w formie przycisku w dolnym rogu strony, a dopiero po jego kliknięciu rozwija się okno formularza. Przycisk widoczny jest na wszystkich dostępnych podstronach witryny internetowej.

Wtyczka posiada jeszcze jedną niezwykle przydatną funkcję. Mianowicie za pomocą dedykowanych shorcodów możemy wyświetlać formularz wyłącznie z wybraną usługą, kategorią usług lub pracownikiem.

Jeśli chcesz wymusić wyświetlenie konkretnej usługi, kategorii lub pracownika wykorzystaj parametry dla shortcode:

  • [bookero_form category=ID_KATEGORII] - używamy jeśli chcemy wymusić wybór konkretnej kategorii (pozostałe kategorie zostaną ukryte)
  • [bookero_form service=ID_USLUGI] - używamy jeśli chcemy wymusić wybór konkretnej usługi (pozostałe usługi zostaną ukryte)
  • [bookero_form select_category=ID_KATEGORII] - używamy jeśli chcemy zaznaczyć domyślnie wybraną kategorię (nie ukrywamy pozostałych kategorii, a jedynie domyślnie wybieramy)
  • [bookero_form select_service=ID_USLUGI] - używamy jeśli chcemy zaznaczyć domyślnie wybraną usługę (nie ukrywamy pozostałych usług, a jedynie domyślnie wybieramy)
  • [bookero_form worker_id=ID_PRACOWNIKA] - używamy jeśli chcemy wymusić wybór konkretnego pracownika (blokujemy wybór pozostałych pracowników, pole z wybranym pracownikiem pojawi sie jako pierwsza pozycja w formularzu)
  • [bookero_form worker_id=ID_PRACOWNIKA hide_worker=1] - używamy jeśli chcemy wymusić wybór konkretnego pracownika (blokujemy wybór pozostałych pracowników, ukrywamy całkowicie pole z wybranym pracownikiem)

ID kategorii lub usługi pobieramy bezpośrednio w panelu Bookero.

W tym celu wchodzimy w zakładkę Usługi i najeżdżamy kursorem myszy na nazwę usługi lub kategorii, na wyświetlonej liście. Pojawi się wówczas tooltip z unikalnym numerem ID.

Przykładowy shortcode do wyświetlenia formularza tylko dla konkretnej usługi o numerze ID 1901 wygląda następująco:

[bookero_form service=1901]

ID pracownika pobieramy wchodząc bezpośrednio w jego profil, w zakładce Pracownicy.

Numer ID kopiujemy z adresu URL wyświetlonego w przeglądarce internetowej np. https://app.bookero.pl/workers/edit/12345.

Przykładowy shortcode do wyświetlenia formularza dla wybranego pracownika wygląda następująco:

[bookero_form worker_id=12345]

lub

[bookero_form worker_id=12345 hide_worker=1]

WAŻNE! Na jednej podstronie witryny nie możemy dwukrotnie umieścić shortcodu w celu wyświetlenia formularza. Doprowadzi to bowiem do błędu w wyniku którego formularz w ogóle nie wyświetli się na podstronie. Nie ma z kolei limitów odnośnie wykorzystania formularza jeśli jest umieszczony na różnych podstronach.

Sprawdź również

Nie jesteś jeszcze przekonany?

Skorzystaj ze specjalnego 14-dniowego okresu darmowego i wypróbuj nasz system, bez żadnych zobowiązań!

Testuj bezpłatnie przez 14 dni
Nasz serwis wykorzystuje pliki cookies. Korzystając z serwisu Użytkownik zgadza się na ich zapis lub wykorzystanie. Więcej informacji znajdziesz w Polityce prywatności.