Incorpore o Chat de IA no Seu Website
Adicione um chatbot de IA inteligente a qualquer website em minutos. Copie uma linha de código, cole-a e veja o seu website ganhar vida com apoio ao cliente inteligente 24/7. Não são necessários conhecimentos de programação.
O que é a Incorporação de Widget?
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.
Cria um Chatbot
Construa um assistente de IA que conhece os seus produtos, serviços e perguntas frequentes. Demora cerca de 5 minutos.
Copia o Código de Incorporação
Damos-lhe uma linha de código simples. Tem este aspeto: <script src="...">
Cola no Seu Website
Adicione esse código ao HTML do seu website. O widget de chat aparece instantaneamente. Os seus visitantes já podem conversar com a sua IA!
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.
4 Formas de Apresentar o Seu Widget de Chat
Escolha como o chat aparece no seu website. Cada estilo funciona melhor em situações diferentes — escolha o que corresponde ao design do seu site.
Modo Balão
Um 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 Lateral
O 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 Deslocamento
Tal 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 Gaveta
O 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.
Como Incorporar o Seu Widget de Chat (5 Minutos)
Siga estes passos simples para adicionar chat de IA ao seu website. Não é necessária experiência de programação — se sabe copiar e colar, consegue fazê-lo!
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.
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.
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).
Display Modes:
• Bubble - Floating chat button in corner
• Sidebar - Slide-in panel from left/right
• Push - Pushes your page content aside
• Drawer - Pulls up from the bottomDica: 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.
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.
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.
<script>
window.gnosariConfig = {
agentUri: 'your-agent-uri',
apiUrl: 'https://gnosari.com',
displayMode: 'bubble',
position: 'bottom-right'
};
</script>
<script src="https://gnosari.com/widget.js"></script>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.
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.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<!-- Your website content -->
<!-- Paste embed code here -->
<script>window.gnosariConfig = {...};</script>
<script src="https://gnosari.com/widget.js"></script>
</body>
</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!
Crie Temas de Chat Reutilizáveis
Desenhe o aspeto do seu chat uma vez e aplique-o a todos os seus chatbots. Os temas de chat permitem-lhe personalizar cores, mensagens de boas-vindas, sugestões de conversa e muito mais — tudo num só lugar.
Temas de Cor
Escolha entre mais de 10 belas paletas de cores ou crie as suas próprias cores de marca.
Experiência de Boas-Vindas
Configure janelas modais de boas-vindas, mensagens de saudação e experiências para visitantes de primeira vez.
Sugestões de Conversa
Adicione sugestões iniciais e propostas de seguimento para orientar as conversas.
Padrões de Fundo
Adicione padrões subtis, como no WhatsApp, para dar ao seu chat um aspeto único e com marca.
Tema de Apoio ao Cliente
Roxo + Modal de Boas-Vindas
Tema de Assistente de Vendas
Verde + Sugestões Iniciais
Tema de Centro de Aprendizagem
Azul + Padrão de Fundo
Como Criar um Tema de Chat
Desenhe experiências de chat bonitas e fiéis à marca em apenas alguns cliques. Veja as alterações instantaneamente com a nossa pré-visualização ao vivo.
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.
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ã!
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.
Welcome Options:
• Welcome Modal - Attention-grabbing intro
• Typewriter Effect - Animated headline
• Greeting Message - AI says hello first
• Empty State - Title and descriptionDica: Os modais de boas-vindas são ótimos para explicar com o que o seu chatbot pode ajudar. As primeiras impressões contam!
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.
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.
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.
Tudo o Que Precisa para uma Incorporação Perfeita
O nosso sistema de widget foi concebido para funcionar de forma integrada em qualquer website, dando-lhe controlo total sobre a aparência e o comportamento.
Código de Incorporação numa Linha
Basta 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ção
Balã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 Marca
Corresponda 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 Vivo
Veja 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ápido
Tamanho 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 Privacidade
Controle 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.
Funciona em Todas as Plataformas de Website
Quer tenha construído o seu site com WordPress, Shopify, Wix ou código personalizado — a nossa incorporação funciona em todo o lado.
WordPress
Shopify
Wix
Webflow
Squarespace
HTML/JS
Não encontra a sua plataforma? Sem problemas — a nossa incorporação funciona em qualquer website que suporte JavaScript.
Ver Guia de Integração CompletoPerguntas Frequentes sobre Incorporação
Perguntas comuns sobre a incorporação do seu chat de IA em qualquer website.
Ainda tem dúvidas?
A nossa equipa está disponível para o ajudar a começar.
Crie o seu chatbot com o nosso assistente (5 minutos), abra o Configurador de Widget, escolha o modo de apresentação e as cores, clique em "Obter Código de Incorporação" e cole a etiqueta de script no HTML do seu website, antes da etiqueta de fecho do corpo.
Pronto para Incorporar Chat de IA no Seu Website?
Crie o seu chatbot, personalize o design e fique online em minutos. Os seus visitantes vão agradecer-lhe pelas respostas instantâneas e úteis.
Comece a usar o Gnosari para potenciar o seu apoio ao cliente