Slik viser du nettauksjonen din på ditt eget nettsted

Hva en god auksjonsinnbygging viser

Fire ting, og ingenting annet:

• Objektene som er aktive nå, med bilde, tittel, gjeldende pris og antall bud, og en nedtelling til hver avslutning som faktisk teller ned. Et objekt som ikke har åpnet ennå, viser startprisen og en nedtelling til åpningen i stedet.
• Et klikk som åpner objektet på auksjonssiden, i en ny fane, så den besøkende kan by uten å miste siden din.
• Ingenting når det ikke er noe. Blokken bør forsvinne av seg selv når ingen objekter er åpne eller på vei. En innbygging som viser forrige måneds auksjon, eller «ingen auksjoner for øyeblikket», forteller hver besøkende at du ikke har noe å gjøre.
• Ditt utseende. Din aksentfarge og hjørnestil, så den oppfattes som en del av nettstedet ditt og ikke som en annonse.

Det du bør unngå: en iframe med hele auksjonssiden (to rullefelt, to topptekster, et ødelagt mobiloppsett), et skjermbilde som er utdatert samme dag det tas, og alt som ber besøkende logge inn på nettstedet ditt for å se priser.

De to måtene å gjøre det på

Et skript. Én <script>-linje som tegner blokken og holder den oppdatert. Dette er den vanlige måten, og den fungerer overalt der nettsidebyggeren din lar deg legge til «egendefinert kode», «bygg inn HTML» eller en «kodeblokk». Det bør ikke sette informasjonskapsler og ikke laste skrifter eller sporingsverktøy på vegne av de besøkende dine; krev det av enhver widget du vurderer, for det er personvernerklæringen din som må dekke den.

Et selvoppdaterende bilde med en lenke. Noen steder avviser skript: e-postsignaturer, nyhetsbrevverktøy, gratisplanene hos noen nettsidebyggere, intranett. Der gjør et bilde som tegnes på nytt på serveren med noen minutters mellomrom, pakket inn i en lenke til auksjonen, det meste av jobben: det viser hvor mange objekter som er aktive og når budgivningen avsluttes, og det holder seg oppdatert på en side eller i en e-post som ble sendt for flere uker siden.

Kodelinjen

For en auksjonsside bygget på Auctify er den gratis AuctionAmigo-widgeten én linje:

<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>

Bytt ut your-sale.myauctify.com med adressen til auksjonssiden din, med eller uten https://; et eget domene fungerer på samme måte. Designeren på forsiden av dette nettstedet skriver linjen for deg med din farge og form fylt inn, og viser resultatet før du kopierer den. Attributtene:

Den oppdateres hvert annet minutt, setter ingen informasjonskapsler og lagrer ingenting, laster ingen skrifter og ingen sporingsverktøy, tegner inne i sin egen shadow root, så dine stiler og dens stiler lar hverandre være i fred, og viser ingenting i det hele tatt når siden ikke har noe åpent og ingenting på vei. Budgivningen skjer på auksjonssiden, aldri inne i widgeten.

Hvilken form, og hvor på siden

Begynn med én plassering, ikke tre. Forsiden, under det første skjermbildet, er stedet de fleste besøkende ser; en flytende widget på hver side er det andre. Sett antall objekter til det plassen rommer: tre objekter i en smal sidespalte ser bedre ut enn tolv.

Hvor du limer den inn, bygger for bygger

Hver nettsidebygger har en boks for andres kode; navnene varierer. Menynavnene nedenfor er slik byggerne merker dem i skrivende stund, og de flytter på seg ved redesign, så hvis ett har flyttet, søk i byggerens hjelpesider etter «embed code» eller «custom code». Der en funksjon avhenger av planen, står det; sjekk din egen plan før du tar noe for gitt.

1. WordPress

   En Custom HTML-blokk i blokkredigeringen, på siden du vil ha den, med linjen limt inn; eller et widgetområde til en sidespalte. Det finnes en egen guide til å drive en auksjon med et WordPress-nettsted som dekker dette og spørsmålet om utvidelser.

2. Wix

   I redigeringsverktøyet: Add Elements → Embed Code → Embed HTML, lim linjen inn i elementet og tilpass størrelsen. Wix kjører innebygd kode i sin egen ramme, så velg en innebygd form (liggende, stående eller skyskraper) og gjør elementet så stort som formen trenger; en flytende widget kan ikke komme ut av den rammen. Kode for hele nettstedet legges i Settings → Custom Code, som Wix tilbyr på betalte planer med et tilkoblet domene.

3. Squarespace

   Legg til en Code-blokk der du vil ha objektene, og lim inn linjen. Squarespace kjører skript i kodeblokker på Business-planen og oppover; på Personal-planen viser en kodeblokk bare HTML, og et skript gjør ingenting. For alle sider på én gang, Settings → Advanced → Code Injection → Footer, som har samme plankrav.

4. Jimdo

   Jimdo Creator: elementet Widget / HTML, lim inn linjen. Jimdos nyere redigeringsverktøy har et HTML-element på de betalte planene. Velg en innebygd form og gi elementet plass.

5. Webflow

   Dra et Embed-element inn på siden og lim linjen inn i det. Kode for hele nettstedet legges i Site settings → Custom code → Footer code, som krever en betalt site-plan for å publisere.

6. Shopify

   Online Store → Themes → Customize, legg til en Custom Liquid-blokk (eller Custom HTML, avhengig av temaet) i seksjonen der objektene skal vises, og lim inn linjen. Widgeten lenker ut til auksjonssiden; den legger ikke noe i butikkens handlekurv.

7. Weebly og Google Sites

   Weebly: elementet Embed Code. Google Sites: Insert → Embed → Embed code. Begge kjører koden i sin egen ramme, så bruk en innebygd form og tilpass elementet til den.

8. Ren HTML, eller en utvikler

   Lim inn linjen der blokken skal vises, eller rett før </body> med den flytende formen. Med data-target kan du la taggen stå på ett sted og få widgeten til å tegne i et hvilket som helst element via velgeren dets.

Der skript ikke er tillatt

E-postsignaturer, nyhetsbrevverktøy, gratisplanene hos noen byggere og de fleste intranett fjerner skript. Bruk det selvoppdaterende bildet der: et banner som tegnes på serveren med noen minutters mellomrom, og som viser hvor mange objekter som er aktive og når budgivningen avsluttes, pakket inn i en lenke til auksjonen. I HTML er det en <a> rundt en <img>; i et nyhetsbrevverktøy er det «legg til bilde, angi lenke». Fordi bildet tegnes på nytt, viser en e-post sendt for to uker siden fortsatt gjeldende antall, og når auksjonen er over, blir det en enkel invitasjon til å besøke auksjonssiden i stedet for en utdatert påstand.

Det et selvoppdaterende bilde ikke kan: vise enkeltobjekter med priser, eller telle ned. Det er reserveløsningen, ikke førstevalget, og det hører langt mer hjemme i en e-post enn på en nettside som kunne kjørt skriptet.

Sjekk at det virker

Åpne siden i et privat nettleservindu på en mobil og på en datamaskin. Du bør se objektene i løpet av et sekund eller to. Ser du ingenting i det hele tatt, er det én av tre ting, og widgeten er taus om alle tre med vilje, så en besøkende aldri ser en feilmelding:

• Auksjonssiden har ingenting åpent og ingenting på vei. Legg ut et objekt, eller sjekk at budgivningen faktisk er åpen.
• Auksjonssiden er i privatmodus, så ingenting ved den er offentlig. En privat side kan ikke vises noe sted.
• Adressen er feil, eller elementet byggeren ga koden, er for lite å tegne i. Sjekk stavingen i data-site, og gjør så elementet større.

Vent så to minutter etter et bud på auksjonssiden, og bekreft at prisen på siden din har flyttet seg. Fra da av er det ingenting å vedlikeholde: når auksjonen er over, fjerner blokken seg selv, og neste auksjon dukker opp når objektene dens er lagt ut.

Spørsmål