OneTwoAgent

Personalizar o widget

Deixe o widget do OneTwoAgent com a aparência e o comportamento de uma parte do seu produto, sem CSS: tema, cores, 45 Google Fonts, formatos de balão, ícones e animações do launcher, uma tela Home, Voice e onde o widget aparece.

Design do widget sem CSSÍcones e animações do launcherTela Home e fundosConfigurações do Voice (Talk)

Onde personalizar

Abra Channels -> Widget. Cada alteração aparece na prévia ao vivo enquanto você edita.

  • Veja a prévia de Home, Chat e Talk no desktop e no mobile.
  • Sem CSS: cores, fontes, formatos, launcher, tela Home e Voice são todos configurações.
  • As mesmas configurações valem onde quer que o widget esteja instalado: no seu site e no seu app.

Superfícies e a primeira tela

  • Home: uma tela inicial com a sua marca, com seu título, um botão principal e links.
  • Chat: a conversa com o agente de suporte com IA e com sua equipe.
  • Talk: conversa por voz com o agente.
  • Escolha em qual das três o widget abre.

Tema e cores

  • Tema claro ou escuro.
  • Cores para o cabeçalho, balões do assistente e do cliente, fundo do chat, campo de texto, botão de envio, launcher, botões e botão de fechar.
  • O botão de fechar pode ter fundo e borda próprios.

Tipografia

  • 45 Google Fonts: sans-serif, serif e monospace.
  • Defina a fonte separadamente para o cabeçalho, as mensagens do assistente, as mensagens do cliente, o campo de texto e o launcher.
  • Cada elemento tem seu próprio tamanho de fonte.

Mensagens e cabeçalho

  • 6 formatos de balão, aplicados às mensagens do assistente ou aos dois lados.
  • Uma escolha de ícone de envio.
  • Cabeçalho: nome do assistente, linha de status e um avatar ou logotipo opcional.

Launcher

  • 15 ícones de launcher e a cor de launcher que você quiser.
  • Texto opcional no launcher, com apenas o ícone no mobile, se preferir.
  • 13 animações de launcher para chamar a atenção sem atrapalhar.

Tela Home

  • Título, uma linha curta acima dele e o texto do botão principal.
  • Até 3 links, por exemplo para sua documentação, página de status ou preços.
  • Uma esfera animada, com uma textura que você também pode usar no Talk.
  • 16 estilos de fundo animados, incluindo mesh, halo, rays, glow, stars, dots, grain e halftone, ou um fundo simples.
  • Aplique ao fundo uma tonalidade com uma das cores do seu widget ou uma cor predefinida, e ajuste a intensidade e o movimento: parado, calmo ou vivo.
Tela inicial do widget no tema escuro com fundo mesh
Tema escuro, fundo mesh, um botão na cor da marca e dois links.
Tela inicial do widget no tema claro com fundo de pontos
Tema claro, fundo de pontos em outra cor da marca.

Talk (Voice)

  • Ative ou desative o Talk.
  • Escolha uma voz no catálogo de vozes, filtrando por idioma, sotaque e gênero, e ouça uma prévia antes de decidir.
  • Escreva a mensagem de boas-vindas falada e escolha a textura da esfera.
Notas

Textos e comportamento

  • Mensagem de boas-vindas, placeholder do campo de texto e texto do launcher.
  • Envio de arquivos ativado ou desativado.
  • Modo compacto para um widget menor.

Onde o widget aparece

  • Domínios permitidos: o widget só carrega nos seus domínios.
  • Restrições de páginas: páginas permitidas e páginas excluídas, como /checkout ou /account.
Notas

Guias relacionados

Continue com os próximos passos de configuração para canais, reservas, agenda ou automação.

Perguntas frequentes

Preciso de CSS ou de um desenvolvedor para aplicar minha marca ao widget?

Não. Todas as configurações de design e comportamento ficam em Channels -> Widget, e cada alteração aparece na prévia ao vivo enquanto você edita.

O widget pode usar a fonte da minha marca?

Escolha entre 45 Google Fonts (sans-serif, serif e monospace), definidas separadamente para o cabeçalho, as mensagens do assistente, as mensagens do cliente, o campo de texto e o launcher, cada uma com seu próprio tamanho.

O widget pode abrir direto no Voice?

Sim. Escolha Home, Chat ou Talk como a tela em que o widget abre.

Posso ocultar o widget em algumas páginas?

Sim. Ative as restrições de páginas e liste as páginas permitidas ou excluídas, por exemplo /checkout. Os domínios permitidos impedem que o código do widget seja reutilizado em outros sites.

Precisa de ajuda?

support@onetwoagent.com