Criar calls to action (CTAs)

Use a ferramenta de call to action (CTA) para criar CTAs de botão, banners ou pop-ups para adicionar às suas páginas do HubSpot e atrair novos visitantes. Você também pode adicionar CTAs a páginas externas.

Antes de adicionar um CTA a uma página externa, você deve instalar o código de acompanhamento HubSpot ou instalar o plugin HubSpot WordPress em seu site WordPress. Depois de adicionar uma CTA, direcione o tráfego para páginas específicas, links de reuniões ou URLs externos. 

Em dispositivos móveis, você pode optar por ativar um layout responsivo ou ocultar o CTA em telas pequenas nas opções de CTA. Depois de publicar o seu 

Criar uma CTA

No editor de CTA, personalize o design da sua CTA para atrair visitantes. Ao criar CTAs, você também pode usar o conteúdo inteligente para exibir versões diferentes da CTA com base na categoria do visualizador. Saiba mais sobre como usar conteúdo inteligente em CTAs. 

1. Na sua conta HubSpot, acesse Marketing > CTAs.
2. No canto superior direito, clique em Criar.
3. Na parte superior, selecione a guia Pop-ups ou Incorporações e botões. 
   • Os CTAs pop-up incluirão os seguintes tipos: 
     
     • Banner: um banner permanente fixado na parte superior ou inferior da sua página. O banner permanecerá enquanto os visitantes navegam pela página. 
     • Caixa pop-up: uma caixa pop-up que aparece com uma determinada frequência. 
     • Deslizante: um banner que desliza de um canto do seu site. O banner permanecerá enquanto os visitantes navegam pela página. 
   • As CTAs de incorporação e botão incluirão os seguintes tipos: 
     • Incorporado: um banner, call to action ou botão que você pode usar no seu site ou e-mails do HubSpot para direcionar os prospects para páginas específicas.
     • Imagem incorporada: uma imagem que você pode usar nas suas páginas ou e-mail da HubSpot.
4. Selecione um modelo com base no tipo de CTA que você deseja criar.
   • CTA Cada modelo terá módulos personalizáveis, como imagens e campos de texto.
   • Por exemplo, você pode selecionar um modelo de Clique para bater papo para iniciar um link do WhatsApp, um modelo de Pop-up de Reunião para exibir uma página de reserva de reunião ou um modelo de evento de evento para que os visitantes se registrem em sua conferência ou workshop,
5. CTA No painel esquerdo, na guia Adicionar, adicione módulos e edite o layout para 

• • CTA Para adicionar mais conteúdo ao seu
    • CTA Você só pode adicionar um Formulário (Novo Editor) ou módulo de Reunião a um CTA Um único 
    • Determinados módulos podem ser adicionados apenas uma vez, como o temporizador de contagem regressiva ou módulos de vídeo.
    • CTA Você também pode adicionar vídeos aos seus 
  • Para modificar o layout do CTA, passe o mouse sobre um módulo e clique nele e arraste-o para uma nova posição.
  • Para duplicar o módulo, passe o mouse sobre ele e clique no botão duplicateícone de clone.
  • Para excluir o módulo, passe o mouse sobre ele e clique no botão deleteícone excluir. 
     

. 

• • Para editar um módulo, clique no módulo.
    • No painel esquerdo, você pode editar o conteúdo e o design do módulo.
    • Para fechar uma CTA pop-up após o visitante enviar o formulário, você pode ativar a opção Fechar após o envio ao personalizar o módulo de formulário.
       

7. No painel esquerdo, clique na guia Conteúdo para gerenciar seus módulos. 
   • Para editar um módulo, clique no nome do módulo. No painel esquerdo, você pode editar o conteúdo e o design do módulo. Em módulos rich text, você pode usar Assistentes de ia CTA para criar ou refinar seu 
   • Para excluir um módulo, passe o mouse sobre ele e clique no botão delete ícone excluir. 
8. No painel esquerdo, clique na guia Design para personalizar e visualizar sua CTA.
   • Para visualizar sua CTA em páginas específicas, no canto superior direito, clique em Visualizar. Em seguida, clique no menu suspenso Visualizar em página específica e selecione a página HubSpot para visualizar a CTA. 

• • Para personalizar a aparência da sua CTA, selecione uma das opções a seguir. Em seguida, configure as alterações no painel esquerdo. 
    • Posição: para CTAs de banner adesivo, você pode selecionar uma posição superior ou inferior. Para CTAs deslizantes, você pode posicionar a CTA no canto superior esquerdo, no canto inferior esquerdo, no canto superior direito ou no canto inferior direito da página. 
    • Dimensionamento: configure a altura da sua CTA, você pode alternar a opção para definir a altura automaticamente com base no conteúdo da CTA.
    • Layout: configure o layout da sua CTA. Você pode adicionar espaçamento ao seu conteúdo de CTA. Você também pode ativar a opção para ativar um layout responsivo. Com um layout responsivo, as colunas da sua CTA serão empilhadas verticalmente em telas pequenas.
    • Estilos: defina estilos para sua CTA, como a fonte principal, a borda e o sombreamento da CTA. CTA Você pode usar fontes personalizadas com o seu 
    • Fundo: defina um fundo para a CTA; você pode optar por definir uma cor ou carregar uma imagem de fundo.
    • Opção Fechar: para CTAs de caixa pop-up, você pode ativar a opção para permitir que os visitantes fechem a CTA quando clicarem em qualquer lugar fora da caixa pop-up. Quando esta opção está desativada, os visitantes só podem fechar a CTA usando o ícone Fechar. 

Criar uma CTA em HTML

Para criar uma CTA incorporada com HTML personalizado e aplicar seus temas personalizados ou CSS:

1. Na sua conta HubSpot, acesse Marketing > CTAs.
2. No canto superior direito, clique em Criar.
3. Na parte superior, clique na guia Incorporações e botões .
4. No menu da barra lateral esquerda, navegue até Avançado. Em seguida, selecione HTML incorporado.
5. No painel esquerdo, clique no menu suspenso Link to e selecione uma opção para o
   • Endereço de e-mail:crie um link de e-mail. Para abrir este link em uma nova página, marque a caixa de seleçãoAbrir link em uma nova guia. 
   • Download de arquivo: vincule sua CTA a um arquivo no gerenciador de arquivos. Selecione um arquivo existente ou carregue um novo arquivo e marque a caixa de seleção Abrir link em uma nova guia se você quiser que os visitantes que clicarem na CTA visualizem a imagem em uma nova janela do navegador. 
   • Link de reunião: vincule sua CTA a um link de reunião da HubSpot. Clique no menu suspenso Escolher um link de reunião e, em seguida, selecione um link de reunião. Para abrir este link em uma nova página, marque a caixa de seleçãoAbrir link em uma nova guia. 
   • Uma das suas páginas: vincule sua CTA a uma de suas páginas do HubSpot ou posts de blog. Clique no menu suspenso Página e, em seguida, selecione uma página ou post. O link da CTA de botão será vinculado ao ID da página e qualquer alteração na URL da página irá atualizar automaticamente o link da CTA de botão. Para abrir este link em uma nova página, marque a caixa de seleçãoAbrir link em uma nova guia. 
   • URL: vincule sua CTA a uma página externa. No campo URL do link, insira o URL do site para o qual deseja direcionar os visitantes. Para abrir este link em uma nova página, marque a caixa de seleçãoAbrir link em uma nova guia. 
   • CTA: use a CTA personalizada para acionar um banner fixo, uma caixa pop-up ou uma CTA deslizante.
6. No campo Conteúdo do botão , insira o campo 
   

7. Para personalizar ainda mais o design do CTA, clique em Avançado
8. Na página Avançado, você pode adicionar classes ou regras CSS personalizadas:
   • Classes de CSS personalizadas: insira uma classe personalizada para sua CTA. Use classes personalizadas para aplicar estilos de design, como famílias de fontes em várias CTAs do seu site. As classes CSS personalizadas devem ser incluídas na folha de estilo CSS usada em suas páginas do HubSpot.
   • Regras de CSS personalizadas: adicione regras personalizadas para aplicar um estilo integrado específico à sua CTA.
     • Para adicionar uma nova regra CSS, clique em Adicionar um ou + Adicionar e configure o seletor e o estilo. 
       • Seletor: insira um seletor CSS. Esse valor é opcional e será combinado com o seletor da CTA. Por exemplo, se o seletor inserido for:hover, o seletor combinado será ${ctaSelector}:hover
       • Estilo: insira uma regra de estilo CSS personalizada para aplicar ao seletor configurado. Você pode inserir um estilo sem inserir um seletor. Por exemplo, color: yellow;.
         
         

9. Para editar uma regra CSS existente, passe o cursor sobre a regra e clique no ícone edit editar. 
10. Para clonar uma regra CSS, passe o mouse sobre a regra e clique no ícone duplicate clonar. 
11. Para gerenciar a prioridade das suas regras CSS, clique e arraste cada regra para organizá-las por ordem de prioridade.
12. Para remover uma regra CSS, passe o cursor sobre a regra e clique no ícone delete excluir. 
13. Para aplicar à CTA o mesmo HTML e classes que as CTAs antigas, marque a caixa de seleção Usar marcação antiga. Se você tiver folhas de estilo CSS em páginas que estilizam CTAs antigas, marcar esta caixa de seleção permitirá que a CTA HTML adote os mesmos estilos. 
14. Para concluir a configuração do design da CTA, clique em Salvar e aplicar.
     

Personalizar onde e quando seu banner fixo, caixa pop-up ou CTA deslizante é exibida

1. Para mostrar o
   • Clique no primeiro menu suspenso e selecione o URL do site.
   • Clique no segundo menu suspenso e selecione uma regra de direcionamento.
   • Insira os critérios de regra no campo de texto.
2. Para mostrar a CTA quando um visitante acessar uma página do site cujo URL inclui parâmetros de consulta específicos:
   • Clique no primeiro menu suspenso e selecione Parâmetro de consulta. 
   • No primeiro campo de texto, insira o nome do parâmetro de consulta.
   • Clique no segundo menu suspenso e selecione uma regra de direcionamento.
   • No segundo campo de texto, insira o valor do parâmetro de consulta.
3. Para adicionar outra regra, clique em Adicionar regra.
4. Para excluir as calls to action de determinadas páginas, clique em Adicionar regra de exclusão. Por exemplo, você pode querer adicionar uma exclusão para uma página de política de privacidade.

1. Na seção Quem será mostrado, defina o público-alvo para o seu Você pode selecionar entre os seguintes:
   • Todos os visitantes: a 
   • Visitantes filtrados: a
2. Na seção Com que frequência será exibida, defina a frequência para o Clique no menu suspenso Mostrar novamente e selecione uma das seguintes opções:
   • Após um período de tempo definido: o 
   • Repetir: o será exibido sempre que o visitante navegar para as páginas da Web selecionadas e executar a ação de gatilho, mesmo se já tiver interagido com ele.
   • Não mostrar novamente: nunca exibir o 
     
     

Personalizar suas opções de CTA

Nas guias Opções, personalize diferentes opções de CTA, como exibir a CTA em tamanhos pequenos, quaisquer campanhas associadas e a programação da CTA. 

1. No canto superior, clique na guia Opções.
2. Para banner fixo, caixa pop-up ou CTA deslizante, você pode ocultar a CTA em tamanhos de tela pequenos. Na seção Tamanhos de tela pequenos, marque a caixa de seleção Desativar em telas pequenas.
3. Se você tiver uma assinatura do Marketing Hub Professional ou Enterprise, poderá associar a CTA à campanha:
   • Para associar a CTA a uma campanha existente, clique no menu suspenso Campanha e selecione uma campanha.
   • Para associar a CTA a uma nova campanha, clique no menu suspenso Campanha e em Criar campanha. Em seguida, continue a configurar sua campanha. 
   • Se você nunca criou uma campanha antes, clique em Criar uma campanha. Em seguida, continue a configurar sua campanha. 
4. Configure como gostaria de acompanhar os cliques na sua CTA. Selecione uma das seguintes opções: 
   • Rastreie cliques através do redirecionamento: rastreia os cliques à sua CTA, direcionando os visitantes a um URL inicial que associa o clique à CTA, antes de redirecioná-los para a página final. Essa opção está selecionada por padrão.
   • Rastreie cliques através do navegador: rastreia os cliques de forma assíncrona através do navegador do visitante. Esta opção permite que você use tags âncora, pois não há redirecionamentos; a CTA direcionará os visitantes para o URL definido. 
5. Para banner fixo, caixa pop-up ou CTA deslizante, você pode programar quando uma CTA é exibida:
   
   • Para programar quando a CTA deve começar a ser exibida, ative a opção Programar para mais tarde. Selecione uma data e hora de início. 
   • Para programar quando a CTA deve parar de ser exibida, ative a opção Definir data e hora de despublicação. Em seguida, selecione uma Data de término e Hora. 
     
     

Publicar sua CTA 

Quando terminar de configurar a CTA, publique-a para ativá-la. 

1. No canto superior direito, clique em Revisar e publicar.
2. No painel direito, analise sua CTA e clique em Publicar agora. A CTA será publicada automaticamente nas páginas de destino.