Nowoczesne Usługi Cyfrowe
(+48) 730-209-608
Najnowsze posty
Jak zintegrować system rezerwacji online Bookero ze stroną internetową zrobioną w kreatorze WebWave?
Bookero to bardzo popularny system rezerwacji wizyt online, który bardzo łatwo da się zintegrować ze stroną internetową stworzoną w kreatorze WebWave. Krok po kroku pokażemy Ci jak zintegrować ten system rezerwacji online ze swoją stroną www stworzoną w WebWave - do dzieła więc!
Jeśli nie wiesz jeszcze jakie korzyści i możliwości oferuje system rezerwacji wizyt online Bookero to przeczytaj nasz artykuł - link - znajdziesz tam wiele ciekawych informacji.
Integracja wtyczki rezerwacji wizyt online z WebWave
1. Rejestracja na WebWave
Ten krok jest dla tych, którzy nie mają jeszcze założonego konta na WebWave, więc jeśli masz już stronę w tym kreatorze to pomiń ten krok i przejdź do kolejnego.
Aby zarejestrować się na WebWave kliknij na link poniżej a potem będąc na stronie kreatora kliknij na zielony przycisk "zacznij teraz".
Co ważne rejestrując się przez powyższy link otrzymasz zniżkę aż 50% na zakup dowolnego pakietu premium (hostingu). Zniżka przepadnie jeśli utworzysz konto nie klikając w poniższy link, dlatego warto skorzystać z tej okazji.
Po rejestracji gdy już będziesz w panelu administracyjnym WebWave w lewym górnym rogu kliknij na przycisk "Zacznij teraz". Następnie wybierz jeden z gotowych szablonów stron www, wśród nich są też szablony stworzone przez naszą agencję Smart Pixel . Jeśli żadna z gotowych witryn Ci nie pasuje i chcesz od zera zaprojektować stronę pod siebie to kliknij na "zacznij od czystej strony".
Po kliknięciu załaduje się kreator strony. Na razie jednak nie będziemy tutaj nic robić, dlatego możesz zamknąć kreator i wrócić do panelu administracyjnego.
Teraz w panelu administracyjnym zobaczysz, że pojawiła się strona, którą będziesz mógł edytować w każdej chwili.
P.S.
Pamiętaj, że stworzenie profesjonalnej, responsywnej witryny internetowej to czasochłonny proces, który wymaga też sporej wiedzy specjalistycznej. Jeśli więc chcesz zaoszczędzić dużo czasu oraz mieć piękną, funkcjonalną stronę zgodną z najnowszymi trendami to zgłoś się do nas, pomożemy Ci.
Teraz gdy już masz założone konto na WebWave możemy przejść do kroku drugiego. Pozostań jednak zalogowany w kreatorze, po przejściu drugiego punktu wrócimy do kreatora.
2. Załóż konto na Bookero
Kolejne co musisz zrobić to założyć konto na Bookero. Jeśli więc nie masz jeszcze utworzonego konta to kliknij w link poniżej
Warto dodać, że konto jest darmowe przez 14 dni dzięki czemu mamy czas na przetestowanie rozwiązania bez żadnych zobowiązań.
Gdy już utworzysz konto, z poziomu panelu Bookero wejdź w zakładkę "Integracje", znajdziesz ją w bocznym, wysuwanym menu (patrz obrazek niżej).
W dziale Integracje masz do wyboru aż cztery różne rodzaje wtyczek. Każda z nich wyświetla się inaczej na stronie www. Masz do wyboru:
Sticky Box
Ta wtyczka wyświetla rozwijaną zakładkę formularza rezerwacji przyklejoną do prawego dolnego rogu ekranu. Zakładka z formularzem jest widoczna na każdej podstronie.
Inline Box
Wtyczka dodaje formularz do wskazanego miejsca na stronie. Wystarczy dodać kontener z atrybutem id równym bookero w odpowiednie miejsce w kodzie strony. Skrypt wtyczki wyświetli w nim formularz rezerwacji.
Weekly Box
Wtyczka, podobnie jak Inline box, wyświetla formularz we wskazanym miejscu strony. Jednak zamiast pola wyboru daty z kalendarza, klient zobaczy podgląd dostępnych godzin na cały tydzień.
Monthly Box
Wtyczka wyświetla podgląd dostępności usług na cały miesiąc. Po zaznaczeniu konkretnego dnia pojawia się lista wolnych godzin. Całość wyświetla się we wskazanym przy pomocy kontenera Bookero miejscu na stronie.
P.S.
Konto na Bookero możesz też skonfigurować teraz czyli dodać usługi, godziny itd. ale możesz też zrobić to później. Dla celów ćwiczeń wystarczy ci domyślnie skonfigurowane konto.
3. Wybierz tą wtyczkę, która najbardziej Ci odpowiada i kliknij "pobierz kod integracji"
Wyświetli Ci się okienko z kodem integracji. Kopiujemy wygenerowany kod i zamykamy okno. Zamiast ręcznego kopiowania kodu możemy skorzystać z przycisku Skopiuj do schowka.
panel administracyjny Bookero, dział integracje
4. Teraz wracamy do utworzonej wcześniej strony na WebWave aby wkleić tam skopiowany kod.
W panelu administracyjnym WebWave wybierz wcześniej utworzoną stronę i kliknij "edytuj". Załaduje się teraz kreator. W kreatorze po lewej stronie jest pasek narzędzi.
Poszukaj na nim trzech poziomych kropeczek i znajdź "Dowolny HTML, CSS, JSS" po czym kliknij w to. Pojawi się element na stronie w którym skopiujemy kod wtyczki wcześniej pobrany z Bookero.
Kliknij teraz na ten dodany element html i wklej kod z Bookero.
Uwaga!
Aby kod poprawnie się wyświetlał, nad skopiowanym kodem dodaj jako pierwszą linię kontener <div id="bookero"></div>. Kod ten odpowiedzialny jest za wywoływanie wyświetlenia się formularza rezerwacyjnego na stronie.
Poniżej przykładowy kod integracji z Bookero, który umieszczamy stronie:
5. Teraz w kreatorze przejdź do panelu ustawień (prawa strona), kliknij u góry "Strona".
Następnie na dole kliknij raz jeszcze, tym razem na "Więcej ustawień". Znajdziesz tutaj taką funkcję jak "Ładuj kod JS asynchronicznie". Jeśli ta funkcja jest zaznaczona u Ciebie, a domyślnie tak będzie, to odznacz ją - to jest bardzo ważne!
6. Zapisz zmiany na stronie a następnie kliknij w prawym górnym rogu na zielony przycisk "Publikuj".
Teraz wtyczka będzie widoczna na Twojej stronie.
7. Istotną kwestią jest odpowiednie dostosowanie wielkość elementu HTML (iframe) do podstrony na jakiej będzie się wyświetlać ta rezerwacja.
Mówi się, że rozmiar ma znaczenie i faktycznie w przypadku elementu html nieodpowiednie jego dopasowanie szerokości i wysokości do podstrony może sprawić, że wyświetli się on nieprawidłowo, czyli może być za mały, za duży lub będzie najeżdżał na inne elementy w witrynie.
Jeśli pomimo zastosowania wszystkich powyższych kroków nadal widget z rezerwacjami nie pojawia się na Twojej stronie www to skontaktuj się z nami, pomożemy Ci naprawić ten błąd.
☎ 730-209-608
🌍 www.facebook.com/pixelissmart
🌍 www.instagram.com/pixelissmart
🌍 www.pinterest.com/pixelissmart
🟥 Pixel is Smart!
Twoje dane będą przetwarzane zgodnie z naszą polityka prywatności.
Zapisz się do newslettera i ciesz się przydatną wiedzą
Jesteśmy ekspertami:
Nasza oferta
Pozycjonowanie
Smart Pixel to Agencja Cyfrowa specjalizująca się w projektowaniu nowoczesnych stron internetowych, sklepów www oraz promocji biznesu naszych Klientów w Internecie. Stosujemy sprawdzone i skuteczne rozwiązania, które zwiększają sprzedaż i autorytet takich firm jak Twoja.