Come mostrare la tua asta online sul tuo sito web

Cosa mostra un buon embed di un’asta

Quattro cose, e nient’altro:

• I lotti in corso adesso, con foto, titolo, prezzo attuale e numero di offerte, e un conto alla rovescia per ogni chiusura che conta davvero. Un lotto non ancora aperto mostra invece il prezzo di partenza e un conto alla rovescia fino all’apertura.
• Un clic che apre il lotto sul sito d’aste, in una nuova scheda, così il visitatore può fare un’offerta senza perdere la tua pagina.
• Niente quando non c’è niente. Il blocco dovrebbe sparire da solo quando nessun lotto è aperto o in arrivo. Un embed che mostra la vendita del mese scorso, o "nessuna asta al momento", dice a ogni visitatore che non hai lavoro.
• Il tuo aspetto. Il tuo colore d’accento e il tuo stile di angoli, così si legge come parte del tuo sito e non come una pubblicità.

Cosa evitare: un iframe dell’intero sito d’aste (due barre di scorrimento, due intestazioni, un layout rotto sul telefono), uno screenshot che invecchia il giorno stesso in cui viene fatto, e qualsiasi cosa chieda ai visitatori di accedere sul tuo sito per vedere i prezzi.

I due modi per farlo

Uno script. Una riga <script> che disegna il blocco e lo tiene aggiornato. È il modo normale e funziona ovunque il tuo costruttore di siti permetta di aggiungere "codice personalizzato", "incorpora HTML" o un "blocco di codice". Non dovrebbe impostare cookie né caricare font o tracker per conto dei tuoi visitatori; pretendilo da qualsiasi widget tu prenda in considerazione, perché è la tua informativa sulla privacy a doverlo coprire.

Un’immagine in tempo reale con un link. Alcuni posti rifiutano gli script: firme email, strumenti per newsletter, i piani gratuiti di qualche costruttore di siti, le intranet. Lì, un’immagine ridisegnata sul server ogni pochi minuti, avvolta in un link alla vendita, fa gran parte del lavoro: mostra quanti lotti sono in corso e quando chiudono le offerte, e resta aggiornata in una pagina o in un’email inviata settimane fa.

La riga di codice

Per un sito d’aste creato con Auctify, il widget gratuito di AuctionAmigo è una riga:

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

Sostituisci your-sale.myauctify.com con l’indirizzo del tuo sito d’aste, con o senza https://; un dominio proprio funziona allo stesso modo. Il configuratore nella home page di questo sito scrive la riga per te, con il tuo colore e la tua forma già inseriti, e mostra il risultato prima che tu la copi. Gli attributi:

Si aggiorna ogni due minuti, non imposta cookie e non conserva nulla, non carica font né tracker, disegna dentro il proprio shadow root così i tuoi stili e i suoi non si disturbano a vicenda, e non mostra proprio nulla quando il sito non ha niente di aperto e niente in arrivo. Le offerte si fanno sul sito d’aste, mai dentro il widget.

Quale forma, e dove nella pagina

Inizia con una collocazione, non tre. La home page, sotto la prima schermata, è il posto che vede la maggior parte dei visitatori; un widget flottante su ogni pagina è il secondo. Imposta il numero di lotti su quanto lo spazio contiene: tre lotti in una barra laterale stretta stanno meglio di dodici.

Dove incollarla, costruttore per costruttore

Ogni costruttore ha una casella per il codice altrui; cambiano i nomi. I nomi dei menu qui sotto sono quelli che i costruttori usano al momento in cui scriviamo e si spostano con i restyling, quindi se uno si è spostato cerca "embed code" o "codice personalizzato" nella guida del costruttore. Dove una funzione dipende dal piano, lo diciamo; verifica il tuo piano prima di darlo per scontato.

1. WordPress

   Un blocco HTML personalizzato nell’editor a blocchi, sulla pagina che vuoi, con la riga incollata dentro; oppure un’area widget per una barra laterale. C’è una guida a parte su come gestire un’asta con un sito WordPress che tratta questo e la questione dei plugin.

2. Wix

   Nell’editor: Aggiungi elementi → Incorpora codice → Incorpora HTML, incolla la riga nell’elemento e ridimensionalo. Wix esegue il codice incorporato dentro un frame proprio, quindi scegli una forma in linea (orizzontale, verticale o skyscraper) e rendi l’elemento grande quanto la forma richiede; un widget flottante non può uscire da quel frame. Il codice per tutto il sito va in Impostazioni → Codice personalizzato, che Wix offre nei piani a pagamento con un dominio collegato.

3. Squarespace

   Aggiungi un blocco Codice dove vuoi i lotti e incolla la riga. Squarespace esegue gli script nei blocchi di codice dal piano Business in su; nel piano Personal un blocco di codice mostra solo HTML, e uno script non fa nulla. Per tutte le pagine insieme, Impostazioni → Avanzate → Inserimento codice → Piè di pagina, con lo stesso requisito di piano.

4. Jimdo

   Jimdo Creator: l’elemento Widget / HTML, incolla la riga. L’editor più recente di Jimdo ha un elemento HTML nei piani a pagamento. Scegli una forma in linea e dai spazio all’elemento.

5. Webflow

   Trascina un elemento Embed nella pagina e incollaci la riga. Il codice per tutto il sito va in Site settings → Custom code → Footer code, che richiede un piano sito a pagamento per essere pubblicato.

6. Shopify

   Negozio online → Temi → Personalizza, aggiungi un blocco Liquid personalizzato (o HTML personalizzato, a seconda del tema) alla sezione in cui devono comparire i lotti, e incolla la riga. Il widget rimanda al sito d’aste; non aggiunge nulla al carrello del negozio.

7. Weebly e Google Sites

   Weebly: l’elemento Codice incorporato. Google Sites: Inserisci → Incorpora → Incorpora codice. Entrambi eseguono il codice dentro un frame proprio, quindi usa una forma in linea e dimensiona l’elemento di conseguenza.

8. HTML semplice, o uno sviluppatore

   Incolla la riga dove deve comparire il blocco, oppure appena prima di </body> con la forma flottante. Con data-target puoi tenere il tag in un punto solo e far disegnare il widget in qualsiasi elemento tramite il suo selettore.

Dove gli script non sono ammessi

Firme email, strumenti per newsletter, i piani gratuiti di alcuni costruttori e la maggior parte delle intranet eliminano gli script. Lì usa l’immagine in tempo reale: un banner disegnato sul server ogni pochi minuti che mostra quanti lotti sono in corso e quando chiudono le offerte, avvolto in un link alla vendita. In HTML è un <a> attorno a un <img>; in uno strumento per newsletter è "aggiungi immagine, imposta link". Poiché l’immagine viene ridisegnata, un’email inviata due settimane fa mostra ancora il conteggio attuale, e quando la vendita è finita diventa un semplice invito a visitare il sito d’aste invece di un’affermazione vecchia.

Cosa un’immagine in tempo reale non può fare: mostrare i singoli lotti con i prezzi, o fare il conto alla rovescia. È il ripiego, non la prima scelta, e sta molto meglio in un’email che in una pagina web che potrebbe eseguire lo script.

Verificare che funzioni

Apri la pagina in una finestra di navigazione privata, su un telefono e su un computer. Dovresti vedere i lotti entro uno o due secondi. Se non vedi proprio nulla, è una di tre cose, e il widget tace su tutte e tre di proposito, perché un visitatore non veda mai un errore:

• Il sito d’aste non ha nulla di aperto e nulla in arrivo. Pubblica un lotto, o controlla che le offerte siano davvero aperte.
• Il sito d’aste è in modalità privata, quindi nulla di esso è pubblico. Un sito privato non si può mostrare da nessuna parte.
• L’indirizzo è sbagliato, oppure l’elemento che il costruttore ha dato al codice è troppo piccolo per disegnarci dentro. Controlla come è scritto data-site, poi ingrandisci l’elemento.

Poi aspetta due minuti dopo un’offerta sul sito d’aste e verifica che il prezzo sulla tua pagina sia cambiato. Da lì in poi non c’è nulla da mantenere: quando la vendita finisce il blocco si toglie da solo, e la vendita successiva compare quando i suoi lotti vengono pubblicati.

Domande