Integracja wtyczki na stronie wykonanej za pomocą kreatora stron WebWave CMS

Paweł Nowakowski 2021-01-21
Integracja wtyczki na stronie wykonanej za pomocą kreatora stron WebWave CMS

W zależności od tego w oparciu o jaki skrypt stworzona jest strona internetowa integracja wtyczki z formularzem rezerwacyjnym może odbyć się w różny sposób.

Dla autorskich rozwiązań można wykorzystać gotowe kody integracji dostępne w zakładce Integracje, bezpośrednio w panelu administracyjnym Bookero.

W przypadku popularnych skryptów stworzone zostały dedykowane wtyczki do integracji z Wordpress lub Joomla!.

Istnieje również możliwość wykorzystania naszego formularza rezerwacyjnego w różnego rodzaju kreatorach stron www jak WebWave CMS, WIX czy Blogger.

Wówczas, w większości przypadków odbywa się to za pomocą dodania iframe w treści strony lub za pomocą dedykowanych pól, w których możemy dodać kod zewnętrznych skryptów.

Poniżej zamieszczamy instrukcję jak krok po kroku dokonać integracji w ramach jednego z popularniejszych kreatorów stron www, a mianowicie WebWave CMS. Niemniej jednak sam sposób integracji przy użyciu iframe będzie analogiczny w większości popularnych kreatorów.

 

Integracja wtyczki rezerwacyjnej w WebWave CMS

1. Wchodzimy w zakładkę Integracje dostępną w bocznym menu, w panelu Bookero, a następnie klikamy w przycisk Pobierz kod konfiguracji znajdujący się przy wybranym rodzaju wtyczki.

3. Wyświetli się nam popup z kodem integracji. Kopiujemy wygenerowany kod pluginu i zamykamy okno. Zamiast ręcznego kopiowania kodu możemy skorzystać z przycisku Skopiuj do schowka.

4. Następnie przechodzimy do edycji swojej strony www stworzonej w WebWave CMS i dodajemy na stronie element HTML.

5. Do elementu HTML wklejamy wcześniej skopiowany kod pluginu. Pamiętajmy, aby oprócz kodu jako pierwszą linię dodać kontener <div id="bookero"></div>. Za jego pomocą wywołujemy wyświetlenie się formularza rezerwacyjnego.

Przykładowy kod integracji jaki wprowadzamy w iframe umieszczonym na stronie:

<div id="bookero"></div>

<script type="text/javascript">
  var bookero_config = {
    id: 'TU_PODAJEMY_ID_WTYCZKI',
    container: 'bookero',
    type: 'calendar',
    position: '',
    plugin_css: true,
    lang: 'pl'
  };

(function() {
  var d = document, s = d.createElement('script');
  s.src = 'https://www.bookero.pl/plugin/v2/js/bookero-compiled.js';
  d.body.appendChild(s);
  })();
</script>

6. Zapisujemy zmiany, a następnie publikujemy stronę. Pamiętajmy, że zawartość elementu HTML będzie widoczna tylko na opublikowanej stronie.

7. Pomimo poprawnie dodane kodu integracji może się zdarzyć, że formularz w dalszym ciągu nie wyświetla się na stronie. W takim przypadku sprawdzamy czy w panelu WebWave CMS, w zakładce Strona mamy wyłączoną funkcję Ładuj kod JS asynchronicznie. Po wyłączeniu funkcji ważne, aby ponownie opublikować stronę.

8. Ważne jest, aby odpowiednio dostosować wielkość elementu HTML (iframe), ponieważ zbyt mały element może spowodować, że na stronie formularz wyświetli się np. zwężony.

9. W zależności od budowy formularza oraz rodzaju zmienia się jego wysokość oraz szerokość. Przy standardowych ustawieniach dla widoku miesięcznego, element HTML o rozmiarach 775x800 powinien być wystarczający. Może się jednak okazać, że dodanie większej liczby dodatkowych pól będzie wymagało zwiększenia wysokości elementu HTML.

10. Jeśli pomimo zmian formularz w dalszym ciągu nie wyświetla się w pełnym rozmiarze należy zwiększać rozmiary iframe w edytorze aż do momentu uzyskania zamierzonego efektu na stronie internetowej.

Po wprowadzeniu wszystkich zmian formularz powinien poprawnie wyświetlić się na stronie.

Główne przyczyny braku wyświetlania formularza na stronie to:

  • brak dodania kontenera <div id="bookero"></div> w kodzie integracji wtyczki
  • aktywna funkcja Ładuj kod JS asynchronicznie

Gdyby, pomimo zastosowania się do powyższych kroków, formularz rezerwacyjny w dalszym ciągu nie wyświetlał się poprawnie na stronie zachęcamy do kontaktu z naszych supportem.

Postaramy się zweryfikować co jest tego przyczyną oraz pomożemy w integracji wtyczki na stronie.

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.