Incorpore o Chat de IA no Seu Website

Imagine que é como colocar um assistente inteligente no seu website. Quando os visitantes chegam ao seu site, veem um botão de chat amigável. Clicam nele e, num instante - estão a falar com o seu chatbot de IA, que sabe tudo sobre o seu negócio. Explore casos de utilização reais em vários setores ou comece gratuitamente.

Não São Necessários Conhecimentos Técnicos Se sabe copiar e colar texto, sabe incorporar o nosso widget de chat. Concebemo-lo para que qualquer pessoa - mesmo um iniciante absoluto - possa adicionar chat de IA ao seu website. A maioria das pessoas conclui em menos de 10 minutos.

1. 1

   Crie o Seu Chatbot de IA

   Primeiro, precisa de um chatbot para incorporar. Use o nosso assistente simples para criar um - basta dar-lhe um nome, adicionar o URL do seu website (para que aprenda sobre o seu negócio) e escolher um modelo de personalidade. Todo o processo demora cerca de 5 minutos.

   Dica: Dica de especialista: Adicione o seu sitemap.xml para uma cobertura completa de todas as suas páginas. O seu chatbot aprenderá automaticamente com tudo o que existe no seu site.
2. 2

   Abra o Configurador de Widget

   Assim que o seu chatbot estiver criado, vá à página do seu chatbot e clique no botão "Widget". Isto abre o nosso configurador visual, onde pode ver exatamente como o seu chat ficará no seu website - em tempo real!

   Dica: O configurador mostra uma pré-visualização ao vivo no lado direito. Cada alteração que faz aparece instantaneamente, para que possa experimentar à vontade.
3. 3

   Escolha o Seu Modo de Apresentação

   Escolha como pretende que o chat apareça no seu website. O modo balão mostra um botão flutuante (o mais popular). A barra lateral desliza a partir da lateral. O modo deslocamento move o seu conteúdo para abrir espaço. A gaveta sobe a partir da parte inferior (ótima para telemóveis).

   Dica: Não tem a certeza de qual escolher? Comece pelo modo balão - é o padrão mais familiar para os visitantes de websites e funciona muito bem tanto em computadores como em telemóveis.
4. 4

   Personalize a Aparência

   Faça o chat corresponder à sua marca! Escolha a cor da sua marca (usada no botão e nos detalhes), escolha a posição (canto inferior direito é a mais comum) e ajuste a largura da barra lateral se estiver a usar os modos de barra lateral.

   Dica: Quer ainda mais personalização? Crie um Tema de Chat para adicionar modais de boas-vindas, sugestões iniciais, padrões de fundo e muito mais. Os temas podem ser reutilizados em vários chatbots.
5. 5

   Obtenha o Seu Código de Incorporação

   Clique no botão "Obter Código de Incorporação". Verá uma etiqueta de script simples, com este aspeto. Basta copiá-la para a área de transferência.

   Dica: O código de incorporação inclui todas as suas definições de personalização. Se alterar as definições mais tarde, terá de atualizar o código no seu website.

   HTMLCopiar

   <script>
     window.gnosariConfig = { agentUri: 'your-agent-uri' };
   </script>
   <script src="https://app.gnosari.com/gnosari-chat-widget-advanced.js"></script>

6. 6

   Cole no Seu Website

   Adicione o código de incorporação ao seu website. Cole-o imediatamente antes da etiqueta de fecho </body>. No WordPress, use um plugin como "Insert Headers and Footers" ou adicione-o no personalizador do tema. No Shopify, adicione-o ao theme.liquid. No Wix, use o elemento Embed HTML.

   Dica: Concluído! Atualize o seu website e verá o widget de chat. Clique nele para testar - o seu chatbot de IA está agora online e pronto para ajudar os seus visitantes 24/7!

• WordPressAspeto, depois Editor de ficheiros do tema, depois footer.php, mesmo acima da etiqueta body de fecho. Num tema de blocos, um bloco HTML personalizado no modelo do rodapé faz o mesmo sem PHP.Ler Guia
• ShopifyLoja online, depois Temas, depois Editar código, depois theme.liquid. Cole antes da etiqueta body de fecho para o widget carregar em produto, coleção e carrinho.Ler Guia
• WixDefinições, depois Código personalizado, depois Adicionar código personalizado. Escolha «Body - fim» e aplique a todas as páginas.
• WebflowDefinições do projeto, depois Código personalizado, depois Código do rodapé. Publique o site para a alteração ficar ativa.
• SquarespaceDefinições, depois Avançado, depois Injeção de código. Cole na caixa Rodapé, que se aplica a todo o site.
• HTML / JSCole mesmo antes da etiqueta body de fecho do seu modelo ou ficheiro de layout, para carregar em todas as páginas que o incluem.

• Modo BalãoUm botão de chat flutuante no canto da sua página. Clique nele e a janela de chat surge. Este é o estilo clássico que vê na maioria dos websites - familiar e fácil de usar.
• Modo Barra LateralO chat desliza a partir da lateral como um painel. Ótimo para websites onde os clientes precisam de conversar enquanto navegam. O chat permanece visível ao lado do seu conteúdo.
• Modo DeslocamentoTal como a barra lateral, mas desloca efetivamente o conteúdo do seu website para abrir espaço. Nada fica tapado - a sua página ajusta-se para mostrar o chat e o conteúdo lado a lado.
• Modo GavetaO chat desliza a partir da parte inferior como uma gaveta. Perfeito para websites móveis, onde o espaço do ecrã é precioso. Sente-se natural em telemóveis e tablets.

• Temas de CorEscolha entre mais de 10 belas paletas de cores ou crie as suas próprias cores de marca.
• Experiência de Boas-VindasConfigure janelas modais de boas-vindas, mensagens de saudação e experiências para visitantes de primeira vez.
• Sugestões de ConversaAdicione sugestões iniciais e propostas de seguimento para orientar as conversas.
• Padrões de FundoAdicione padrões subtis, como no WhatsApp, para dar ao seu chat um aspeto único e com marca.

1. 1

   Vá a Temas de Chat

   Navegue até Temas de Chat na barra lateral do seu painel. Clique em "Criar Tema" para começar a desenhar a sua experiência de chat personalizada.

   Dica: Os temas são reutilizáveis - crie uma vez e aplique a vários chatbots. Perfeito se tem vários chatbots que devem ter todos o mesmo aspeto.

2. 2

   Escolha a Sua Paleta de Cores

   Escolha um tema de cor que corresponda à sua marca. Oferecemos mais de 10 belas paletas pré-concebidas, ou pode criar uma cor personalizada. A cor afeta botões, ligações, detalhes e gradientes em todo o chat.

   Dica: Veja a sua cor aplicada instantaneamente na pré-visualização ao vivo no lado direito do ecrã!

3. 3

   Desenhe a Experiência de Boas-Vindas

   Configure o que os visitantes veem quando abrem o chat pela primeira vez. Adicione um modal de boas-vindas com um título e uma chamada à ação, defina uma mensagem de saudação da IA e personalize o estado vazio antes de qualquer mensagem ser enviada.

   Dica: Os modais de boas-vindas são ótimos para explicar com o que o seu chatbot pode ajudar. As primeiras impressões contam!

4. 4

   Adicione Sugestões de Conversa

   Ajude os visitantes a iniciar conversas com sugestões propostas. São perguntas clicáveis que aparecem no chat - os visitantes clicam numa e a IA responde de imediato. Ótimo para demonstrar o que o seu chatbot consegue fazer.

   Dica: Adicione 3 a 4 sugestões iniciais que cubram as suas perguntas mais comuns. Isto ajuda os visitantes que não têm a certeza do que perguntar.

5. 5

   Adicione um Padrão de Fundo (Opcional)

   Dê ao seu chat um aspeto único com um padrão de fundo subtil - como os fundos de chat do WhatsApp. Escolha entre pontos, ondas, grelha ou outros padrões. Ajuste a intensidade para o manter subtil.

   Dica: Os padrões dão personalidade, mas mantenha-os subtis - não quer que distraiam da conversa.

6. 6

   Guardar e Aplicar

   Dê um nome e uma descrição ao seu tema e clique em Criar Tema. Agora pode aplicar este tema a qualquer um dos seus chatbots. Quando atualizar o tema, todos os chatbots que o usam serão atualizados automaticamente!

   Dica: Crie temas para diferentes finalidades: "Apoio ao Cliente" com um modal de boas-vindas, "Assistente de Vendas" com sugestões de produtos, etc.

• Código de Incorporação numa LinhaBasta copiar e colar uma única etiqueta de script. Sem pacotes npm, sem passos de compilação, sem configuração complexa. Funciona em qualquer website que suporte JavaScript.
• 4 Modos de ApresentaçãoBalão (botão flutuante), Barra Lateral (painel deslizante), Deslocamento (move o conteúdo) e Gaveta (painel inferior). Cada modo é totalmente adaptável e otimizado para o toque.
• Personalização Total da MarcaCorresponda na perfeição ao seu website com cores, posicionamento e dimensões personalizados. Crie temas reutilizáveis para uma imagem de marca consistente em todos os seus chatbots.
• Pré-Visualização Ao VivoVeja exatamente como o seu chat ficará à medida que o configura. Cada alteração aparece instantaneamente na pré-visualização - sem adivinhas, sem surpresas.
• Leve e RápidoTamanho de script inferior a 50 KB. Carrega de forma assíncrona, pelo que nunca abranda o seu website. Entrega através de CDN global para um carregamento rápido em todo o mundo.
• Controlos de PrivacidadeControle quem pode aceder ao seu chatbot. Defina-o como público, protegido por palavra-passe ou privado. Conforme com o RGPD, com definições opcionais de recolha de dados.

• Chatbot de IA para o Seu SiteAdicione suporte ao cliente inteligente e 24/7 ao seu site em minutos. Responda automaticamente às perguntas dos visitantes, gere mais leads através da conversa e reduza os custos de suporte com IA.Ler Guia
• Chatbot de IA para WordPressAdicione chat de IA ao WordPress em 60 segundos. Sem necessidade de plugin - basta copiar e colar um código de incorporação. Funciona com WooCommerce, Elementor, Divi e todos os temas.Ler Guia
• Casos de Utilização de Chatbots de IA - Mais de 100 Exemplos e Soluções por SetorExplore mais de 100 casos de utilização de chatbots de IA em apoio ao cliente, comércio eletrónico, saúde, imobiliário e mais de 12 outros setores. Encontre hoje a sua solução de IA.Ler Guia