SitPup gids
Hoe voeg je een boekingswidget toe aan WordPress
WordPress geeft je vier of vijf plekken waar je embedcode kunt plakken, en sommige daarvan breken hem zonder waarschuwing. Dit is welke je gebruikt voor jouw setup, en wat je controleert als de knop niet verschijnt.
6 min leestijd
Bijpassende SitPup-pagina: Boekingswidget
Haal eerst de code op bij SitPup
Er is niets te installeren aan de WordPress-kant: geen plugin, geen accountkoppeling, geen API-sleutels. De hele integratie is twee regels HTML die je één keer genereert.
Open in SitPup de Widget-pagina, voeg je diensten en prijzen toe, zet de dieren aan die je accepteert, open dan de sectie Embed widget en publiceer. De code verschijnt pas na het publiceren. Het ziet eruit als een div met een paar data-attributen, gevolgd door een scripttag.
Kopieer beide regels. De div is waar de knop verschijnt, het script maakt er een knop van. Alleen een van beide doet niets.
Blokkeneditor (gutenberg): gebruik een custom html-blok
Dit is de standaard WordPress-editor en het geval waar de meeste mensen op stuklopen. Plak je embedcode in een Paragraaf-blok, dan verwijdert WordPress de scripttag bij het opslaan. Er verschijnt geen foutmelding; de code stopt gewoon stilletjes code te zijn, en je krijgt óf niets óf een regel zichtbare tekst op je pagina.
Het blok dat dit goed afhandelt, is Custom HTML.
- 1
Open de pagina of het bericht waar je de knop wilt
Een dienstenpagina of contactpagina converteert meestal beter dan de homepage.
- 2
Voeg een custom html-blok toe
Druk op het plusicoon, zoek naar "Custom HTML", en voeg het in. Gebruik geen Paragraaf, Code of Voorgeformatteerd; die zijn bedoeld om code te tonen, niet om hem uit te voeren.
- 3
Plak beide regels, precies zoals gekopieerd
Herformatteer of herindenteer ze niet. WordPress heeft geen probleem met de code zoals hij is.
- 4
Bekijk het voorbeeld, publiceer dan
De blokkeneditor toont een Voorbeeld-tabblad binnen het blok zelf, een snelle controle voordat je de pagina publiceert.
Paginabuilders: gebruik het html- of code-element
Is je thema gebouwd met Elementor, Divi, Bricks of een vergelijkbare builder, dan gebruik je de blokkeneditor voor die pagina helemaal niet, en heeft de builder zijn eigen equivalent.
In Elementor is dat de HTML-widget, in Divi de Code-module, in Bricks het Code-element. Ze staan meestal onder de groep Basis of Algemeen in het elementenpaneel. Sleep het naar de gewenste positie en plak de code erin.
Plak de code niet in een Tekst-editor of Rich Text-element. Net als het Paragraaf-blok filteren die scripttags eruit.
Classic editor: schakel eerst naar het tabblad tekst
Genoeg oudere huisdierenzorgsites draaien nog de Classic Editor, direct of via een plugin die hem terugbrengt. De regel hier is simpel maar makkelijk te vergeten: het tabblad Visueel herformatteert HTML achter je rug en kan de scripttag helemaal laten verdwijnen.
Klik op het tabblad Tekst voordat je plakt, zet de code op de gewenste plek in de markup, en sla op zonder terug te schakelen naar Visueel. Schakel je toch terug en sla je nogmaals op, controleer dan de gepubliceerde pagina, want de code heeft het misschien niet overleefd.
De knop op elke pagina zetten in plaats van op één
Wil je de knop sitebreed beschikbaar in plaats van op één pagina, dan is hem handmatig aan elke pagina toevoegen een onderhoudsprobleem in wording.
Een plugin voor header- en footerscripts lost dit netjes op. Je plakt de code één keer in de instellingen en kiest waar hij laadt. Dit is ook de nettere optie als iemand anders je site onderhoudt, want er is één plek om te kijken als er iets moet veranderen.
Als de knop niet verschijnt
In negen van de tien gevallen ligt het aan caching of optimalisatie, niet aan de code. WordPress-sites draaien meestal minstens één plugin die pagina's cachet, bestanden minified of JavaScript uitstelt, en die plugins zijn standaard agressief met scripts van derden.
Doorloop deze in volgorde voordat je aanneemt dat de embed kapot is:
- Wis je cache en herlaad de live pagina in een privévenster; je kijkt misschien naar een opgeslagen kopie van de oude pagina
- Zoek in je caching- of optimalisatieplugin de lijst met JavaScript-uitzonderingen en voeg de scripturl van SitPup toe
- Zet "uitstellen" of "vertraag JavaScript-uitvoering" specifiek uit voor dat script, niet sitebreed
- Controleer of de scripttag daadwerkelijk in de gepubliceerde pagina staat door de paginabron te bekijken en te zoeken op "sitpup"
- Gebruik je een beveiligingsplugin die HTML filtert, controleer dan of die geen scripttags uit berichtinhoud verwijdert
Ontbreekt de code helemaal in de paginabron, dan heeft de editor hem bij het opslaan verwijderd. Dat is een blok- of tabbladprobleem, geen cacheprobleem, dus ga terug naar de relevante sectie hierboven.
Controleer op de live pagina, niet in de editor
De voorbeeldweergave van de editor is een weergave van je content, geen getrouwe kopie van de gepubliceerde pagina, en draait niet dezelfde optimalisatielaag die je bezoekers raken.
Open de gepubliceerde URL in een privévenster, klik op de knop, en stuur jezelf een echte testaanvraag. Bevestig dat hij aankomt onder Reserveringen in je SitPup-dashboard. Open dezelfde pagina daarna op je telefoon, want daar komt het meeste huisdierenzorgverkeer vandaan en daar valt een slecht geplaatste embed meestal op.
Belangrijkste punten
- Geen plugin nodig; de integratie is twee regels HTML die je genereert na het publiceren van de widget.
- Gebruik een Custom HTML-blok in Gutenberg, het HTML- of Code-element in een paginabuilder, of het tabblad Tekst in de Classic Editor.
- Plak hem nooit in een Paragraaf- of Rich Text-element; de scripttag wordt stilletjes verwijderd.
- Gebruik voor een sitebrede knop een plugin voor header- en footerscripts in plaats van hem per pagina te plakken.
- Verschijnt de knop niet, controleer dan caching en JavaScript-uitstelinstellingen voordat je de code de schuld geeft.
Krijg je WordPress-boekingsknop
Configureer het formulier, publiceer, en plak de code van twee regels in een Custom HTML-blok. Geen plugin nodig.