Guia de instalação
Adicione um chat de IA ao seu site
Este guia é para comerciantes que podem editar o site ou inserir um script pelas ferramentas de publicação. Ao concluir, verifique uma conversa e sua resposta, além de confirmar que o botão de chat aparece.
Ouviro · Publicado
1. Prepare seu site e sua conta
Tenha acesso ao layout compartilhado ou às configurações de código personalizado do site, ao e-mail de cadastro e a uma política de atendimento atual para testar. Cadastre-se em app.ouviro.com, confirme seu e-mail e conclua a criação da loja.
Use uma conta de proprietário ou administrador para configurar canais e conhecimento. Mantenha uma opção de atendimento humano para perguntas que seu conteúdo não responde.
2. Configure o canal do seu site
Abra Canais e use o canal de site criado na configuração inicial ou crie um para o site em que fará a instalação. Confira a URL, o nome exibido, o idioma e a aparência. Depois, copie o código de instalação desse canal.
O websiteToken identifica o canal e aparece no código-fonte da página. Ele não é uma credencial privada de API nem uma permissão para ler pedidos de clientes.
3. Carregue o SDK e inicie o widget
Adicione o código uma única vez ao layout compartilhado do site. Se usar window.aiSupportSettings para opções adicionais, defina-o antes de carregar o script. O SDK carrega de forma assíncrona; chame window.aiSupportSDK.run somente após o carregamento.
Esta instalação ilustrativa usa um valor fictício. Substitua-o pelo código do seu próprio canal e publique a alteração no site.
<script>
(function (d) {
var g = d.createElement("script");
g.src = "https://app.ouviro.com/sdk.js";
g.async = true;
g.onload = function () {
window.aiSupportSDK.run({
websiteToken: "YOUR_WEBSITE_TOKEN",
baseUrl: "https://app.ouviro.com"
});
};
d.head.appendChild(g);
})(document);
</script>4. Permita as conexões necessárias na CSP
Se seu site usa Content Security Policy, incorpore estas permissões de origem à política existente. Permita toda a origem do script, pois o painel do chat carrega um arquivo separado. O código de inicialização inserido na página também precisa da autorização por nonce ou hash usada pelo site; estas permissões de origem, sozinhas, não autorizam código inline.
O widget atual insere estilos inline no Shadow DOM. Ele também precisa da permissão de estilos abaixo; o nonce ou hash do código de inicialização não autoriza esses estilos. Preserve as outras origens da sua política. Se a política de segurança não permite esses estilos inline, por exemplo se aceita apenas estilos com nonce, o widget ainda não é compatível. Verifique essa limitação antes de instalar.
Adicione a permissão de estilos inline somente depois de revisá-la e aprová-la. Uma diretiva style-src-elem existente ou restrições de nonce/hash para estilos ainda podem bloquear o widget; copiar estas três linhas não as substitui.
script-src https://app.ouviro.com;
connect-src https://app.ouviro.com wss://app.ouviro.com;
style-src 'unsafe-inline';5. Abra a janela e confira a conexão
Recarregue a página publicada e abra o chat. Nas ferramentas de desenvolvedor do navegador, confira se sdk.js e o script do chat carregam, se as requisições a /widget/ funcionam e se a conexão com wss://app.ouviro.com/ws/ é aberta.
Ver o botão não prova que a conversa consegue se conectar. Confira também a página em uma largura de tela de celular.
6. Verifique a primeira resposta útil
Adicione uma política curta e atual em Conhecimento e espere a indexação e a publicação terminarem. Faça uma pergunta cuja resposta você possa conferir nessa política. Verifique o conteúdo da resposta e se a conversa aparece na caixa de entrada dos atendentes.
Faça também uma pergunta não coberta pelo conteúdo e teste o botão de atendimento humano. Confira o encaminhamento real e a disponibilidade dos atendentes antes de convidar clientes.
7. Corrija falhas de carregamento e instalações repetidas
Se o botão mostrar Tentar novamente, confira requisições de scripts bloqueadas, erros de CSP e falhas de rede antes de tentar de novo. Se o painel abrir sem conectar, verifique as requisições HTTP e WebSocket separadamente.
Mantenha uma única instalação no template do site e remova inserções duplicadas do gerenciador de tags ou do tema. Em uma aplicação de página única, chame window.aiSupportSDK.destroy() ao remover ou substituir a integração e depois execute run com a configuração desejada. Repetir run não atualiza um widget ativo.