Quick Callback Request - Zwevende terugbelknop, formulier en aanvragenlijst voor PrestaShop, zonder CAPTCHA

De bezoeker die geen contactformulier invult

Veel mensen willen kopen, maar hebben eerst nog één vraag. Een contactformulier vraagt om een onderwerp, een bericht en een ordernummer; een telefoonnummer in de voettekst vraagt hun om zelf te bellen. Beide verjagen de twijfelaars.

Deze module vraagt bijna niets: een naam en een telefoonnummer of een e-mailadres. De bezoeker tikt op een knop, vult twee velden in, en u belt terug.

Vier posities, één keer gekozen voor de hele shop

U kiest uit vier mogelijkheden waar het formulier komt te staan: een uitschuifbaar tabblad aan de linkerrand, een uitschuifbaar tabblad aan de rechterrand, een balk onderaan de pagina of een zwevende knop. Kiest u de zwevende knop, dan bepaalt een aparte instelling of die linksonder of rechtsonder staat.

Twijfelt u, neem dan de zwevende knop. Een eerste tik opent een klein actiemenu, en dat menu opent het formulier in een modaal venster — zo concurreert het nooit met de pagina-inhoud en gedraagt het zich op een telefoon net zoals op een desktop. Het uitschuifbare tabblad en de balk onderaan verbergen bewust elementen zodra het scherm smaller wordt, zodat de opmaak blijft passen: handig bij overwegend desktopverkeer, minder als de meeste van uw bezoekers mobiel zijn.

Zonder CAPTCHA — en dat is geen concessie

Versie 1.x leverde een rekensom mee die volledig in de browser van de bezoeker werd berekend en gecontroleerd. Die hield niets tegen en irriteerde mensen.

Versie 2 haalt hem weg en beschermt het formulier op drie manieren, alle onzichtbaar:

Een honeypotveld dat mensen nooit zien en bots invullen. Een ondertekend tijdtoken — een HMAC-SHA256-handtekening over het moment waarop het formulier werd opgebouwd — zodat een inzending wordt geweigerd als die sneller dan twee seconden na het laden van de pagina binnenkomt, of later dan twee uur daarna. En een limiet per IP-adres dat hoogstens vijf verzoeken per uur vanaf hetzelfde adres accepteert.

Er valt niets in te stellen en een echte bezoeker hoeft geen puzzel op te lossen.

Elk verzoek wordt bewaard, niet alleen gemaild

Een e-mailmelding gaat naar de adressen die u opgeeft. Het verzoek wordt daarnaast weggeschreven naar de eigen databasetabel van de module en opgesomd op de configuratiepagina. Daar kunt u items als gelezen of ongelezen markeren, ze in bulk verwijderen en aan elk afzonderlijk verzoek een privénotitie hangen.

Die lijst is het verschil tussen een melding die u kunt missen en een kleine pijplijn die u daadwerkelijk kunt afwerken.

Wat het formulier vraagt

De naam wordt altijd gevraagd. Daarnaast kiest u tussen alleen telefoon, alleen e-mail of beide, en u kunt optioneel om een soort aanvraag vragen, zodat de aanvraag al voorgesorteerd binnenkomt.

Tekst- en achtergrondkleuren zijn instellingen, zodat de widget bij uw thema kan worden aangepast in plaats van ermee te vloeken.

Toestemming en uw juridische pagina's

Een toestemmingsvinkje wordt altijd getoond — er is geen instelling om het uit te zetten. Het staat bij aankomst al aangevinkt, en haalt een bezoeker het vinkje weg, dan weigert de server de inzending met een duidelijke melding in plaats van die stilzwijgend aan te nemen. U mag daarin verwijzen naar uw eigen URL's voor Algemene voorwaarden en Privacybeleid; laat u die velden leeg, dan linkt de module naar de CMS-pagina met de algemene voorwaarden die al in uw shop is ingesteld.

Versie 1.x had hier een vast ingebouwde link naar de demosite van de leverancier. Die is verdwenen.

Versie 2 heeft verschillende dingen hersteld die stilletjes fout waren

Multistore werkte niet. De winkelzijde en de verwerking van de inzending lazen altijd de instellingen van shop #1, ongeacht in welke shop de bezoeker zich bevond. Ze lezen nu de configuratie van de huidige shop.

Inzendingen konden ongemerkt mislukken. Het formulier meldde succes, ongeacht wat er op de server gebeurde. Het geeft nu een echt resultaat terug, met veldspecifieke meldingen voor een ongeldig e-mailadres of ontbrekende toestemming.

De meldingsmail kon op sommige installaties zijn sjabloon niet vinden, doordat de mailmap werd bepaald ten opzichte van de controller in plaats van de hoofdmap van de module.

Het invoegen van het verzoek stelde SQL samen door tekst aan elkaar te plakken. Verzoeken worden nu weggeschreven via geparametriseerde inserts.

De opslagtabel is hernoemd van het generieke, botsingsgevoelige callbacks naar wecallyouback_request, en bestaande rijen migreren automatisch bij de upgrade.

Correcties voor het Hummingbird-thema van PrestaShop 9

Gebruikt u Hummingbird, het standaardthema van PrestaShop 9, dan mag dit duidelijk gezegd worden.

De zwevende knop en het bijbehorende modale venster steunden op de data-attributen van Bootstrap 4 (data-toggle, data-dismiss), die een Bootstrap 5-thema negeert — een klik op de knop deed dus helemaal niets. 2.0.5 heeft beide herschreven naar het eigen, kale JavaScript van de module, zonder afhankelijkheid van jQuery of de modale component van het thema, zodat de knop in elk thema werkt, ongeacht de Bootstrap-versie.

2.0.6 heeft voorkomen dat de oproeptekst van de knop over vijf regels afbrak en verholpen dat het pictogram door flexbox tot een streepje werd samengedrukt. 2.0.7 centreert het modale venster verticaal in plaats van het aan de bovenkant van het scherm te laten plakken.

Een lichtere module eronder

Versie 2 draait uitsluitend vanaf PrestaShop 1.7; alle codepaden voor 1.4/1.5/1.6 en de map backward_compatibility/ zijn verwijderd. Vier vrijwel identieke frontend-sjablonen — één per PrestaShop-versie — werden er één, en de CSS en JavaScript voor het linker- en het rechtertabblad zijn samengevoegd tot gedeelde bestanden.

Ook verdwenen: de externe afhankelijkheid van Google Material Icons (nu inline-SVG), een vast ingebouwde jQuery-CDN-tag, een verouderde pdf-handleiding, een PSD-bronbestand en vijf ongebruikte mailtaalmappen.

Compatibiliteit

PrestaShop 1.7 tot en met 9, in acht talen: Duits, Engels, Frans, Italiaans, Nederlands, Pools, Spaans en Turks.

Eén eerlijke kanttekening: het sjabloon voor de meldingsmail is alleen in het Engels en het Frans beschikbaar. Het formulier voor uw bezoekers en de back office zijn in alle acht talen vertaald; de melding die in uw postvak aankomt, is dat niet.

Drie standaardhooks, geen overrides en geen aanpassing van het thema. Nog op PrestaShop 1.5 of 1.6? Gebruik dan moduleversie 1.x — 2.0 en hoger vereisen 1.7+.

Veelgestelde vragen

Moeten bezoekers een CAPTCHA oplossen?

Nee, en er is geen instelling om er een in te schakelen. De beveiliging bestaat uit een verborgen honeypotveld, een HMAC-ondertekend tijdtoken dat inzendingen weigert die binnen twee seconden of na meer dan twee uur na het laden van de pagina binnenkomen, en een limiet van vijf verzoeken per uur vanaf één IP-adres. Een echte bezoeker merkt er niets van.

Waar verschijnt het formulier?

Daar waar u het voor de hele shop instelt, uit vier mogelijkheden: een uitschuifbaar tabblad aan de linkerrand, een uitschuifbaar tabblad aan de rechterrand, een balk onderaan of een zwevende knop. Een aparte instelling plaatst de zwevende knop linksonder of rechtsonder. Twijfelt u, neem dan de zwevende knop — die opent een modaal venster, dus de paginabreedte maakt niets uit.

Ik gebruik Hummingbird op PrestaShop 9 en de zwevende knop doet niets.

Werk bij naar 2.0.5 of nieuwer. Vóór die versie gebruikte de knop data-attributen van Bootstrap 4, die Bootstrap 5-thema's negeren. Hij draait nu op het eigen JavaScript van de module en werkt in elk thema. Let op: de knop is bewust een bediening in twee stappen — de eerste tik opent een klein actiemenu, en het menu-item opent het formulier.

Is het toestemmingsvinkje optioneel?

Het wordt altijd getoond en er is geen instelling om het te verwijderen. Het staat bij aankomst al aangevinkt, maar wordt echt afgedwongen: haalt u het vinkje weg, dan weigert de server de inzending met een duidelijke foutmelding in plaats van die stilzwijgend aan te nemen.

Wat vraagt het formulier?

Een naam, plus een telefoonnummer, een e-mailadres of beide — u kiest. U kunt daarnaast om een soort aanvraag vragen. Een toestemmingsvinkje wordt altijd getoond.

Waar komen de verzoeken terecht?

Bij de meldingsadressen die u instelt, en in een lijst op de configuratiepagina van de module. Daar kunt u ze als gelezen of ongelezen markeren, ze in bulk verwijderen en aan elk verzoek een privénotitie toevoegen.

Er komt geen meldingsmail binnen.

Controleer of er een geldig meldingsadres is ingesteld — ontbreekt dat, dan verschijnt er een waarschuwing naast de module in de modulelijst en wordt elke inzending met de reden vastgelegd onder Geavanceerde instellingen → Logs. Is er wel een adres ingesteld en mislukt de verzending toch, controleer dan Geavanceerde instellingen → E-mail en hetzelfde logboek.

Het formulier verschijnt niet in de winkel.

Controleer of "Show the form" (Formulier tonen) op Yes staat en of de module is ingeschakeld. Zorg er bij een sterk aangepast thema voor dat het de hook displayHeader (of header) aanroept.

Kan ik mijn eigen illustratie gebruiken?

Ja. Vervang rep_bottom.png, rep_left.png of rep_right.png in de map views/img/ van de module door een PNG-bestand van hetzelfde formaat.

Op smalle schermen verdwijnt tekst.

Dat is bij de balk onderaan en het uitschuifbare tabblad zo bedoeld: die verbergen elementen stap voor stap zodat het formulier blijft passen. Kies anders de positie "zwevende knop" als dat niet bij uw verkeer past.

Wat gebeurt er met mijn bestaande verzoeken bij een upgrade vanaf 1.x?

Die migreren automatisch. De oude tabel callbacks wordt bij de eerste keer laden na de update gekopieerd naar de nieuwe tabel wecallyouback_request, en uw instellingen gaan mee.