Cómo mostrar tu subasta online en tu propia página web

Qué muestra una buena integración de subasta

Cuatro cosas, y nada más:

• Los lotes activos ahora mismo, con foto, título, precio actual y número de pujas, y una cuenta atrás hasta cada cierre que de verdad cuente. Un lote que aún no ha abierto muestra en su lugar su precio de salida y una cuenta atrás hasta su apertura.
• Un clic que abre el lote en el sitio de subastas, en una pestaña nueva, para que el visitante pueda pujar sin perder tu página.
• Nada cuando no hay nada. El bloque debería desaparecer por sí solo cuando no hay ningún lote abierto ni por llegar. Una integración que muestra la subasta del mes pasado, o «no hay subastas en este momento», le dice a cada visitante que no tienes actividad.
• Tu aspecto. Tu color de acento y tu estilo de esquinas, para que se lea como parte de tu web y no como un anuncio.

Qué evitar: un iframe con todo el sitio de subastas (dos barras de desplazamiento, dos cabeceras, una maquetación rota en el móvil), una captura de pantalla que se queda desfasada el mismo día en que se hace, y cualquier cosa que pida a los visitantes iniciar sesión en tu web para ver los precios.

Las dos formas de hacerlo

Un script. Una línea <script> que dibuja el bloque y lo mantiene al día. Es la forma normal y funciona dondequiera que tu creador de webs te deje añadir «código personalizado», «insertar HTML» o un «bloque de código». No debería instalar cookies ni cargar fuentes o rastreadores en nombre de tus visitantes; exígeselo a cualquier widget que te plantees, porque es tu aviso de privacidad el que tiene que cubrirlo.

Una imagen en directo con un enlace. Algunos lugares rechazan los scripts: firmas de correo, herramientas de boletines, los planes gratuitos de algunos creadores de webs, intranets. Allí, una imagen que se vuelve a dibujar en el servidor cada pocos minutos, envuelta en un enlace a la subasta, hace la mayor parte del trabajo: muestra cuántos lotes están activos y cuándo cierran las pujas, y se mantiene al día en una página o en un correo enviado hace semanas.

La línea de código

Para un sitio de subastas creado con Auctify, el widget gratuito de AuctionAmigo es una sola línea:

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

Sustituye your-sale.myauctify.com por la dirección de tu sitio de subastas, con o sin https://; un dominio propio funciona igual. El diseñador de la página de inicio de este sitio escribe la línea por ti con tu color y tu forma ya puestos, y muestra el resultado antes de que la copies. Los atributos:

Se actualiza cada dos minutos, no instala cookies ni guarda nada, no carga fuentes ni rastreadores, se dibuja dentro de su propio shadow root para que tus estilos y los suyos no se molesten, y no muestra absolutamente nada cuando el sitio no tiene nada abierto ni nada por llegar. Las pujas se hacen en el sitio de subastas, nunca dentro del widget.

Qué forma, y en qué parte de la página

Empieza con una ubicación, no con tres. La página de inicio, bajo la primera pantalla, es el lugar que ven más visitantes; un widget flotante en todas las páginas es el segundo. Ajusta el número de lotes a lo que quepa en el espacio: tres lotes en una barra lateral estrecha quedan mejor que doce.

Dónde pegarla, creador por creador

Todos los creadores de webs tienen un cuadro para código ajeno; los nombres cambian. Los nombres de menú de abajo son los que usan los creadores en el momento de escribir esto y se mueven con cada rediseño, así que si alguno ha cambiado de sitio, busca «insertar código» o «código personalizado» en la ayuda del creador. Donde una función depende del plan, se indica; comprueba tu propio plan antes de dar nada por hecho.

1. WordPress

   Un bloque HTML personalizado en el editor de bloques, en la página que quieras, con la línea pegada dentro; o un área de widgets para una barra lateral. Hay una guía aparte sobre cómo organizar una subasta con una web en WordPress que trata esto y la cuestión de los plugins.

2. Wix

   En el editor: Añadir elementos → Insertar código → Insertar HTML, pega la línea en el elemento y dale tamaño. Wix ejecuta el código insertado dentro de su propio marco, así que elige una forma en línea (horizontal, vertical o rascacielos) y haz el elemento tan grande como la forma necesite; un widget flotante no puede salir de ese marco. El código para toda la web va en Configuración → Código personalizado, que Wix ofrece en sus planes de pago con un dominio conectado.

3. Squarespace

   Añade un bloque Código donde quieras los lotes y pega la línea. Squarespace ejecuta scripts en los bloques de código a partir de su plan Business; en el plan Personal un bloque de código solo muestra HTML, y un script no hace nada. Para todas las páginas a la vez, Configuración → Avanzado → Inyección de código → Pie de página, con el mismo requisito de plan.

4. Jimdo

   Jimdo Creator: el elemento Widget / HTML, pega la línea. El editor más reciente de Jimdo tiene un elemento HTML en sus planes de pago. Elige una forma en línea y dale espacio al elemento.

5. Webflow

   Arrastra un elemento Embed a la página y pega la línea dentro. El código para toda la web va en Site settings → Custom code → Footer code, que necesita un plan de sitio de pago para publicarse.

6. Shopify

   Tienda online → Temas → Personalizar, añade un bloque Liquid personalizado (o HTML personalizado, según el tema) a la sección donde deban aparecer los lotes y pega la línea. El widget enlaza hacia el sitio de subastas; no añade nada al carrito de la tienda.

7. Weebly y Google Sites

   Weebly: el elemento Código insertado. Google Sites: Insertar → Insertar → Código para insertar. Ambos ejecutan el código dentro de un marco propio, así que usa una forma en línea y ajusta el tamaño del elemento a ella.

8. HTML plano, o un desarrollador

   Pega la línea donde deba aparecer el bloque, o justo antes de </body> con la forma flotante. Con data-target puedes dejar la etiqueta en un solo sitio y hacer que el widget se dibuje en cualquier elemento por su selector.

Donde no se admiten scripts

Las firmas de correo, las herramientas de boletines, los planes gratuitos de algunos creadores de webs y la mayoría de las intranets eliminan los scripts. Usa allí la imagen en directo: un banner dibujado en el servidor cada pocos minutos que muestra cuántos lotes están activos y cuándo cierran las pujas, envuelto en un enlace a la subasta. En HTML es un <a> alrededor de un <img>; en una herramienta de boletines es «añadir imagen, poner enlace». Como la imagen se vuelve a dibujar, un correo enviado hace dos semanas sigue mostrando el recuento actual, y una vez terminada la subasta se convierte en una simple invitación a visitar el sitio de subastas en lugar de una afirmación desfasada.

Lo que una imagen en directo no puede hacer: mostrar lotes individuales con precios, ni hacer una cuenta atrás. Es la alternativa, no la primera opción, y encaja mucho más en un correo que en una página web que podría ejecutar el script.

Comprobar que funciona

Abre la página en una ventana privada del navegador, en un móvil y en un ordenador. Deberías ver los lotes en uno o dos segundos. Si no ves nada en absoluto, es una de estas tres cosas, y el widget calla ante las tres a propósito, para que un visitante nunca vea un error:

• El sitio de subastas no tiene nada abierto ni nada por llegar. Publica un lote, o comprueba que las pujas estén realmente abiertas.
• El sitio de subastas está en modo privado, así que nada de él es público. Un sitio privado no se puede mostrar en ninguna parte.
• La dirección está mal, o el elemento que el creador de webs le ha dado al código es demasiado pequeño para dibujar en él. Revisa cómo está escrito data-site y después agranda el elemento.

Después espera dos minutos tras una puja en el sitio de subastas y confirma que el precio en tu página ha cambiado. A partir de ahí no hay nada que mantener: cuando la subasta termina, el bloque se retira solo, y la siguiente subasta aparece cuando se publican sus lotes.

Preguntas