Como incorporar um contador regressivo no seu site
Se você usa software de gerenciamento de conteúdo ou blogs como Blogger, WordPress, Drupal ou similar, você deve garantir que está editando seu conteúdo no modo HTML quando colar o código de incorporação.
Incorporar uma contagem regressiva do CountingDownTo.com é muito semelhante a incorporar um vídeo de um site como YouTube.com.
- Abra a sua contagem regressiva. Para criar uma nova, clique em Contagens regressivas para sites no menu na parte superior da página. Para encontrar uma que você criou antes, clique no ícone da conta (o ícone de pessoa) no canto superior direito e depois em Minhas contagens regressivas.
- Clique em Incorporar abaixo da contagem regressiva.
- Copie o código que aparece abaixo do botão. Se houver um botão Copy ao lado do código, você pode clicar nele em vez disso.
- Cole o código no seu site ou blog onde você quer que a contagem regressiva apareça.
O Notion e o Google Sites precisam de um link em vez de código. O editor mostra esse link abaixo do código. O Canva precisa do link de compartilhamento da sua contagem regressiva: no editor original, clique em Compartilhar primeiro para obtê-lo. O novo editor mostra esse link abaixo do link para Notion e Google Sites.
Se você seguiu as instruções nesta página mas ainda não consegue incorporar sua contagem regressiva, por favor entre em contato conosco para obter assistência.
Quais plataformas podem incorporar uma contagem regressiva ao vivo?
A maioria dos sites que permitem colar HTML personalizado ou uma URL de iframe exibirá sua contagem regressiva ao vivo e em contagem. Alguns construtores de páginas e ferramentas de design bloqueiam iframes por completo. Eis o que verificamos nós mesmos. As linhas do Canvas e do Schoology se baseiam nos nossos registros, que mostram contagens regressivas carregando em muitos sites de cursos dessas plataformas, e no caso do Canvas no próprio guia dele:
| Plataforma | Contagem regressiva ao vivo? | Observações |
|---|---|---|
| WordPress (auto-hospedado) | Sim | Adicione um bloco HTML personalizado no editor de blocos e cole o código de incorporação. |
| WordPress.com | Depende do plano | Planos gratuitos removem iframes. Planos pagos precisam de "recursos de hospedagem" ativados antes que o HTML personalizado funcione. Mais informações. |
| Squarespace | Sim (plano Core ou superior) | Adicione um bloco Código e cole o código de incorporação. Requer um plano Core ou superior, ou um plano Business ou Commerce antigo. |
| Wix | Sim | Use Adicionar elementos → Embed Code → Popular Embeds → Embed HTML. Ajuste a largura e a altura do iframe ao tamanho da sua contagem regressiva para que ela não seja cortada nem mostre barras de rolagem. |
| Google Sites | Sim |
Use Inserir → Incorporar. Cole o código de incorporação na guia
Código de incorporação
ou cole o endereço dentro de src="..."
no seu código de incorporação na guia Por URL. Se o endereço terminar em .js, remova o .js.
|
| Shopify | Sim (com ressalva) | Use uma seção Custom Liquid do tema. O editor de descrição de produto não mantém o código de incorporação em todos os temas, então use uma seção Custom Liquid também nas páginas de produto. |
| Notion | Sim |
Digite /embed
e cole o endereço dentro de src="..."
no seu código de incorporação, não o link de compartilhamento. Se o endereço terminar em .js, remova o .js.
|
| Canva | Sim, quando visto online | Adicione o app Embed e cole o link de compartilhamento da sua contagem regressiva. Imagens, PDFs e vídeos baixados não podem mostrar uma contagem regressiva em andamento. |
| Canvas | Sim | No Rich Content Editor, escolha Insert → Embed, cole o código de incorporação, clique em Submit e depois salve a página. Esses passos vêm do guia do Canvas para professores. |
| Schoology | Sim (passos não testados) | As contagens regressivas aparecem em sites do Schoology, mas não testamos os passos nós mesmos. Cole o código de incorporação na visualização HTML do editor. |
| Blogger, Drupal, Weebly, Joomla! | Sim | Cole o código de incorporação como HTML personalizado/bruto — veja as instruções específicas da plataforma abaixo. |
| Facebook, WhatsApp, YouTube | Não | Essas plataformas não permitem incorporações de iframe de terceiros. Compartilhe um link para a página publicada da sua contagem regressiva. |
| Clientes de e-mail | Não (use GIF) | Clientes de e-mail bloqueiam iframes. Use nossa contagem regressiva GIF para e-mail em vez disso. |
Incorporar uma contagem regressiva no WordPress
WordPress auto-hospedado: No editor de blocos, adicione um bloco HTML personalizado (+ → pesquise "Custom HTML") e cole o código de incorporação que fornecemos. Se a contagem regressiva não aparecer na pré-visualização do bloco, confira a página publicada.
WordPress.com: Sites gratuitos do WordPress.com não suportam iframes (mais informações). Em planos pagos, você deve ativar os recursos de hospedagem antes que o bloco HTML personalizado renderize iframes.
Usuários do editor clássico: Se você ainda usa o antigo editor Visual/Texto, selecione Texto (não Visual) antes de colar.
Incorporar uma contagem regressiva no Squarespace
O Squarespace requer um plano Core ou superior, ou um plano Business ou Commerce antigo para incorporar código personalizado. Edite sua página, clique em + para adicionar um bloco, pesquise por Código e cole o código de incorporação no bloco Código. Salve e visualize. A contagem regressiva deve funcionar ao vivo na sua página publicada.
Incorporar uma contagem regressiva no Wix
No editor do Wix, clique em Adicionar elementos → Embed Code → Popular Embeds → Embed HTML. Clique em Enter Code, cole o código de incorporação e clique em Apply.
Importante — dimensionamento do iframe:
Se a contagem regressiva estiver cortada ou exibir barras de rolagem, abra as configurações do elemento de incorporação e defina a largura e a altura para corresponder às dimensões no seu código de incorporação (normalmente a mesma largura e altura da
tag <iframe>). O Wix nem sempre redimensiona automaticamente iframes incorporados.
Assista a um vídeo curto mostrando como adicionar uma contagem regressiva ao Wix.
Incorporar uma contagem regressiva no Google Sites
Ao editar seu site, clique em Inserir
→ Incorporar. Na guia Código de incorporação, cole o código de incorporação que fornecemos. Ou, na guia Por URL, cole o link de incorporação da sua contagem regressiva: o endereço dentro de
src="..."
no seu código de incorporação. Se o endereço terminar em .js, remova o .js.
Depois ajuste o tamanho da caixa de incorporação na página para que a contagem regressiva completa fique visível.
Incorporar uma contagem regressiva no Shopify
Adicione o código de incorporação a uma seção Custom Liquid do seu tema (Loja virtual → Temas → Personalizar → Adicionar seção). A contagem regressiva aparecerá ao vivo nas páginas onde você a colocar.
Descrições de produto: o editor de descrição de produto não mantém o código de incorporação em todos os temas. Em vez disso, adicione uma seção Custom Liquid ao modelo da página de produto.
Incorporar uma contagem regressiva no Notion
Em qualquer página do Notion, digite /embed
e pressione Enter. Cole o link de incorporação da sua contagem regressiva e confirme. O Notion mostra apenas a contagem regressiva, ao vivo.
Seu link de incorporação é o endereço dentro de src="..."
no seu código de incorporação, por exemplo
https://countingdownto.com/w4/abc123
ou https://w2.countingdownto.com/1234567. Se o seu código for uma tag script, remova o
.js
do final. Não cole o link de compartilhamento nem o código de incorporação inteiro. Arraste as bordas do bloco para redimensioná-lo.
Incorporar uma contagem regressiva no Canva
O Canva pode mostrar uma contagem regressiva ao vivo em designs e sites do Canva vistos online. No editor do Canva, abra Apps, escolha Embed e cole o link de compartilhamento da sua contagem regressiva.
Se o Canva mostrar uma imagem parada em vez de uma contagem regressiva feita com o novo editor, cole o link de incorporação dela: o endereço que está dentro de
src="..."
no seu código de incorporação. Para contagens regressivas feitas com o editor antigo, use o link de compartilhamento; os links de incorporação delas (w2.countingdownto.com) não funcionam no Canva. Uma imagem, PDF ou vídeo baixado não consegue mostrar uma contagem regressiva em andamento.
Incorporar uma contagem regressiva no Blogger
No editor de postagens, mude de Compose view para HTML view antes de colar o código de incorporação. A contagem regressiva não aparecerá enquanto você estiver editando sua postagem. Ela só aparecerá quando você publicar ou visualizar sua postagem.
Incorporar uma contagem regressiva no Drupal
Escolha Full HTML na lista Text format abaixo do campo do corpo e depois cole o código de incorporação. A contagem regressiva não aparecerá enquanto você estiver editando sua página. Ela só aparecerá quando você salvar ou visualizar sua página.
Incorporar uma contagem regressiva no Weebly
Arraste o elemento Embed Code para a sua página, clique nele e cole o código de incorporação. Publique o seu site para ver a contagem regressiva.
Incorporar uma contagem regressiva no Joomla!
Clique em Toggle Editor abaixo do editor de artigos para editar HTML simples, depois cole o código de incorporação e salve.
O editor TinyMCE padrão do Joomla pode remover tags iframe ao salvar. Se a contagem regressiva não aparecer, cole o código de incorporação em um módulo Custom com o editor desativado, ou peça ao administrador do seu site para permitir iframes nas configurações do plugin TinyMCE.
Plataformas que não suportam incorporações de iframe
As plataformas a seguir não podem exibir uma contagem regressiva de iframe ao vivo, independentemente do código de incorporação que você use:
- Facebook — compartilhe um link para a página publicada da sua contagem regressiva.
- WhatsApp — compartilhe um link; o WhatsApp não renderiza HTML incorporado.
- YouTube — páginas de canal e descrições de vídeo do YouTube não suportam iframes de terceiros.
- Clientes de e-mail: Gmail, Outlook, Mailchimp e outros aplicativos de e-mail bloqueiam iframes por segurança. Use nossa contagem regressiva para e-mail em vez disso. Ela cria uma imagem animada que a maioria dos apps de e-mail mostra.
Incorporando contagens regressivas em e-mail
Os aplicativos de e-mail bloqueiam iframes, por isso as contagens regressivas por e-mail são imagens GIF animadas. Crie uma na página de contagem regressiva por e-mail e clique em Adicionar ao meu e-mail para obter o código. Em ferramentas de e-mail marketing como Mailchimp, Constant Contact, AWeber e Kit (ConvertKit), cole o código em um bloco de HTML ou de código. Para enviar a contagem regressiva pelo Gmail ou por outra conta de e-mail pessoal, use Envie-me esta contagem regressiva por e-mail na mesma página e encaminhe o e-mail que você receber.
Usa o Kajabi? Siga o nosso guia de contagem regressiva para Kajabi.
A imagem mostra o tempo restante quando é carregada. Alguns apps de e-mail carregam as imagens antes, então ela pode mostrar um tempo anterior. Escreva também a data no texto do seu e-mail.