search
Acesso ao SiteLogin

boltTutorial: Como instalar o Chat Widget Shazan no seu site

O Chat Widget Shazan permite que você adicione um chat interativo ao seu site, integrando-se à API da Shazan para fornecer um atendimento automatizado.

hashtag
🚀 1. Como adicionar o Widget ao seu site

Para instalar o widget no seu site, adicione o seguinte código antes do fechamento da tag <body>:

<script>
  window.ChatWidgetConfig = {
    agid: "1737929837660x616748887514546200", // ID do bot (obrigatório)
    welcomeMessage: "Olá! Como posso te ajudar hoje?", // Mensagem inicial do bot
    chatTitle: "Atendimento Online", // Título do chat
    headerColor: "#1E40AF", // Cor da barra do título
    buttonColor: "#10B981" // Cor do botão de enviar
  };
</script>
<script async src="https://chat-widget.shazan.ai/chat-widget.js"></script>

✅ Pronto! O widget aparecerá automaticamente no seu site.

hashtag
🎨 2. Personalizando o Widget

Você pode personalizar o chat usando as variáveis do objeto ChatWidgetConfig:

Variável
Descrição
Valor Padrão

agid

ID do bot que responde no chat (obrigatório)

-

welcomeMessage

Mensagem inicial exibida ao abrir o chat

"Bem vindo, como posso lhe ajudar hoje?"

chatTitle

Título exibido no cabeçalho do chat

"Chat Widget"

headerColor

Cor do cabeçalho do chat (hexadecimal)

"#2D3748"

buttonColor

Cor do botão de envio de mensagem (hexadecimal)

"#2D3748"

💡 Dica: Use cores no formato hexadecimal (exemplo: #FF5733 para laranja).

hashtag
🧪 3. Testando o Widget

Para ver um exemplo do widget em funcionamento, acesse: 🔗 Exemplo de site com o Widgetarrow-up-right

Se precisar verificar o JavaScript diretamente, você pode acessar o código-fonte do widget: 📜 Código do Widgetarrow-up-right

hashtag
🔧 4. Problemas ou dúvidas?

Caso tenha dúvidas ou precise de suporte, entre em contato com a equipe Shazan.

🎉 Agora você está pronto para oferecer um atendimento automatizado no seu site! 🚀

AnteriorTutorial: Como Importar um JSON no Typebot

Atualizado