Quick Callback Request - Pływający przycisk oddzwonienia, formularz i lista zgłoszeń dla PrestaShop, bez CAPTCHA

Odwiedzający, który nie wypełni formularza kontaktowego

Wiele osób chce kupić, ale najpierw ma jedno pytanie. Formularz kontaktowy prosi o temat, treść wiadomości i numer zamówienia; numer telefonu w stopce każe im samodzielnie zadzwonić. Jedno i drugie odstrasza tych niezdecydowanych.

Ten moduł prosi o niemal nic: o imię oraz numer telefonu albo adres e-mail. Odwiedzający dotyka przycisku, wypełnia dwa pola, a Ty oddzwaniasz.

Cztery położenia, wybierane raz dla całego sklepu

Miejsce, w którym pojawia się formularz, wybierasz spośród czterech możliwości: wysuwana zakładka przy lewej krawędzi, wysuwana zakładka przy prawej krawędzi, dolny pasek biegnący u dołu strony albo pływający przycisk. Jeśli wybierzesz pływający przycisk, osobne ustawienie umieszcza go w lewym dolnym lub prawym dolnym rogu.

Jeżeli się wahasz, wybierz pływający przycisk. Pierwsze dotknięcie otwiera niewielkie menu akcji, a pozycja z tego menu otwiera formularz w oknie modalnym — dzięki temu nigdy nie konkuruje on z treścią strony i zachowuje się tak samo na telefonie, jak na komputerze. Wysuwana zakładka i dolny pasek celowo ukrywają elementy w miarę zwężania się ekranu, aby układ nadal się mieścił — przydatne przy ruchu głównie desktopowym, mniej, jeśli większość Twoich odwiedzających korzysta z urządzeń mobilnych.

Bez CAPTCHA — i nie jest to kompromis

Wersja 1.x zawierała zadanie matematyczne, które było obliczane i weryfikowane w całości w przeglądarce odwiedzającego. Niczego nie zatrzymywało, a ludzi irytowało.

Wersja 2 usuwa je i chroni formularz na trzy sposoby, wszystkie niewidoczne:

Pole honeypot, którego ludzie nigdy nie widzą, a boty je wypełniają. Podpisany token czasowy — sygnatura HMAC-SHA256 obejmująca moment wygenerowania formularza — dzięki czemu zgłoszenie zostaje odrzucone, jeśli dotrze szybciej niż dwie sekundy po załadowaniu strony albo później niż po dwóch godzinach. Oraz limit zapytań na adres IP, który przyjmuje najwyżej pięć zgłoszeń na godzinę z tego samego adresu.

Nie ma tu niczego do konfigurowania ani żadnej łamigłówki do rozwiązania dla prawdziwego odwiedzającego.

Każde zgłoszenie jest zachowywane, nie tylko wysyłane mailem

Powiadomienie e-mail trafia na wskazane przez Ciebie adresy. Zgłoszenie jest ponadto zapisywane we własnej tabeli bazy danych modułu i wyświetlane na stronie konfiguracji, gdzie możesz oznaczać wpisy jako przeczytane lub nieprzeczytane, usuwać je zbiorczo i dołączać prywatną notatkę do dowolnego pojedynczego zgłoszenia.

Ta lista stanowi różnicę między powiadomieniem, które możesz przeoczyć, a niewielkim lejkiem zgłoszeń, który faktycznie da się przerobić.

O co pyta formularz

O imię pytamy zawsze. Poza tym wybierasz tylko telefon, tylko e-mail albo jedno i drugie, a opcjonalnie możesz zapytać o rodzaj zgłoszenia, aby zapytanie docierało już wstępnie posortowane.

Kolory tekstu i tła są ustawieniami, więc widżet można dopasować do Twojego szablonu, zamiast się z nim kłócić.

Zgoda i Twoje strony prawne

Pole wyboru zgody jest wyświetlane zawsze — nie ma ustawienia, które by je wyłączało. Domyślnie jest zaznaczone, a jeśli odwiedzający je odznaczy, serwer odrzuca zgłoszenie z konkretnym komunikatem, zamiast po cichu je przyjąć. Możesz skierować je na własne adresy URL Regulaminu i Polityki prywatności; jeśli zostawisz te pola puste, moduł podlinkuje stronę CMS z regulaminem już skonfigurowaną w Twoim sklepie.

Wersja 1.x miała tu na sztywno wpisany odnośnik do strony demonstracyjnej producenta. Tego już nie ma.

Wersja 2 naprawiła kilka rzeczy, które po cichu działały źle

Tryb wielosklepowy był zepsuty. Strona sklepu i obsługa wysyłki formularza zawsze odczytywały ustawienia sklepu nr 1, niezależnie od tego, w którym sklepie znajdował się odwiedzający. Teraz odczytują konfigurację bieżącego sklepu.

Wysyłka mogła zawodzić po cichu. Formularz zgłaszał powodzenie niezależnie od tego, co wydarzyło się na serwerze. Teraz zwraca rzeczywisty wynik, z komunikatami przypisanymi do konkretnych pól przy błędnym adresie e-mail lub braku zgody.

Wiadomość z powiadomieniem nie zawsze odnajdywała swój szablon na części instalacji, ponieważ katalog poczty był wyznaczany względem kontrolera, a nie katalogu głównego modułu.

Zapis zgłoszenia budował SQL przez sklejanie tekstu. Zgłoszenia są teraz zapisywane przez zapytania parametryzowane.

Tabela przechowująca dane została przemianowana z ogólnej, podatnej na kolizje nazwy callbacks na wecallyouback_request, a istniejące wiersze migrują automatycznie podczas aktualizacji.

Poprawki dla szablonu Hummingbird w PrestaShop 9

Warto powiedzieć to wprost, jeśli korzystasz z Hummingbird, domyślnego szablonu PrestaShop 9.

Pływający przycisk i jego okno modalne opierały się na atrybutach danych Bootstrap 4 (data-toggle, data-dismiss), które szablon oparty na Bootstrap 5 ignoruje — kliknięcie przycisku nie robiło więc absolutnie nic. Wersja 2.0.5 przepisała oba elementy na własny, czysty JavaScript modułu, bez zależności od jQuery ani od komponentu modalnego szablonu, dzięki czemu przycisk działa w każdym szablonie, niezależnie od wersji Bootstrap.

Wersja 2.0.6 zatrzymała łamanie tekstu wezwania do działania na przycisku na pięć wierszy i naprawiła ikonę ściskaną przez flexbox do cienkiego paska. Wersja 2.0.7 wyśrodkowała okno modalne w pionie, zamiast pozostawiać je przyklejone do górnej krawędzi ekranu.

Lżejszy moduł pod spodem

Wersja 2 działa wyłącznie od PrestaShop 1.7 w górę; wszystkie ścieżki kodu dla 1.4/1.5/1.6 oraz katalog backward_compatibility/ zostały usunięte. Cztery niemal identyczne szablony frontowe — po jednym na wersję PrestaShop — stały się jednym, a arkusze CSS i pliki JavaScript lewej i prawej wysuwanej zakładki połączono we wspólne pliki.

Zniknęły także: zewnętrzna zależność od Google Material Icons (teraz wbudowany SVG), wpisany na sztywno znacznik jQuery z CDN, przestarzała instrukcja PDF, plik źródłowy PSD i pięć nieużywanych katalogów językowych poczty.

Zgodność

PrestaShop 1.7 do 9, w ośmiu językach: angielskim, francuskim, hiszpańskim, holenderskim, niemieckim, polskim, tureckim i włoskim.

Jedno uczciwe zastrzeżenie: szablon wiadomości z powiadomieniem dostępny jest wyłącznie po angielsku i francusku. Formularz widoczny dla odwiedzających oraz zaplecze sklepu są przetłumaczone na wszystkie osiem języków; powiadomienie, które trafia do Twojej skrzynki — nie.

Trzy standardowe hooki, bez nadpisań i bez modyfikacji szablonu. Nadal korzystasz z PrestaShop 1.5 lub 1.6? Użyj wersji modułu 1.x — wersje 2.0 i nowsze wymagają 1.7+.

Najczęściej zadawane pytania

Czy odwiedzający muszą rozwiązywać CAPTCHA?

Nie, i nie ma ustawienia, które by ją włączało. Ochronę stanowią ukryte pole honeypot, podpisany algorytmem HMAC token czasowy, który odrzuca zgłoszenia docierające poniżej dwóch sekund lub powyżej dwóch godzin od załadowania strony, oraz limit pięciu zgłoszeń na godzinę z jednego adresu IP. Prawdziwy odwiedzający nie widzi nic z tego.

Gdzie pojawia się formularz?

Tam, gdzie wybierzesz dla całego sklepu, spośród czterech możliwości: wysuwana zakładka przy lewej krawędzi, wysuwana zakładka przy prawej krawędzi, dolny pasek albo pływający przycisk. Osobne ustawienie umieszcza pływający przycisk w lewym dolnym lub prawym dolnym rogu. Jeśli się wahasz, wybierz pływający przycisk — otwiera on okno modalne, więc szerokość strony nigdy nie ma znaczenia.

Używam Hummingbird na PrestaShop 9 i pływający przycisk nic nie robi.

Zaktualizuj do wersji 2.0.5 lub nowszej. Przed tym wydaniem przycisk korzystał z atrybutów danych Bootstrap 4, które szablony oparte na Bootstrap 5 ignorują. Teraz działa na własnym kodzie JavaScript modułu i sprawdza się w każdym szablonie. Zwróć uwagę, że przycisk z założenia jest sterowaniem dwuetapowym: pierwsze dotknięcie otwiera niewielkie menu akcji, a pozycja z tego menu otwiera formularz.

Czy pole wyboru zgody jest opcjonalne?

Jest wyświetlane zawsze i nie ma ustawienia, które by je usuwało. Domyślnie jest zaznaczone, ale jest naprawdę egzekwowane — odznacz je, a serwer odmówi przyjęcia zgłoszenia i zwróci konkretny błąd, zamiast po cichu je zaakceptować.

O co pyta formularz?

O imię oraz numer telefonu, adres e-mail albo jedno i drugie — wybór należy do Ciebie. Możesz też pytać o rodzaj zgłoszenia. Pole wyboru zgody jest wyświetlane zawsze.

Gdzie trafiają zgłoszenia?

Na ustawione przez Ciebie adresy e-mail powiadomień oraz na listę na stronie konfiguracji modułu. Tam możesz oznaczać je jako przeczytane lub nieprzeczytane, usuwać zbiorczo i dodawać prywatną notatkę do dowolnego zgłoszenia.

Nie przychodzi żadne powiadomienie e-mail.

Sprawdź, czy ustawiony jest prawidłowy adres powiadomień — jeśli nie ma żadnego, przy module na liście modułów pojawia się ostrzeżenie, a każde zgłoszenie jest zapisywane wraz z przyczyną w Zaawansowane → Logi. Jeśli adres jest ustawiony, a dostarczanie mimo to zawodzi, sprawdź Zaawansowane → E-mail oraz ten sam dziennik.

Formularz nie wyświetla się w sklepie.

Upewnij się, że opcja "Show the form" (Pokaż formularz) jest ustawiona na Yes i że moduł jest włączony. Przy mocno zmodyfikowanym szablonie zadbaj o to, aby wywoływał on hook displayHeader (lub header).

Czy mogę użyć własnej ilustracji?

Tak. Zastąp pliki rep_bottom.png, rep_left.png lub rep_right.png w katalogu views/img/ modułu plikiem PNG o tych samych wymiarach.

Na wąskich ekranach znika tekst.

Tak to zaprojektowano dla dolnego paska i wysuwanej zakładki, które stopniowo ukrywają elementy, aby formularz nadal się mieścił. Jeśli to nie odpowiada charakterowi Twojego ruchu, wybierz zamiast tego położenie pływającego przycisku.

Co stanie się z moimi dotychczasowymi zgłoszeniami przy aktualizacji z wersji 1.x?

Migrują automatycznie. Stara tabela callbacks jest kopiowana do nowej tabeli wecallyouback_request przy pierwszym załadowaniu po aktualizacji, a wraz z nią przenoszone są Twoje ustawienia.