Hoe je een online veiling op je eigen website toont

Wat een goede veiling-embed laat zien

Vier dingen, en verder niets:

• De kavels die nu lopen, met foto, titel, actuele prijs en aantal biedingen, en een aftelklok naar elke sluiting die echt aftelt. Een kavel die nog niet open is, toont in plaats daarvan zijn startprijs en een aftelklok tot de opening.
• Een klik die de kavel opent op de veilingsite, in een nieuw tabblad, zodat de bezoeker kan bieden zonder jouw pagina kwijt te raken.
• Niets als er niets is. Het blok moet vanzelf verdwijnen als er geen kavel open is of aankomt. Een embed die de veiling van vorige maand toont, of "op dit moment geen veilingen", vertelt elke bezoeker dat je niets te doen hebt.
• Jouw uiterlijk. Jouw accentkleur en hoekstijl, zodat het leest als onderdeel van je site en niet als een advertentie.

Wat je vermijdt: een iframe van de hele veilingsite (twee schuifbalken, twee headers, een kapotte telefoonweergave), een schermafbeelding die veroudert op de dag dat hij wordt gemaakt, en alles wat bezoekers vraagt om op jouw site in te loggen om prijzen te zien.

De twee manieren

Een script. Eén <script>-regel die het blok tekent en actueel houdt. Dit is de gewone manier en werkt overal waar je websitebouwer "aangepaste code", "HTML insluiten" of een "codeblok" toelaat. Het hoort geen cookies te plaatsen en geen lettertypen of trackers namens je bezoekers te laden; vraag dat van elke widget die je overweegt, want jouw privacyverklaring is degene die het moet dekken.

Een live afbeelding met een link. Sommige plekken weigeren scripts: e-mailhandtekeningen, nieuwsbrieftools, de gratis abonnementen van een paar websitebouwers, intranetten. Daar doet een afbeelding die om de paar minuten op de server opnieuw wordt getekend, met een link naar de veiling eromheen, het grootste deel van het werk: hij laat zien hoeveel kavels er lopen en wanneer het bieden sluit, en blijft actueel in een pagina of een e-mail die weken geleden is verstuurd.

De regel code

Voor een veilingsite die op Auctify is gebouwd, is de gratis AuctionAmigo-widget één regel:

<script async src="https://auctionamigo.com/w.js"
  data-site="your-sale.myauctify.com" data-shape="horizontal"
  data-colour="#ffd23f" data-corners="8" data-background="light"></script>

Vervang your-sale.myauctify.com door het adres van je veilingsite, met of zonder https://; een eigen domein werkt hetzelfde. De ontwerper op de homepage van deze site schrijft de regel voor je, met jouw kleur en vorm ingevuld, en toont het resultaat voordat je hem kopieert. De attributen:

De widget ververst elke twee minuten, plaatst geen cookies en slaat niets op, laadt geen lettertypen en geen trackers, tekent in zijn eigen shadow root zodat jouw stijlen en de zijne elkaar met rust laten, en toont helemaal niets als de site niets open heeft en er niets aankomt. Bieden gebeurt op de veilingsite, nooit in de widget.

Welke vorm, en waar op de pagina

Begin met één plek, niet drie. De homepage, onder het eerste scherm, is de plek die de meeste bezoekers zien; een zwevende widget op elke pagina is de tweede. Stel het aantal kavels in op wat de ruimte aankan: drie kavels in een smalle zijbalk ogen beter dan twaalf.

Waar je hem plakt, bouwer voor bouwer

Elke websitebouwer heeft een vak voor code van anderen; de namen verschillen. De menunamen hieronder zijn zoals de bouwers ze op het moment van schrijven noemen en verschuiven bij herontwerpen, dus is er een verplaatst, zoek dan in de help van de bouwer op "embed code" of "custom code". Waar een functie van het abonnement afhangt, staat dat erbij; controleer je eigen abonnement voordat je ervan uitgaat.

1. WordPress

   Een Aangepaste HTML-blok in de blokeditor, op de pagina die je wilt, met de regel erin geplakt; of een widgetgebied voor een zijbalk. Er is een aparte gids over een veiling houden met een WordPress-site die dit en de vraag over plugins behandelt.

2. Wix

   In de editor: Elementen toevoegen → Code insluiten → HTML insluiten, plak de regel in het element en geef het de juiste grootte. Wix voert ingesloten code in een eigen frame uit, dus kies een inline vorm (horizontaal, verticaal of skyscraper) en maak het element zo groot als de vorm nodig heeft; een zwevende widget kan dat frame niet verlaten. Code voor de hele site gaat in Instellingen → Aangepaste code, wat Wix aanbiedt op zijn betaalde abonnementen met een gekoppeld domein.

3. Squarespace

   Voeg een Code-blok toe waar je de kavels wilt en plak de regel. Squarespace voert scripts in codeblokken uit vanaf het Business-abonnement; op het Personal-abonnement toont een codeblok alleen HTML, en doet een script niets. Voor alle pagina's tegelijk: Settings → Advanced → Code Injection → Footer, met dezelfde abonnementseis.

4. Jimdo

   Jimdo Creator: het element Widget / HTML, plak de regel. De nieuwere editor van Jimdo heeft een HTML-element op zijn betaalde abonnementen. Kies een inline vorm en geef het element ruimte.

5. Webflow

   Sleep een Embed-element op de pagina en plak de regel erin. Code voor de hele site gaat in Site settings → Custom code → Footer code, waarvoor een betaald site-abonnement nodig is om te publiceren.

6. Shopify

   Onlinewinkel → Thema's → Aanpassen, voeg een Aangepaste Liquid-blok (of Aangepaste HTML, afhankelijk van het thema) toe aan de sectie waar de kavels moeten komen, en plak de regel. De widget linkt naar de veilingsite; hij voegt niets toe aan de winkelwagen van de shop.

7. Weebly en Google Sites

   Weebly: het element Code insluiten. Google Sites: Invoegen → Insluiten → Code insluiten. Beide voeren de code in een eigen frame uit, dus gebruik een inline vorm en pas de grootte van het element daarop aan.

8. Gewone HTML, of een ontwikkelaar

   Plak de regel waar het blok moet komen, of vlak voor </body> met de zwevende vorm. Met data-target kun je de tag op één plek houden en de widget in elk element laten tekenen via zijn selector.

Waar scripts niet zijn toegestaan

E-mailhandtekeningen, nieuwsbrieftools, de gratis abonnementen van sommige bouwers en de meeste intranetten halen scripts weg. Gebruik daar de live afbeelding: een banner die om de paar minuten op de server wordt getekend en laat zien hoeveel kavels er lopen en wanneer het bieden sluit, met een link naar de veiling eromheen. In HTML is het een <a> om een <img>; in een nieuwsbrieftool is het "afbeelding toevoegen, link instellen". Omdat de afbeelding opnieuw wordt getekend, toont een e-mail van twee weken geleden nog steeds het actuele aantal, en zodra de veiling is afgelopen wordt hij een gewone uitnodiging om de veilingsite te bezoeken in plaats van een verouderde bewering.

Wat een live afbeelding niet kan: losse kavels met prijzen tonen, of aftellen. Het is de terugvaloptie, niet de eerste keus, en hoort veel meer thuis in een e-mail dan op een webpagina die het script zou kunnen uitvoeren.

Controleren of het werkt

Open de pagina in een privévenster van de browser, op een telefoon en op een computer. Je hoort de kavels binnen een seconde of twee te zien. Zie je helemaal niets, dan is het een van drie dingen, en de widget zwijgt over alle drie met opzet, zodat een bezoeker nooit een foutmelding ziet:

• De veilingsite heeft niets open en er komt niets aan. Plaats een kavel, of controleer of het bieden echt open is.
• De veilingsite staat in privémodus, dus niets ervan is openbaar. Een privésite kan nergens worden getoond.
• Het adres is verkeerd, of het element dat de bouwer aan de code gaf is te klein om in te tekenen. Controleer de spelling van data-site en maak het element dan groter.

Wacht daarna twee minuten na een bod op de veilingsite en controleer of de prijs op jouw pagina is veranderd. Vanaf dan is er niets te onderhouden: als de veiling afloopt, verwijdert het blok zichzelf, en de volgende veiling verschijnt zodra haar kavels zijn geplaatst.

Vragen