Código do widget de chat com IA: adicione um assistente de suporte a qualquer site
Copie uma tag script e coloque no seu site um assistente de chat com IA que responde em tempo real. Veja o código de incorporação, as opções e o que verificar antes de publicar.
Publicado:
Um widget de chat com IA atende seus visitantes na mesma página que eles já estão lendo. Com a api14, toda a integração é uma única tag script: você monta o widget no painel, copia o código e cola no seu HTML. Não há SDK para instalar nem código de servidor para escrever.
O que o widget de chat faz
O widget de chat é uma pequena janela de conversa que exibe em tempo real as respostas do modelo que você escolher. Ele segue instruções privadas escritas por você, que os visitantes nunca veem, então pode atuar como agente de suporte, assistente de vendas ou guia da sua documentação. As respostas aceitam formatação básica (parágrafos, listas, negrito, código e links), um botão Parar interrompe uma resposta longa, e a conversa continua enquanto o visitante navega entre páginas na mesma aba.
O código do widget
Depois que você salva um widget em Widgets, o editor mostra o código de incorporação:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Coloque a tag dentro de <body>, no ponto onde o chat deve aparecer. Dois atributos opcionais mudam onde e como ele é exibido:
| Atributo | O que faz |
|---|---|
data-target | Seletor CSS de um elemento onde o widget será exibido, por exemplo #support. |
data-height | Altura de um widget dentro da página, por exemplo 520px. O chat usa 480px por padrão. |
Se preferir um botão no canto da tela, escolha a posição Botão flutuante no editor. O código continua o mesmo.
Quatro passos para um assistente de chat no ar
- Escolha um modelo. Qualquer modelo de chat do catálogo funciona. O seletor mostra o preço de cada modelo, então você pode começar com um modelo rápido e barato e trocar depois sem mexer no seu site.
- Escolha uma chave de API. Todo widget funciona com uma das suas chaves de API. Selecione uma chave existente ou use a última opção da lista, Criar nova chave de API, para criar uma só para este widget. Os limites da chave valem para o widget, e a chave nunca chega ao navegador.
- Escreva as instruções e os textos. Defina o título, a saudação, o texto do campo e o texto do botão. Adicione instruções privadas que descrevam seu produto e o tom que você quer.
- Autorize seus domínios. Em Configurações, Sites do widget, liste os sites onde o widget pode funcionar. Solicitações de qualquer outro site são recusadas.
Por que ele não quebra a sua página
O widget é exibido dentro de um Shadow DOM isolado. Seu CSS não vaza para a janela do chat e o widget não altera o estilo da sua página. Ele carrega de forma assíncrona, então não impede o restante do conteúdo de aparecer.
Antes de publicar
- Abra a pré-visualização no editor e faça as perguntas que seus clientes realmente fazem. A pré-visualização envia solicitações reais com as configurações ainda não salvas.
- Defina um limite de gasto diário para o widget, para que um dia movimentado não traga surpresas.
- Confira se o seu saldo cobre o tráfego esperado. As solicitações dos visitantes são cobradas do seu saldo em USD pelo preço normal do modelo.
Quer experimentar? Crie um widget de chat sem conta na página de widgets e depois leia a referência completa na documentação de widgets.