Comment afficher votre vente aux enchères en ligne sur votre propre site web

Ce qu’un bon bloc d’enchères intégré affiche

Quatre choses, et rien d’autre :

• Les lots en cours, avec photo, titre, prix actuel et nombre d’enchères, et un compte à rebours jusqu’à chaque clôture qui décompte vraiment. Un lot pas encore ouvert affiche à la place son prix de départ et un compte à rebours jusqu’à son ouverture.
• Un clic qui ouvre le lot sur le site d’enchères, dans un nouvel onglet, pour que le visiteur puisse enchérir sans perdre votre page.
• Rien quand il n’y a rien. Le bloc doit disparaître de lui-même quand aucun lot n’est ouvert ni à venir. Un bloc qui montre la vente du mois dernier, ou « aucune vente en ce moment », dit à chaque visiteur que vous n’êtes pas occupé.
• Votre apparence. Votre couleur d’accent et votre style d’angles, pour qu’il se lise comme une partie de votre site et non comme une publicité.

Ce qu’il faut éviter : une iframe de tout le site d’enchères (deux barres de défilement, deux en-têtes, une mise en page cassée sur téléphone), une capture d’écran périmée dès le jour où elle est prise, et tout ce qui demande aux visiteurs de se connecter sur votre site pour voir les prix.

Les deux façons de faire

Un script. Une ligne <script> qui dessine le bloc et le tient à jour. C’est la méthode normale, et elle fonctionne partout où votre éditeur de site permet d’ajouter du « code personnalisé », d’« intégrer du HTML » ou un « bloc de code ». Il ne doit déposer aucun cookie ni charger de polices ou de traceurs pour le compte de vos visiteurs ; exigez-le de tout widget que vous envisagez, parce que c’est votre politique de confidentialité qui doit le couvrir.

Une image en direct avec un lien. Certains endroits refusent les scripts : les signatures d’e-mail, les outils de newsletter, les offres gratuites de quelques éditeurs de site, les intranets. Là, une image redessinée sur le serveur toutes les quelques minutes, entourée d’un lien vers la vente, fait l’essentiel du travail : elle montre combien de lots sont en cours et quand les enchères ferment, et elle reste à jour dans une page ou un e-mail envoyé il y a des semaines.

La ligne de code

Pour un site d’enchères créé sur Auctify, le widget gratuit AuctionAmigo tient en une ligne :

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

Remplacez your-sale.myauctify.com par l’adresse de votre site d’enchères, avec ou sans https:// ; un domaine personnel fonctionne de la même façon. Le configurateur sur la page d’accueil de ce site écrit la ligne pour vous, avec votre couleur et votre forme déjà renseignées, et montre le résultat avant que vous ne la copiiez. Les attributs :

Il se rafraîchit toutes les deux minutes, ne dépose aucun cookie et ne stocke rien, ne charge ni polices ni traceurs, se dessine dans son propre shadow root pour que vos styles et les siens ne se gênent pas, et n’affiche rien du tout quand le site n’a rien d’ouvert ni rien à venir. Les enchères se font sur le site d’enchères, jamais dans le widget.

Quelle forme, et où sur la page

Commencez par un emplacement, pas trois. La page d’accueil, sous le premier écran, est l’endroit que la plupart des visiteurs voient ; un widget flottant sur chaque page vient en second. Réglez le nombre de lots sur ce que l’espace peut contenir : trois lots dans une barre latérale étroite rendent mieux que douze.

Où le coller, éditeur par éditeur

Chaque éditeur a une case pour le code d’autrui ; les noms diffèrent. Les noms de menu ci-dessous sont ceux que les éditeurs utilisent au moment où nous écrivons, et ils bougent au gré des refontes : si l’un d’eux a changé de place, cherchez « code d’intégration » ou « code personnalisé » dans l’aide de l’éditeur. Lorsqu’une fonction dépend de l’offre, c’est indiqué ; vérifiez votre propre offre avant de présumer.

1. WordPress

   Un bloc HTML personnalisé dans l’éditeur de blocs, sur la page voulue, avec la ligne collée dedans ; ou une zone de widgets pour une barre latérale. Il existe un guide distinct sur l’organisation d’une vente aux enchères avec un site WordPress qui traite de ce point et de la question des extensions.

2. Wix

   Dans l’éditeur : Ajouter des éléments → Intégrer du code → Intégrer HTML, collez la ligne dans l’élément et dimensionnez-le. Wix exécute le code intégré dans son propre cadre : choisissez donc une forme en ligne (horizontal, vertical ou skyscraper) et donnez à l’élément la taille que la forme exige ; un widget flottant ne peut pas sortir de ce cadre. Le code valable pour tout le site va dans Paramètres → Code personnalisé, que Wix propose sur ses offres payantes avec un domaine connecté.

3. Squarespace

   Ajoutez un bloc Code là où vous voulez les lots et collez la ligne. Squarespace exécute les scripts des blocs de code à partir de l’offre Business ; sur l’offre Personal, un bloc de code n’affiche que du HTML et un script ne fait rien. Pour toutes les pages à la fois, Paramètres → Avancé → Injection de code → Pied de page, qui exige la même offre.

4. Jimdo

   Jimdo Creator : l’élément Widget / HTML, collez la ligne. Le nouvel éditeur de Jimdo propose un élément HTML sur ses offres payantes. Choisissez une forme en ligne et laissez de la place à l’élément.

5. Webflow

   Glissez un élément Embed sur la page et collez-y la ligne. Le code valable pour tout le site va dans Site settings → Custom code → Footer code, ce qui demande une offre de site payante pour publier.

6. Shopify

   Boutique en ligne → Thèmes → Personnaliser, ajoutez un bloc Liquid personnalisé (ou HTML personnalisé, selon le thème) à la section où les lots doivent apparaître, et collez la ligne. Le widget renvoie vers le site d’enchères ; il n’ajoute rien au panier de la boutique.

7. Weebly et Google Sites

   Weebly : l’élément Code intégré. Google Sites : Insérer → Intégrer → Code intégré. Les deux exécutent le code dans un cadre à eux : utilisez une forme en ligne et dimensionnez l’élément en conséquence.

8. HTML brut, ou un développeur

   Collez la ligne là où le bloc doit apparaître, ou juste avant </body> avec la forme flottante. Avec data-target, vous pouvez laisser la balise à un seul endroit et faire dessiner le widget dans n’importe quel élément via son sélecteur.

Là où les scripts ne sont pas autorisés

Les signatures d’e-mail, les outils de newsletter, les offres gratuites de certains éditeurs et la plupart des intranets suppriment les scripts. Utilisez-y l’image en direct : une bannière dessinée sur le serveur toutes les quelques minutes, qui montre combien de lots sont en cours et quand les enchères ferment, entourée d’un lien vers la vente. En HTML, c’est un <a> autour d’un <img> ; dans un outil de newsletter, c’est « ajouter une image, définir le lien ». Comme l’image est redessinée, un e-mail envoyé il y a deux semaines montre encore le nombre actuel, et une fois la vente terminée, elle devient une simple invitation à visiter le site d’enchères plutôt qu’une affirmation périmée.

Ce qu’une image en direct ne peut pas faire : montrer les lots un par un avec leur prix, ni décompter. C’est la solution de repli, pas le premier choix, et elle a bien plus sa place dans un e-mail que sur une page web qui pourrait exécuter le script.

Vérifier que ça fonctionne

Ouvrez la page dans une fenêtre de navigation privée, sur un téléphone et sur un ordinateur. Vous devriez voir les lots en une seconde ou deux. Si vous ne voyez rien du tout, c’est l’une de ces trois choses, et le widget se tait volontairement sur chacune, pour qu’un visiteur ne voie jamais d’erreur :

• Le site d’enchères n’a rien d’ouvert ni rien à venir. Mettez un lot en ligne, ou vérifiez que les enchères sont bien ouvertes.
• Le site d’enchères est en mode privé, donc rien de ce qu’il contient n’est public. Un site privé ne peut être affiché nulle part.
• L’adresse est fausse, ou l’élément que l’éditeur a donné au code est trop petit pour y dessiner. Vérifiez l’orthographe de data-site, puis agrandissez l’élément.

Attendez ensuite deux minutes après une enchère sur le site d’enchères et vérifiez que le prix sur votre page a bougé. À partir de là, il n’y a rien à entretenir : quand la vente se termine, le bloc se retire de lui-même, et la vente suivante apparaît dès que ses lots sont mis en ligne.

Questions