Så visar du din nätauktion på din egen webbplats

Vad en bra auktionsinbäddning visar

Fyra saker, och inget annat:

• Objekten som är aktiva nu, med foto, titel, aktuellt pris och antal bud, och en nedräkning till varje stängning som faktiskt räknar ner. Ett objekt som inte har öppnat än visar i stället sitt startpris och en nedräkning till öppningen.
• Ett klick som öppnar objektet på auktionssajten, i en ny flik, så att besökaren kan lägga bud utan att tappa bort din sida.
• Ingenting när det inte finns något. Blocket ska försvinna av sig självt när inget objekt är öppet eller på gång. En inbäddning som visar förra månadens auktion, eller ”inga auktioner just nu”, säger till varje besökare att du inte har något på gång.
• Ditt utseende. Din accentfärg och din hörnstil, så att det ser ut som en del av din sajt och inte som en annons.

Vad du bör undvika: en iframe med hela auktionssajten (två rullningslister, två sidhuvuden, en trasig mobillayout), en skärmdump som blir inaktuell samma dag den tas, och allt som kräver att besökare loggar in på din sajt för att se priser.

De två sätten att göra det

Ett skript. En <script>-rad som ritar blocket och håller det aktuellt. Det här är det normala sättet och fungerar överallt där ditt hemsidesverktyg låter dig lägga till ”egen kod”, ”bädda in HTML” eller ett ”kodblock”. Det bör inte sätta några kakor och inte ladda typsnitt eller spårare på dina besökares vägnar; kräv det av varje widget du överväger, för det är din integritetspolicy som måste täcka den.

En levande bild med en länk. Vissa platser vägrar skript: e-postsignaturer, nyhetsbrevsverktyg, några hemsidesverktygs gratisplaner, intranät. Där gör en bild som ritas om på servern med några minuters mellanrum, inlindad i en länk till auktionen, det mesta av jobbet: den visar hur många objekt som är aktiva och när budgivningen stänger, och den förblir aktuell på en sida eller i ett mejl som skickades för flera veckor sedan.

Kodraden

För en auktionssajt byggd på Auctify är den gratis AuctionAmigo-widgeten en enda rad:

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

Byt ut your-sale.myauctify.com mot din auktionssajts adress, med eller utan https://; en egen domän fungerar likadant. Designern på den här sajtens startsida skriver raden åt dig med din färg och form ifyllda, och visar resultatet innan du kopierar den. Attributen:

Den uppdateras varannan minut, sätter inga kakor och sparar ingenting, laddar inga typsnitt och inga spårare, ritar inuti sin egen shadow root så att dina stilar och dess stilar lämnar varandra i fred, och ritar ingenting alls när sajten inte har något öppet och inget på gång. Budgivningen sker på auktionssajten, aldrig inuti widgeten.

Vilken form, och var på sidan

Börja med en placering, inte tre. Startsidan, under första skärmen, är platsen flest besökare ser; en flytande widget på varje sida är den andra. Sätt antalet objekt efter vad utrymmet rymmer: tre objekt i en smal sidopanel ser bättre ut än tolv.

Var du klistrar in den, verktyg för verktyg

Varje verktyg har en ruta för andras kod; namnen skiljer sig åt. Menynamnen nedan är som verktygen kallar dem i skrivande stund och flyttar runt vid omdesigner, så om ett har flyttat, sök i verktygets hjälp efter ”bädda in kod” eller ”egen kod”. Där en funktion beror på planen står det; kolla din egen plan innan du antar något.

1. WordPress

   Ett Anpassad HTML-block i blockredigeraren, på sidan du vill, med raden inklistrad; eller en widgetyta för en sidopanel. Det finns en separat guide om att driva en auktion med en WordPress-sajt som tar upp det här och frågan om tillägg.

2. Wix

   I redigeraren: Lägg till element → Bädda in kod → Bädda in HTML, klistra in raden i elementet och ge det storlek. Wix kör inbäddad kod i en egen ram, så välj en infogad form (liggande, stående eller skyskrapa) och gör elementet så stort som formen kräver; en flytande widget kan inte lämna den ramen. Kod för hela sajten läggs under Inställningar → Egen kod, som Wix erbjuder på sina betalplaner med en ansluten domän.

3. Squarespace

   Lägg till ett Kod-block där du vill ha objekten och klistra in raden. Squarespace kör skript i kodblock på planen Business och uppåt; på planen Personal visar ett kodblock bara HTML, och ett skript gör ingenting. För alla sidor på en gång, Inställningar → Avancerat → Kodinjektion → Sidfot, med samma plankrav.

4. Jimdo

   Jimdo Creator: elementet Widget / HTML, klistra in raden. Jimdos nyare redigerare har ett HTML-element på sina betalplaner. Välj en infogad form och ge elementet plats.

5. Webflow

   Dra ett Embed-element till sidan och klistra in raden i det. Kod för hela sajten läggs under Site settings → Custom code → Footer code, som kräver en betald sajtplan för att kunna publiceras.

6. Shopify

   Webbutik → Teman → Anpassa, lägg till ett Custom Liquid-block (eller Anpassad HTML, beroende på temat) i sektionen där objekten ska visas, och klistra in raden. Widgeten länkar ut till auktionssajten; den lägger ingenting i butikens varukorg.

7. Weebly och Google Sites

   Weebly: elementet Bädda in kod. Google Sites: Infoga → Bädda in → Bädda in kod. Båda kör koden i en egen ram, så använd en infogad form och anpassa elementets storlek efter den.

8. Ren HTML, eller en utvecklare

   Klistra in raden där blocket ska visas, eller strax före </body> med den flytande formen. Med data-target kan du låta taggen ligga på ett ställe och låta widgeten rita i vilket element som helst via dess väljare.

Där skript inte tillåts

E-postsignaturer, nyhetsbrevsverktyg, vissa verktygs gratisplaner och de flesta intranät tar bort skript. Använd den levande bilden där: en banner som ritas på servern med några minuters mellanrum och visar hur många objekt som är aktiva och när budgivningen stänger, inlindad i en länk till auktionen. I HTML är det ett <a> runt en <img>; i ett nyhetsbrevsverktyg är det ”lägg till bild, ange länk”. Eftersom bilden ritas om visar ett mejl som skickades för två veckor sedan fortfarande det aktuella antalet, och när auktionen är slut blir den en enkel inbjudan att besöka auktionssajten i stället för ett inaktuellt påstående.

Vad en levande bild inte kan: visa enskilda objekt med priser, eller räkna ner. Den är reservlösningen, inte förstahandsvalet, och den hör hemma i ett mejl betydligt mer än på en webbsida som kunde ha kört skriptet.

Kontrollera att det fungerar

Öppna sidan i ett privat webbläsarfönster på en mobil och på en dator. Du bör se objekten inom en sekund eller två. Ser du ingenting alls är det en av tre saker, och widgeten är tyst om alla tre med flit, så att en besökare aldrig ser ett felmeddelande:

• Auktionssajten har inget öppet och inget på gång. Lägg upp ett objekt, eller kontrollera att budgivningen faktiskt är öppen.
• Auktionssajten är i privat läge, så inget om den är offentligt. En privat sajt kan inte visas någonstans.
• Adressen är fel, eller elementet som verktyget gav koden är för litet att rita i. Kontrollera stavningen av data-site, och gör sedan elementet större.

Vänta sedan två minuter efter ett bud på auktionssajten och bekräfta att priset på din sida har ändrats. Därefter finns inget att underhålla: när auktionen är slut tar blocket bort sig självt, och nästa auktion dyker upp när dess objekt läggs upp.

Frågor