Como mostrar seu leilão online no seu próprio site

O que um bom bloco de leilão incorporado mostra

Quatro coisas, e nada mais:

• Os lotes ativos agora, com foto, título, preço atual e número de lances, e uma contagem regressiva até cada encerramento que realmente conta. Um lote que ainda não abriu mostra, no lugar, o preço inicial e uma contagem regressiva até a abertura.
• Um clique que abre o lote no site de leilões, em uma nova aba, para que o visitante dê lance sem perder a sua página.
• Nada quando não há nada. O bloco deve sumir sozinho quando nenhum lote está aberto nem por vir. Um bloco que mostra o leilão do mês passado, ou "nenhum leilão no momento", diz a todo visitante que você não tem movimento.
• O seu visual. Sua cor de destaque e o estilo dos cantos, para que ele pareça parte do seu site, e não um anúncio.

O que evitar: um iframe do site de leilões inteiro (duas barras de rolagem, dois cabeçalhos, um layout quebrado no celular), uma captura de tela que fica desatualizada no dia em que é feita e qualquer coisa que peça aos visitantes que façam login no seu site para ver os preços.

As duas maneiras de fazer

Um script. Uma linha <script> que desenha o bloco e o mantém atualizado. É a maneira normal e funciona onde quer que o seu criador de sites permita adicionar "código personalizado", "incorporar HTML" ou um "bloco de código". Ele não deve gravar cookies nem carregar fontes ou rastreadores em nome dos seus visitantes; exija isso de qualquer widget que você considere, porque é a sua política de privacidade que precisa cobri-lo.

Uma imagem ao vivo com um link. Alguns lugares recusam scripts: assinaturas de e-mail, ferramentas de newsletter, os planos gratuitos de alguns criadores de sites, intranets. Ali, uma imagem redesenhada no servidor a cada poucos minutos, envolvida em um link para o leilão, faz a maior parte do trabalho: mostra quantos lotes estão ativos e quando os lances encerram, e continua atualizada em uma página ou em um e-mail enviado semanas atrás.

A linha de código

Para um site de leilões criado no Auctify, o widget gratuito do AuctionAmigo é uma linha:

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

Substitua your-sale.myauctify.com pelo endereço do seu site de leilões, com ou sem https://; um domínio próprio funciona do mesmo jeito. O designer na página inicial deste site escreve a linha para você, com a sua cor e o seu formato preenchidos, e mostra o resultado antes de você copiar. Os atributos:

Ele se atualiza a cada dois minutos, não grava cookies e não armazena nada, não carrega fontes nem rastreadores, desenha dentro de seu próprio shadow root para que os seus estilos e os dele não interfiram um no outro, e não renderiza nada quando o site não tem nada aberto nem por vir. Os lances acontecem no site de leilões, nunca dentro do widget.

Qual formato, e onde na página

Comece com uma posição, não três. A página inicial, abaixo da primeira tela, é o lugar que a maioria dos visitantes vê; um widget flutuante em todas as páginas é o segundo. Ajuste o número de lotes ao que o espaço comporta: três lotes em uma barra lateral estreita ficam melhores do que doze.

Onde colar, criador por criador

Todo criador de sites tem uma caixa para código de terceiros; os nomes variam. Os nomes de menu abaixo são como os criadores os rotulam no momento em que escrevemos e mudam de lugar a cada redesign, então, se algum tiver mudado, procure na ajuda do criador por "código incorporado" ou "código personalizado". Onde um recurso depende do plano, está indicado; confira o seu próprio plano antes de presumir.

1. WordPress

   Um bloco HTML personalizado no editor de blocos, na página que você quiser, com a linha colada; ou uma área de widgets para uma barra lateral. Há um guia à parte sobre fazer um leilão com um site WordPress que cobre isso e a questão dos plugins.

2. Wix

   No editor: Adicionar elementos → Incorporar código → Incorporar HTML, cole a linha no elemento e ajuste o tamanho. O Wix executa código incorporado dentro de um frame próprio, então escolha um formato em linha (horizontal, vertical ou arranha-céu) e deixe o elemento do tamanho que o formato precisa; um widget flutuante não consegue sair desse frame. Código para o site inteiro vai em Configurações → Código personalizado, que o Wix oferece nos planos pagos com um domínio conectado.

3. Squarespace

   Adicione um bloco Código onde você quer os lotes e cole a linha. O Squarespace executa scripts em blocos de código no plano Business e superiores; no plano Personal, um bloco de código mostra apenas HTML, e um script não faz nada. Para todas as páginas de uma vez, Configurações → Avançado → Injeção de código → Rodapé, com a mesma exigência de plano.

4. Jimdo

   Jimdo Creator: o elemento Widget / HTML, cole a linha. O editor mais novo do Jimdo tem um elemento HTML nos planos pagos. Escolha um formato em linha e dê espaço ao elemento.

5. Webflow

   Arraste um elemento Embed para a página e cole a linha nele. Código para o site inteiro vai em Site settings → Custom code → Footer code, que exige um plano de site pago para publicar.

6. Shopify

   Loja virtual → Temas → Personalizar, adicione um bloco Liquid personalizado (ou HTML personalizado, dependendo do tema) à seção em que os lotes devem aparecer e cole a linha. O widget leva ao site de leilões; ele não adiciona nada ao carrinho da loja.

7. Weebly e Google Sites

   Weebly: o elemento Embed Code. Google Sites: Inserir → Incorporar → Código de incorporação. Os dois executam o código dentro de um frame próprio, então use um formato em linha e ajuste o elemento a ele.

8. HTML puro, ou um desenvolvedor

   Cole a linha onde o bloco deve aparecer, ou logo antes de </body> com o formato flutuante. Com data-target você pode manter a tag em um só lugar e fazer o widget desenhar em qualquer elemento pelo seu seletor.

Onde scripts não são permitidos

Assinaturas de e-mail, ferramentas de newsletter, os planos gratuitos de alguns criadores de sites e a maioria das intranets removem scripts. Use a imagem ao vivo ali: um banner desenhado no servidor a cada poucos minutos, mostrando quantos lotes estão ativos e quando os lances encerram, envolvido em um link para o leilão. Em HTML, é um <a> em volta de um <img>; em uma ferramenta de newsletter, é "adicionar imagem, definir link". Como a imagem é redesenhada, um e-mail enviado duas semanas atrás ainda mostra a contagem atual, e, quando o leilão termina, ela vira um simples convite para visitar o site de leilões em vez de uma afirmação desatualizada.

O que uma imagem ao vivo não faz: mostrar lotes individuais com preços, nem fazer contagem regressiva. É a alternativa, não a primeira escolha, e cabe muito mais em um e-mail do que em uma página da web que poderia executar o script.

Conferindo se funciona

Abra a página em uma janela anônima do navegador, no celular e no computador. Você deve ver os lotes em um ou dois segundos. Se não vir nada, é uma de três coisas, e o widget fica em silêncio sobre todas elas de propósito, para que um visitante nunca veja um erro:

• O site de leilões não tem nada aberto nem por vir. Cadastre um lote, ou confira se os lances estão mesmo abertos.
• O site de leilões está em modo privado, então nada nele é público. Um site privado não pode ser mostrado em lugar nenhum.
• O endereço está errado, ou o elemento que o criador de sites deu ao código é pequeno demais para desenhar nele. Confira a grafia de data-site e depois aumente o elemento.

Depois, espere dois minutos após um lance no site de leilões e confirme que o preço na sua página mudou. A partir daí, não há nada para manter: quando o leilão termina, o bloco se remove sozinho, e o próximo leilão aparece quando seus lotes forem cadastrados.

Perguntas