Tema

A aba Tema permite personalizar a aparência do seu bot.

Global

Nesta seção você ativa ou desativa a marca no bot, e altera a fonte e o fundo.

Alternar a opção marca do GG.chatbot — ou qualquer outra mudança de tema — só afeta o bot no ar depois que você republicar. Se você acabou de desativar a marca e ela continua aparecendo no bot publicado, clique em Publicar para propagar a mudança.

Barra de progresso

A barra de progresso indica visualmente o quanto o usuário já avançou no bot. Isso melhora a experiência, dando uma noção de progresso e de conclusão.

Para ativá-la:

Vá até a aba Tema do seu bot.
Encontre a opção Barra de progresso, na seção Global.
Ative a chave Habilitar barra de progresso.

Opção	Descrição
Posição	Define onde a barra aparece. Opções: `Topo` ou `Base`.
Cor de fundo	Define a cor do fundo da barra.
Cor	Define a cor do indicador de progresso.
Espessura	Controla a altura da barra em pixels. Padrão: `4`.
Posição quando incorporado	Controla o posicionamento quando o bot está incorporado em outro site. Veja abaixo.

Posição quando incorporado

Use esta opção para ajustar o comportamento da barra quando o GG.chatbot está incorporado em uma página:

fixed: fixa a barra no topo da janela. Ela permanece visível mesmo se o contêiner do chat rolar.
absolute: posiciona a barra no topo do contêiner do chat. Ela rola junto com a conversa.

Chat

Nesta seção você personaliza todos os componentes da conversa: avatares, balões, campos e assim por diante.

Clique no avatar do bot para trocar a imagem:

CSS personalizado

Você pode ir além adicionando o CSS que quiser. Para isso, clique com o botão direito no bot dentro da página Tema e inspecione o elemento que deseja personalizar:

Por exemplo, para deixar os botões mais arredondados e com um degradê, acrescente isto ao CSS personalizado:

.typebot-button {
  border-radius: 40px;
  background-image: linear-gradient(to right, #e052a0, #f15c41);
  border: none;
}

Personalizar a cor de um único botão

Com CSS personalizado você pode mudar a cor de apenas um botão, usando o atributo data-itemid:

[data-itemid="cl3iunm4p000f2e6gfr8cznnn"] {
  background-color: gray;
  border-color: gray;
}

Para descobrir o ID de um botão, clique nele com o botão direito e inspecione o elemento: