O AI Growth Widget permite interagir instantaneamente com visitantes do site, capturar leads e oferecer suporte em tempo real. Este guia mostra como instalar o widget no seu site, configurar sua aparência e comportamento e gerenciar as configurações principais.

Principais problemas resolvidos

• Processo de instalação difícil: o AI Growth Widget pode ser adicionado a qualquer site com um único código de incorporação (embed).
• Experiência de chat sem marca ou inconsistente: personalize logo, cores e nomes para combinar com a sua marca.
• Visitantes perdem mensagens importantes: pop-ups permitem chamar a atenção dos visitantes em páginas-chave ou após um tempo de navegação.
• Idioma não compatível: detecção automática do idioma do navegador reduz fricção para visitantes internacionais.
• Testes pouco claros: opções de pré-visualização mostram como o widget ficará antes de publicar as alterações.

Casos de uso comuns

• Incorporar o widget globalmente: adicione o script ao cabeçalho ou rodapé do site para que ele apareça em todas as páginas.
• Personalizar a marca: envie um logo e defina as cores da marca para manter uma aparência consistente.
• Coletar leads: exija que visitantes informem e-mail ou telefone antes de iniciar o chat.
• Acionar pop-ups contextuais: exiba mensagens segmentadas em páginas de preços ou após um tempo definido em páginas de produto.
• Localizar a experiência: detecte automaticamente o idioma do navegador ou defina idiomas manualmente para diferentes regiões.

Ativando o AI Growth Widget

Siga os passos abaixo para ativar o AI Growth Widget:

1. Clique no ícone para ir até a página “Channels”.
2. No painel à esquerda, clique em “AI Growth Widget” para abrir a página de configurações do canal AI Growth Widget.
   
3. Na página de configurações do canal AI Growth Widget, localize o card “Live Chat” e ative o toggle.
   
4. Quando você ativar o toggle, uma barra de salvamento aparecerá na parte inferior da página pedindo para salvar ou cancelar as alterações.
   
5. Clique em “Save” e o seu AI Growth Widget estará pronto para ser configurado.

Configurar canais disponíveis no seu AI Growth Widget

Além do Live Chat, você pode disponibilizar outros canais de mensagem diretamente no widget. Isso permite que os visitantes escolham a plataforma preferida para iniciar uma conversa com sua equipe.

Siga os passos abaixo para configurar outros canais no seu AI Growth Widget:

1. Clique no ícone para ir até a página “Channels”.
2. No painel à esquerda, clique em “AI Growth Widget” para abrir a página de configurações do canal.
   
    
3. Na página de configurações do canal AI Growth Widget, você verá todos os canais conectados.
   
4. Ative o toggle dos canais que deseja exibir no widget.
5. Use o painel de pré-visualização à direita para ver como o widget ficará com os canais selecionados.
   
6. Quando você ativar ou desativar um canal, uma barra de salvamento aparecerá na parte inferior da página, pedindo para salvar ou cancelar as alterações.
   
7. Clique em “Save” para aplicar as mudanças.

Configurando as configurações gerais do seu AI Growth Widget

A aba “General” permite ajustar como o widget aparece e quais informações ele coleta dos visitantes.

Acessando a aba “General”

Siga os passos abaixo para acessar a aba “General”:

1. Clique no ícone para ir até a página “Channels”.
2. No painel à esquerda, clique em “AI Growth Widget” para abrir a página de configurações do canal.
   
3. No topo da página, clique na aba “General”.
   

Na aba “General settings”, você poderá configurar:

1. Company logo
2. Colors
3. Display name
4. Welcome message
5. Additional settings: Contact form

Logo da empresa

Você pode enviar o logo da sua empresa para que o AI Growth Widget fique alinhado com a identidade da marca. O logo aparece na tela de boas-vindas do widget e como avatar do respondente na janela de chat.

Como enviar ou remover o logo da empresa

1. Na aba “General”, localize a seção “Company logo”.
   
2. Para enviar um logo:
   1. Clique em “Upload logo”.
   2. Uma janela do sistema será exibida para você escolher um arquivo do seu dispositivo.
   3. Selecione o arquivo do logo (.JPG, .JPEG ou .PNG, até 1 MB).
   4. O logo enviado aparecerá imediatamente na pré-visualização do widget à direita.
      
       
   5. Clique em “Save” no final da página para salvar as alterações.
      
3. Para remover o logo:
   1. Clique em “Remove logo”.
   2. Clique em “Save” no final da página para salvar as alterações.
      
   3. O widget deixará de exibir um logo no cabeçalho do chat e no avatar do agente.
      

Cores

Você pode personalizar as cores do botão e das bolhas de mensagem do widget para combinar com a identidade visual da sua marca. As cores definidas aqui serão refletidas na pré-visualização à direita.

Nesta seção, você pode configurar:

1. Button color: define a cor dos botões de ação (por exemplo, “Start chat”).
   
    
2. Message bubble color: define a cor de fundo das bolhas de mensagem.
   

Como configurar as cores

1. Na aba “General”, localize a seção “Colors”.
2. Clique na caixa de cor ao lado dos campos “Button color” ou “Message bubble color”.
   
3. Um seletor de cores será exibido. Você pode:
   1. Escolher uma cor na paleta.
   2. Inserir um código HEX.
4. A nova cor será atualizada imediatamente na pré-visualização do widget à direita.
5. Clique em “Save” no final da página para salvar as alterações.
   

Nome de exibição

Você pode personalizar os nomes exibidos no AI Growth Widget para deixar mais claro para o visitante com quem ele está falando. Existem dois nomes de exibição que você pode configurar:

• Live Chat display name: o título exibido no topo do cabeçalho do widget (por exemplo, Cat Paradise Live Chat).
• Sender display name: o nome que aparece quando sua equipe responde (por exemplo, Paw buddy).

Como configurar os display names

1. Na aba “General”, localize os campos “Live Chat display name” e “Sender display name”.
2. Clique dentro do campo que deseja editar.
3. Digite o nome que deseja exibir.
   
4. O painel de pré-visualização à direita será atualizado automaticamente com as alterações.
5. Clique em “Save” no final da página.
   

Mensagem de boas-vindas

Você pode definir uma mensagem de boas-vindas padrão para receber os visitantes quando eles abrirem o AI Growth Widget. Isso ajuda a criar uma primeira impressão acolhedora e incentiva o visitante a iniciar uma conversa.

A mensagem de boas-vindas será exibida se nenhuma mensagem pop-up baseada em URL tiver sido configurada.

Você pode seguir as etapas abaixo para configurar sua mensagem de boas-vindas:

1. Na aba General, localize o campo Welcome message.
2. Para atualizar a mensagem:
   1. Clique dentro do campo de texto em Welcome message.
   2. Digite a saudação desejada (por exemplo: “Olá, seja bem-vindo(a)! Tem dúvidas ou precisa de ajuda? Estou aqui para ajudar.”).
   3. Você pode inserir até 500 caracteres.
3. O painel de pré-visualização à direita será atualizado automaticamente para mostrar sua nova mensagem de boas-vindas.
4. Clique em Save na parte inferior da página.
   

Configurações adicionais: Formulário de contato

Você pode exigir que os visitantes forneçam seus dados de contato antes de iniciar um chat. Isso garante que sua equipe sempre tenha uma forma de retorno, mesmo que a conversa termine rapidamente.

Você pode escolher coletar:

• Número de telefone
• Endereço de e-mail

Ambos os campos podem ser ativados juntos ou individualmente.

Você pode seguir os passos abaixo para configurar os requisitos do formulário de contato:

1. No painel de configurações General, role até a seção Additional settings.
   
2. Para exigir que os visitantes forneçam dados obrigatórios:
   1. Ative o toggle “Require contact details from website visitors”
   2. Selecione quais informações deseja exigir marcando as caixas de Phone number e/ou Email address.
   3. O painel de pré-visualização à direita mostrará como o formulário aparecerá para os visitantes antes de iniciarem o chat.
      
3. Para desativar os detalhes obrigatórios:
   1. Desative o toggle. Os visitantes poderão iniciar o chat sem fornecer informações de contato.
4. Clique em “Save” na parte inferior da página.
   

Configurando mensagens pop-up para o seu AI Growth Widget

As mensagens pop-up permitem que você aborde visitantes de forma proativa enquanto eles navegam pelo seu site. Por exemplo, você pode exibir uma saudação na sua página de preços ou após o visitante passar um tempo em uma página de produto. Quando clicado, o pop-up abre a janela do Live Chat, permitindo que o visitante inicie uma conversa imediatamente.

Acessando a aba “Pop-up messages”

Você pode seguir os passos abaixo para acessar a aba Pop-up messages nas configurações do seu AI Growth Widget:

1. Clique no ícone para ir à página Channels
2. No painel à esquerda, clique em AI Growth Widget para acessar a página de configurações do canal AI Growth Widget
   
3. Clique em “Pop-up message” no painel superior.
   
   
    

Criando uma mensagem pop-up

Você pode seguir os passos abaixo para criar e gerenciar mensagens pop-up:

1. Na aba Pop-up message, clique em Create pop-up message.
2. Um modal será exibido.
   
3. Configurar o conteúdo da mensagem: Acesse a aba Content para definir os seguintes itens:
   1. Message title: o título da mensagem pop-up, exibido apenas internamente para que sua equipe identifique essa automação.
   2. Message: escreva o texto que será exibido no pop-up. Você pode inserir até 70 caracteres.
      1. Exemplo: Need help choosing a plan? Chat with us now!
4. Configurar condições para exibir a mensagem, Acesse a aba Conditions para definir quando o pop-up será exibido.:
   
   1. As condições determinam quando e onde suas mensagens pop-up aparecerão. Você deve configurar pelo menos 1 condição, e pode adicionar até 5 condições por pop-up.
      O pop-up só será exibido se o visitante atender a todas as condições configuradas.
   2. Passos para configurar condições:
      1. Após definir o conteúdo, vá para a aba Conditions.
      2. Escolha como a regra deve funcionar no menu dropdown:
         1. Exibir quando a URL contém
         2. Exibir quando a URL corresponde exatamente
         3. Ocultar quando a URL contém
         4. Ocultar quando a URL corresponde exatamente
      3. Insira o critério de correspondência (Por exemplo: https://catparadise.com/adoption
      4. (Opcional) Adicione condições adicionais clicando em “+ Adicionar condição”.
         1. Exemplo: Exibir quando a URL contém /adoption E após 10 segundos na página.
      5. Defina o atraso de tempo se necessário: informe quantos segundos após a condição ser atendida o pop-up deve aparecer.
         
      6. Clique em “Salvar como rascunho” se quiser continuar editando depois, ou em “Salvar e publicar” para ativar a mensagem.

Editando uma mensagem pop-up

Você pode editar mensagens pop-up existentes caso queira atualizar o conteúdo, as condições ou o tempo de exibição.

1. Acesse a aba “Pop-up message” na página de configurações do seu AI Growth Widget.
   
2. Encontre a mensagem que deseja atualizar na lista.
3. Clique no ícone
4. Um modal será exibido mostrando as configurações atuais daquela mensagem pop-up.
   
5. Atualize o conteúdo, as condições ou o tempo de atraso conforme necessário.
6. Clique em “Salvar como rascunho” para guardar as alterações ou em “Salvar e publicar” para aplicá-las imediatamente.

Atualizando o status de uma mensagem pop-up

Você pode controlar se uma mensagem pop-up estará ativa no seu site ou salva para edição posterior alterando o seu status.

1. Acesse a aba “Pop-up message”.
2. Localize a pop-up que deseja atualizar.
3. Clique no menu suspenso de status.
    
    
4. Selecione uma das opções:
   1. Draft (Rascunho): A pop-up será salva, mas não será exibida aos visitantes.
   2. Published (Publicada): A pop-up ficará ativa e será exibida aos visitantes quando suas condições forem atendidas.

Excluindo uma mensagem pop-up

Se uma pop-up não for mais necessária, você pode removê-la permanentemente das configurações do seu AI Growth Widget.

Siga as etapas abaixo para excluir uma mensagem pop-up:

1. Acesse a aba “Pop-up message” na página de configurações do AI Growth Widget.
   
2. Encontre a pop-up que deseja excluir.
3. Clique no ícone   
4. Uma janela de confirmação será exibida.
   
5. Clique em “Delete” para confirmar.
6. A pop-up será removida permanentemente da sua lista.

Configurando idiomas para o seu AI Growth Widget

Você pode configurar vários idiomas no seu AI Growth Widget para oferecer uma experiência localizada a visitantes de diferentes regiões.
Quando disponível, o widget detectará automaticamente o idioma do navegador do visitante e exibirá o conteúdo nesse idioma.

Acessando a aba “Language”

1. Clique no ícone para acessar a página “Canais (Channels)”.
2. No painel lateral esquerdo, clique em “AI Growth Widget” para acessar as configurações do canal
   
3. Clique na aba “Language” no painel superior.
   

Ativar ou desativar idiomas

Você pode seguir as etapas abaixo para ativar ou desativar idiomas:

1. Na aba “Language” dentro das configurações do AI Growth Widget, você verá uma lista de idiomas suportados.
   
2. Ative um idioma usando o toggle “On” para disponibilizá-lo no widget.
   
3. Desative um idioma usando o toggle “Off” para removê-lo do widget.
   

Definir um idioma padrão

Você pode escolher um idioma para ser o padrão do seu AI Growth Widget. Ele será usado sempre que o idioma do navegador do visitante não corresponder a nenhum dos idiomas habilitados.

Siga as etapas abaixo para definir um idioma padrão:

1. Na aba “Language” dentro das configurações do AI Growth Widget, você verá a lista de idiomas suportados.
2. Encontre o idioma que deseja definir como padrão.
3. Clique no ícone e selecione “Set as default” (Definir como padrão).
   
4. O widget passará a usar esse idioma sempre que o idioma do navegador do visitante não for suportado.

Instalando o AI Growth Widget no seu site

Para exibir o AI Growth Widget no seu site, você precisará incorporar um pequeno script. Depois de instalado, o widget aparecerá no canto inferior direito das páginas configuradas.

Siga as etapas abaixo para instalar:

1. Obter o código de incorporação (embed code)
   1. Na página de configurações do canal AI Growth Widget, clique em “Get code snippet”, localizado no canto superior direito da página.
      
   2. Um modal será exibido com o código do script.
      
   3. Clique em “Copy code snippet” no canto inferior direito.
2. O código será copiado para a sua área de transferência.
3. Adicionar o código ao seu site
   1. Cole o script antes da tag de fechamento </body> em todas as páginas onde você deseja que o widget apareça.
   2. Se quiser que o widget seja exibido em todo o site, cole o script no <header> ou <footer> global do seu site.
4. Salvar e atualizar
   1. Salve as alterações no seu site.
   2. Atualize a página — o widget deverá aparecer na posição configurada.
5. Testar o widget
   1. Envie uma mensagem de teste para confirmar que o AI Growth Widget está corretamente conectado e configurado com o SleekFlow.