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

O que um bom bloco de leilão incorporado mostra

Quatro coisas, e mais nada:

• Os lotes que estão ativos agora, com fotografia, título, preço atual e número de licitações, e uma contagem decrescente até cada fecho que conta de facto. Um lote que ainda não abriu mostra, em vez disso, o seu preço inicial e uma contagem decrescente até à abertura.
• Um clique que abre o lote no site de leilões, num novo separador, para que o visitante possa licitar sem perder a sua página.
• Nada quando não há nada. O bloco deve desaparecer por si só quando nenhum lote está aberto nem para chegar. Um bloco que mostra a venda do mês passado, ou «sem leilões de momento», diz a todos os visitantes que não tem movimento.
• O seu aspeto. A sua cor de destaque e o seu estilo de cantos, para que pareça parte do seu site e não um anúncio publicitário.

O que evitar: um iframe com o site de leilões inteiro (duas barras de deslocamento, dois cabeçalhos, uma disposição estragada no telemóvel), uma captura de ecrã que fica desatualizada no próprio dia em que é tirada, e tudo o que peça aos visitantes para iniciarem sessão no seu site para verem preços.

As duas maneiras de o fazer

Um script. Uma linha <script> que desenha o bloco e o mantém atualizado. É a forma normal e funciona onde quer que o seu construtor de sites deixe acrescentar «código personalizado», «incorporar HTML» ou um «bloco de código». Não deve instalar cookies nem carregar tipos de letra ou rastreadores em nome dos seus visitantes; exija isso de qualquer widget que pondere, porque é a sua política de privacidade que tem de o cobrir.

Uma imagem em direto com uma ligação. Alguns lugares recusam scripts: assinaturas de e-mail, ferramentas de newsletter, os planos gratuitos de alguns construtores de sites, intranets. Aí, uma imagem redesenhada no servidor de poucos em poucos minutos, envolvida numa ligação para a venda, faz a maior parte do trabalho: mostra quantos lotes estão ativos e quando terminam as licitações, e mantém-se atualizada numa página ou num e-mail enviado há semanas.

A linha de código

Para um site de leilões criado no Auctify, o widget gratuito 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 da mesma forma. O configurador na página inicial deste site escreve a linha por si, já com a sua cor e o seu formato, e mostra o resultado antes de a copiar. Os atributos:

Atualiza-se de dois em dois minutos, não instala cookies nem guarda nada, não carrega tipos de letra nem rastreadores, desenha dentro da sua própria shadow root para que os seus estilos e os dele não se toquem, e não mostra absolutamente nada quando o site não tem nada aberto nem para chegar. As licitações acontecem no site de leilões, nunca dentro do widget.

Que formato, e onde na página

Comece com uma colocação, não três. A página inicial, por baixo do primeiro ecrã, é o lugar que a maioria dos visitantes vê; um widget flutuante em todas as páginas é o segundo. Acerte o número de lotes pelo que o espaço comporta: três lotes numa barra lateral estreita ficam melhor do que doze.

Onde a colar, construtor a construtor

Todos os construtores têm uma caixa para código de terceiros; os nomes é que variam. Os nomes de menu abaixo são os que os construtores usam à data em que escrevemos e mudam de sítio com cada redesenho, por isso, se algum tiver mudado, procure «incorporar código» ou «código personalizado» na ajuda do construtor. Onde uma funcionalidade depende do plano, dizemo-lo; verifique o seu próprio plano antes de partir do princípio.

1. WordPress

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

2. Wix

   No editor: Adicionar elementos → Incorporar código → Incorporar HTML, cole a linha no elemento e dimensione-o. O Wix executa o código incorporado dentro de uma moldura própria, por isso escolha um formato em linha (horizontal, vertical ou arranha-céus) e torne o elemento tão grande quanto o formato exige; um widget flutuante não consegue sair dessa moldura. O código para todo o site vai em Definições → Código personalizado, que o Wix disponibiliza nos planos pagos com um domínio ligado.

3. Squarespace

   Acrescente um bloco Código onde 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, Definições → Avançadas → Injeção de código → Rodapé, com o mesmo requisito de plano.

4. Jimdo

   Jimdo Creator: o elemento Widget / HTML, cole a linha. O editor mais recente 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. O código para todo o site vai em Site settings → Custom code → Footer code, o que exige um plano de site pago para publicar.

6. Shopify

   Loja online → Temas → Personalizar, acrescente um bloco Liquid personalizado (ou HTML personalizado, consoante o tema) à secção onde os lotes devem aparecer e cole a linha. O widget liga para o site de leilões; não acrescenta nada ao carrinho da loja.

7. Weebly e Google Sites

   Weebly: o elemento Embed Code. Google Sites: Inserir → Incorporar → Incorporar código. Ambos executam o código dentro de uma moldura própria, por isso use um formato em linha e dimensione o elemento à medida.

8. HTML puro, ou um programador

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

Onde os scripts não são permitidos

As assinaturas de e-mail, as ferramentas de newsletter, os planos gratuitos de alguns construtores e a maioria das intranets retiram os scripts. Use aí a imagem em direto: um banner desenhado no servidor de poucos em poucos minutos que mostra quantos lotes estão ativos e quando terminam as licitações, envolvido numa ligação para a venda. Em HTML é um <a> à volta de um <img>; numa ferramenta de newsletter é «adicionar imagem, definir ligação». Como a imagem é redesenhada, um e-mail enviado há duas semanas continua a mostrar a contagem atual, e assim que a venda termina passa a ser um simples convite para visitar o site de leilões, em vez de uma afirmação desatualizada.

O que uma imagem em direto não consegue fazer: mostrar lotes individuais com preços, nem fazer contagem decrescente. É a solução de recurso, não a primeira escolha, e o seu lugar é muito mais num e-mail do que numa página web que podia executar o script.

Verificar que funciona

Abra a página numa janela de navegação privada, num telemóvel e num computador. Deve ver os lotes ao fim de um ou dois segundos. Se não vir absolutamente nada, é uma de três coisas, e o widget cala-se 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 para chegar. Publique um lote, ou confirme que as licitações estão mesmo abertas.
• O site de leilões está em modo privado, por isso nada nele é público. Um site privado não pode ser mostrado em lado nenhum.
• O endereço está errado, ou o elemento que o construtor deu ao código é pequeno de mais para desenhar lá dentro. Verifique a grafia de data-site e depois aumente o elemento.

Depois espere dois minutos após uma licitação no site de leilões e confirme que o preço na sua página mudou. A partir daí não há nada a manter: quando a venda termina o bloco remove-se a si próprio, e a venda seguinte aparece quando os seus lotes forem publicados.

Perguntas