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.
2. 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.
3. Następnie przechodzimy do edycji swojej strony www stworzonej w WebWave CMS i dodajemy na stronie element HTML.
4. 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>
5. Zapisujemy zmiany, a następnie publikujemy stronę. Pamiętajmy, że zawartość elementu HTML będzie widoczna tylko na opublikowanej stronie.
6. 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ę.
7. W przypadku kiedy pomimo wyłączenia funkcji Ładuj kod JS asynchronicznie formularz w dalszym ciągu nie wyświetla się na stronie, może być konieczna modyfikacja kodu integracji wtyczki. Zmieniamy wówczas w kodzie var bookero_config = { na window.bookero_config = { .
Przykładowy kod integracji po zmianie:
<div id="bookero"></div>
<script type="text/javascript">
window.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>
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
- brak zmiany w kodzie integracji wtyczki var bookero_config = { na window.bookero_config = {
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.
