Este guia fornece um passo a passo detalhado para configurar o WebChat no sistema OmniSiga. A seguir, vamos passar pelas etapas de configuração e anatomia de cada seção do WebChat, explicando como personalizar cada elemento.
1. Pré-visualização das Configurações de Estilização
Antes de iniciar as configurações, você verá a pré-visualização da estilização aplicada ao WebChat. Isso inclui elementos como mensagens, botões, ícones e a aparência geral do chat.
Passo 1: Visualize a configuração da estilização
- A pré-visualização será exibida, permitindo que você veja como o chat ficará após a personalização.
2. Código de Integração
Após configurar as opções visuais e funcionais, será gerado um código para integração do WebChat em seu site.
Passo 2: Copie e cole o código gerado
- O código gerado deve ser inserido no seu site para renderizar o Widget do WebChat.
- Esse código integrará o fluxo de atendimento do OmniSiga diretamente em seu site.
3. Mensagem de Entrada Estática
O campo Mensagem de Entrada Estática permite que você configure uma mensagem predefinida para ser exibida quando o usuário entrar no chat de atendimento.
Passo 3: Configure a mensagem de entrada estática
- Se a opção "Iniciar fluxo automaticamente" estiver desmarcada, a mensagem de entrada será exibida primeiro, antes que o fluxo de atendimento seja iniciado.
- Se "Iniciar fluxo automaticamente" estiver marcada, o bot começará o atendimento automaticamente e a mensagem de entrada não será exibida.
4. Configurações de Aparência do Chat
Aqui você pode ajustar várias opções de personalização para a interface do chat, incluindo o título, logo e cores.
Passo 4: Personalize a aparência do chat
- Defina o título do chat.
- Escolha a logo que aparecerá no cabeçalho.
- Configure a cor de fundo, cor do cabeçalho, cor do título e o cor do status.
5. Aparência das Mensagens do Bot
Personalize as mensagens enviadas pelo bot, ajustando seu nome, avatar e outros aspectos gráficos.
Passo 5: Configure a aparência das mensagens do bot
- Defina o nome do bot.
- Escolha o avatar ou logo do bot.
- Ajuste a tipografia das mensagens (tamanho e fonte do nome, texto e horário).
- Configure a cor de fundo, cor do texto, cor do nome do bot e a cor do horário da mensagem.
6. Aparência das Mensagens do Usuário
Agora, personalize as mensagens enviadas pelos usuários, incluindo a exibição do nome e a tipografia.
Passo 6: Personalize as mensagens do usuário
- Defina o nome do usuário.
- Ajuste a tipografia das mensagens (tamanho e fonte do nome, texto e horário).
- Configure a cor de fundo, cor do texto, cor do nome do bot e a cor do horário da mensagem.
7. Aparência dos Botões
O WebChat também permite configurar a aparência dos botões, garantindo que eles se alinhem ao estilo visual do seu site.
Passo 7: Personalize os botões
- Cor de fundo dos botões: Escolha a cor que será exibida como fundo nos botões.
- Cor do texto dos botões: Personalize a cor do texto exibido nos botões.
- Cor do texto selecionado: Defina a cor do texto quando um botão for selecionado.
- Cor de fundo selecionado: Ajuste a cor de fundo do botão quando ele for selecionado.
8. Aparência do Widget
Finalmente, configure a aparência do Widget que será exibido na sua página web, ajustando o ícone, o posicionamento e outras opções.
Passo 8: Personalize o widget
- Escolha o ícone do widget.
- Ajuste o diâmetro, o posicionamento (à esquerda ou à direita) e a distância das laterais.
- Configure o texto do balão e outras opções visuais.
