> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 📢 Tipos de Barra de Anúncio Explicados > ℹ️ **Note:** Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte. O Hoppy Announcement Bar oferece quatro formas distintas de apresentar mensagens na sua loja online. Cada tipo comporta-se de forma diferente, suporta configurações de conteúdo diferentes e foi concebido para casos de uso específicos. Escolher o tipo certo no início da configuração ajuda-o a evitar retrabalho e garante que o anúncio funcione exatamente como esperado na loja publicada. --- # **⚠️ Antes de Começar** O tipo de anúncio é selecionado no separador **Content** (Conteúdo) ao criar ou editar um anúncio. Pode mudar de tipo a qualquer momento, mas tenha em conta: * Alguns campos aparecem ou desaparecem consoante o tipo selecionado * Os itens de conteúdo podem ser cortados ou expandidos ao mudar entre determinados tipos * As definições de design e posicionamento são partilhadas entre todos os tipos ℹ️ O tipo de anúncio **não** é o mesmo que o posicionamento. O posicionamento controla *onde* a barra aparece. O tipo controla *como* a barra se comporta. --- # **📋 Os Quatro Tipos de Anúncio** --- ## **1️⃣ Simple Announcement** O tipo Simple apresenta uma única mensagem estática. É o formato mais utilizado porque é direto e funciona para quase todos os casos de uso. ### **O que faz** * Mostra um anúncio com um título, subtítulo e apelo à ação opcional * Mantém-se estático na página até o cliente sair ou fechá-lo * Suporta todos os tipos de CTA: botão, clique em toda a barra, cupão, evento de acionamento ou sem CTA ### **Campos de conteúdo disponíveis** * **Title** (Título) — A mensagem principal. Suporta formatação de texto rico. * **Subheading** (Subtítulo) — Uma linha secundária abaixo do título. * **Call to action type** (Tipo de apelo à ação) — Escolha como os clientes interagem com a barra. ### **Comportamento do CTA** | Tipo de CTA | Comportamento | | ----- | ----- | | **No call to action** | Apenas a mensagem, sem elementos clicáveis. | | **Button** | Um botão independente que liga para qualquer URL. | | **Make entire bar clickable** | Toda a barra torna-se um link. Clicar em qualquer lado navega para o URL configurado. | | **Coupon** | Apresenta um código de cupão com botão opcional de copiar para a área de transferência. | | **Trigger App Event** | Dispara um evento personalizado que outras apps podem escutar. Útil para abrir modais ou acionar fluxos de trabalho. | ℹ️ Quando **Trigger App Event** é selecionado, aparece um campo adicional **Trigger ID** (ID de acionador). Este ID deve corresponder ao nome do evento configurado na app receptora. ### **Melhor utilizado para** * Anúncios de promoções em toda a loja * Atualizações da política de envio * Ofertas por tempo limitado * Promoções gerais --- ## **2️⃣ Running Line Announcement** O tipo Running cria um ticker horizontal contínuo em scroll — semelhante a uma faixa de notícias. O texto do título anima-se através da barra em loop. ### **O que faz** * Apresenta uma mensagem de título num scroll suave e contínuo * A direção e a velocidade são totalmente configuráveis * O campo Subheading fica oculto porque o formato depende de uma única linha em movimento ### **Campos de conteúdo disponíveis** * **Title** (Título) — A mensagem que corre pela barra. Suporta texto rico. * **Animation speed** (Velocidade da animação) — Um cursor de **1 a 80** que controla a velocidade do movimento do texto. * **Run left to right** (Correr da esquerda para a direita) — Uma caixa de verificação que inverte a direção de scroll predefinida. ### **Como funciona a velocidade de animação** * Valores mais baixos \= scroll mais lento e legível * Valores mais altos \= movimento do ticker mais rápido * A velocidade é calculada dinamicamente com base no comprimento do texto do título ### **Comportamento do CTA** Os anúncios Running suportam CTA de botão, cupão, acionamento e sem CTA. A opção **Make entire bar clickable** envolve a área de scroll num link. Se for usado um botão ou cupão, estes aparecem estaticamente ao lado do texto em movimento. ### **Melhor utilizado para** * Alertas de vendas-relâmpago * Prazos urgentes de envio * Slogans de marca repetitivos * Lembretes sensíveis ao tempo ⚠️ **Importante:** As barras em linha corrida funcionam melhor com títulos mais curtos. Mensagens muito longas podem criar ritmos de scroll desiguais em ecrãs mais pequenos. --- ## **3️⃣ Multiple Rotating Announcements** O tipo Multiple permite agrupar vários anúncios numa única barra que os percorre automaticamente. Os clientes veem uma mensagem de cada vez, com setas de navegação para consultar manualmente. ### **O que faz** * Percorre vários slides de anúncios * Cada slide tem o seu próprio título, subtítulo e CTA * Avança automaticamente com base numa duração de exibição configurável * Inclui navegação por setas para a esquerda/direita ### **Campos de conteúdo disponíveis** * **Announcement display duration** (Duração de exibição do anúncio) — Um cursor de **1 a 10 segundos** que controla quanto tempo cada slide fica visível antes de rodar automaticamente. * **Announcement \#1, \#2, \#3...** (Anúncio n.º 1, 2, 3...) — Cada slide é um bloco de conteúdo independente com o seu título, subtítulo e CTA. * **Add new announcement** (Adicionar novo anúncio) — Adiciona slides adicionais. ### **Limites de slides** * Mínimo: **2 slides** * Máximo: **20 slides** Pode reordenar os slides usando as setas para cima/baixo e remover slides se tiver mais de 2\. ### **Comportamento do CTA** Cada slide pode ter o seu próprio CTA independente. Um slide pode ter um botão, outro pode mostrar um cupão e um terceiro pode não ter CTA. Tipos de CTA suportados por slide: botão, clique em toda a barra, cupão, acionamento ou nenhum. ### **Efeitos de animação** A transição entre slides é controlada pela definição **Animation** (Animação) no separador **Design** (Design): * **Slide** — Transição horizontal padrão * **Fade** — Transição suave de dissolução * **Cube** — Efeito de rotação 3D em cubo * **Flip** — Transição em estilo de virar carta ### **Melhor utilizado para** * Mostrar várias promoções ao mesmo tempo * Anunciar diferentes categorias de produtos * Rodar mensagens de envio, devoluções e confiança * Destacar vários cupões sem sobrecarregar a página --- ## **4️⃣ Email Collection Banner** O tipo Email transforma a barra de anúncio num formulário de captura de leads. Apresenta um campo de entrada de email e um botão de submissão e, depois, mostra um estado de sucesso. ### **O que faz** * Apresenta um título, subtítulo e um campo de entrada de email * Mostra uma **Success Message** (Mensagem de sucesso) depois de o cliente submeter o email * Pode incluir um código de cupão como recompensa pela subscrição ### **Campos de conteúdo disponíveis** * **Title** (Título) — A mensagem principal a convidar os clientes a subscreverem. * **Subheading** (Subtítulo) — Texto de apoio abaixo do título. * **Button text** (Texto do botão) — O rótulo do botão de submissão. Predefinido como *Subscribe* (Subscrever) se deixado em branco. * **Success Message** (Mensagem de sucesso) — O texto de confirmação mostrado após uma submissão de email bem-sucedida. * **Email Placeholder** (Placeholder de email) — O texto de sugestão dentro do campo de email vazio. ### **Comportamento do CTA** As barras de recolha de email suportam dois modos de CTA: * **Button** — Um botão de submissão padrão. A barra recolhe o email e mostra o estado de sucesso. * **Coupon** — Apresenta um código de cupão junto ou em vez do campo, com um botão de cópia opcional. As opções **Make entire bar clickable** e **Trigger App Event** não estão disponíveis para este tipo porque a barra está construída à volta da submissão do formulário. ### **Pré-visualização do estado de sucesso** Na pré-visualização da app, verá duas barras empilhadas: 1. O formulário ativo de recolha de email 2. A barra da mensagem de sucesso Na loja online publicada, os clientes só veem o estado de sucesso *depois* de submeterem o email. ### **Melhor utilizado para** * Construir listas de newsletters * Oferecer códigos de desconto em troca de emails * Inscrições em listas de espera antes do lançamento * Promover programas VIP ou de fidelização --- # **🔀 Como a Seleção do Tipo Afeta as Definições Visíveis** Escolher um tipo de anúncio altera dinamicamente os campos que aparecem no separador **Content** (Conteúdo). Aqui fica uma referência rápida: ### **Campos que aparecem por tipo** | Campo | Simple | Running | Multiple | Email | | ----- | ----- | ----- | ----- | ----- | | Title | ✅ | ✅ | ✅ | ✅ | | Subheading | ✅ | ❌ | ✅ | ✅ | | Animation speed slider | ❌ | ✅ | ❌ | ❌ | | Display duration slider | ❌ | ❌ | ✅ | ❌ | | Run left to right | ❌ | ✅ | ❌ | ❌ | | Add/remove slides | ❌ | ❌ | ✅ | ❌ | | Button text | ✅ | ✅ | ✅ | ✅ | | Success Message | ❌ | ❌ | ❌ | ✅ | | Email Placeholder | ❌ | ❌ | ❌ | ✅ | | Trigger ID | ✅ | ✅ | ✅ | ❌ | | Coupon code | ✅ | ✅ | ✅ | ✅ | | Copy button toggle | ✅ | ✅ | ✅ | ✅ | ### **Limites dos itens de conteúdo** * **Simple, Running, Email** — Apenas é utilizado o **primeiro** item de conteúdo. Mesmo que existam vários itens no modelo de dados, apenas o primeiro é apresentado. * **Multiple** — **Todos** os itens de conteúdo são utilizados como slides individuais. ⚠️ Se mudar de Multiple para Simple, os slides extra são preservados em segundo plano, mas não são exibidos. Voltarão a aparecer se mudar de volta para Multiple. --- # **🎯 Explicação dos Tipos de Apelo à Ação** O comportamento do CTA é maioritariamente consistente entre os tipos de anúncio, com algumas exceções específicas de cada tipo. ### **No call to action** A barra é puramente informativa. Não são apresentados botões, links nem áreas clicáveis. ### **Button** Aparece um botão clicável. Configura: * **Button text** (Texto do botão) — O que o botão diz * **Link** (Ligação) — Para onde o botão navega ### **Make entire bar clickable** Toda a área do anúncio torna-se um link. Clicar em qualquer lugar da barra navega para o URL configurado. ℹ️ Se a barra contiver elementos clicáveis aninhados, como ícones sociais, estes continuam a funcionar independentemente. O clique em toda a barra não os substitui. ### **Coupon** Apresenta uma caixa de cupão estilizada. Configura: * **Coupon Code** (Código do cupão) — O código de desconto real * **Show copy button** (Mostrar botão de cópia) — Adiciona um ícone de cópia com um clique ao lado do código ### **Trigger App Event** Em vez de navegar para um URL, o botão dispara um CustomEvent no navegador. Configura: * **Trigger ID** (ID de acionador) — A string do nome do evento (por exemplo, `my-app:open-modal`) Outras apps ou scripts personalizados do tema que escutem este nome de evento podem responder. ⚠️ Os CTAs de acionamento não estão disponíveis nas barras de recolha de Email porque a ação principal da barra é a submissão do formulário. --- # **🎨 Comportamento do Design por Tipo** A maioria das definições de design aplica-se universalmente, mas algumas comportam-se de forma diferente consoante o tipo. ### **Definição Animation (separador Design)** * **Simple & Email** — A animação controla o efeito de entrada quando a barra carrega pela primeira vez. * **Running** — A velocidade da animação é controlada no separador **Content** (Conteúdo), não no separador **Design** (Design). * **Multiple** — A animação controla o efeito de transição entre slides (slide, fade, cube, flip). ### **Ícones sociais** Podem ser adicionados ícones de banner a todos os tipos. Controla a visibilidade separadamente para desktop e mobile. * Os ícones aparecem estaticamente ao lado do conteúdo * Cada ícone pode ligar para um URL ou permanecer não clicável ### **Ícone de fecho** Todos os tipos suportam o ícone de fecho. Quando ativado, pode configurar: * **Appear again after** (Voltar a aparecer após) — Quantas horas ou dias até a barra voltar a aparecer para um visitante recorrente Se não for definido um tempo de reaparecimento, a barra permanece oculta permanentemente depois de fechada. --- # **📱 Comportamento em Mobile** Os quatro tipos de anúncio são totalmente responsivos. No entanto, os ajustes de layout acontecem automaticamente: * **As barras de recolha de email** empilham-se verticalmente em mobile — o campo de entrada e o botão aparecem em linhas separadas * **As barras rotativas Multiple** reduzem o espaçamento das setas e diminuem ligeiramente os tamanhos de fonte * **As barras em linha corrida** mantêm a velocidade de scroll, mas comprimem os tamanhos dos ícones se os ícones sociais estiverem ativados * **As barras Simples** com botões podem alinhar o texto ao centro em ecrãs mais pequenos, consoante o tipo de CTA Pode substituir a aparência em mobile usando o painel **Custom CSS** (CSS personalizado) no separador **Design** (Design), se necessário. --- # **💡 Exemplos de Casos de Uso** ### **Exemplo 1 — Barra simples com cupão** * **Type:** Simple * **Title:** \"Summer Sale is Live ☀️\" * **Subheading:** \"Use code SUNNY for 20% off\" * **CTA:** Coupon * **Coupon code:** SUNNY * **Resultado:** Uma barra limpa e estática com um código de desconto copiável. ### **Exemplo 2 — Ticker corrido para urgência** * **Type:** Running * **Title:** \"Free shipping ends tonight at midnight ⏰\" * **Animation speed:** 25 * **CTA:** None * **Resultado:** Uma mensagem de urgência em scroll contínuo no topo da loja. ### **Exemplo 3 — Vários slides para coleções diferentes** * **Type:** Multiple * **Slide 1:** \"Up to 50% off Shoes →\" com botão a apontar para /collections/shoes * **Slide 2:** \"New Arrivals in Accessories →\" com botão a apontar para /collections/accessories * **Slide 3:** \"Free returns on all orders\" sem CTA * **Display duration:** 4 seconds * **Resultado:** Uma barra que percorre automaticamente três promoções distintas. ### **Exemplo 4 — Recolha de email com recompensa de cupão** * **Type:** Email * **Title:** \"Join the VIP list\" * **Subheading:** \"Get 15% off your first order\" * **Button text:** \"Get My Code\" * **Success Message:** \"Welcome\! Your code WELCOME15 is ready.\" * **Email Placeholder:** \"Enter your email\" * **Resultado:** Uma barra de captura de leads que recompensa os subscritores com um cupão instantâneo. --- # **⚠️ Notas Importantes e Limitações** ### **Mudança de tipo** Mudar entre tipos não elimina o seu conteúdo. No entanto: * Mudar de Multiple para Simple oculta os slides extra * Mudar de Running para Simple revela novamente o campo Subheading * Mudar para Email oculta os campos Trigger ID se estiverem previamente definidos Reveja sempre o conteúdo depois de alterar tipos. ### **Comprimento da linha corrida** Títulos muito longos em barras corrida podem causar ritmos de scroll desiguais, especialmente em mobile. Teste com o comprimento real da mensagem antes de publicar. ### **Mínimo de slides no Multiple** Não pode publicar um anúncio Multiple com menos de 2 slides. Se precisar de apenas uma mensagem, utilize o tipo Simple. ### **Estado de sucesso da barra de email** O estado de sucesso só aparece depois de o cliente submeter um email. A pré-visualização dentro da app mostra ambos os estados empilhados para referência, mas os clientes na loja publicada veem primeiro o formulário. ### **Clique em toda a barra e elementos aninhados** Quando **Make entire bar clickable** está ativado, clicar nos ícones sociais ou no botão de cópia continua a funcionar como esperado. O clique em toda a barra ignora esses elementos interativos aninhados. --- # **🎉 Resultado Final** Compreender os quatro tipos de barra de anúncio ajuda-o a escolher o formato certo para o seu objetivo: ✅ **Simple** — Ideal para promoções únicas e estáticas ✅ **Running** — Ideal para urgência e mensagens em estilo ticker repetitivo ✅ **Multiple** — Ideal para rodar várias ofertas num único posicionamento ✅ **Email** — Ideal para recolher leads e aumentar as listas de subscritores Cada tipo suporta o mesmo sistema de design, regras de posicionamento, agendamento e lógica de segmentação. A diferença está apenas na forma como o conteúdo é apresentado e com o que interage. Escolher o tipo correto desde o início garante que o anúncio pareça nativo da sua loja online e transmita a mensagem certa no formato certo 🚀