Configuração

Personalize a aparência e o comportamento do widget.

Opções de init#

Opção	Predefinição	Descrição
agentId	obrigatório*	O ID único do seu agente. *Para widgets só com humanos, `channelId` sozinho é suficiente.
channelId	—	ID do canal do widget. Seleciona quais configurações de widget (estilização, tooltips/banners de outbound) se aplicam quando um agente alimenta vários widgets, e é o único identificador para widgets só com humanos. Pelo menos um entre `agentId` / `channelId` é obrigatório.
position	bottom-right	`bottom-right` ou `bottom-left`
primaryColor	#3B82F6	Cor da marca para o botão e o cabeçalho do widget
title	Support	Texto do título do cabeçalho
greeting	auto	Mensagem de boas-vindas (carregada das configurações do dashboard por padrão)
language	page	Idioma do widget como código BCP-47 (`de`, `pt-BR`). Define a interface, a saudação e as perguntas rápidas. Se omitido, o widget segue o `<html lang>` da página: uma página cujo `lang` não seja `en` agora inicia nesse idioma, independentemente do navegador do visitante. Um simples `<html lang="en">` é tratado como padrão de template e ignorado: o visitante mantém o comportamento anterior (escolha lembrada e, depois, idioma do navegador). Passe `'browser'` para ignorar `<html lang>` por completo e voltar ao comportamento «somente navegador». Altere em tempo de execução com `Respondo.setLanguage('fr')` — útil para seletores de idioma que não recarregam a página.
placeholder	—	Texto de placeholder personalizado do campo de entrada
quickQuestions	—	Matriz de perguntas sugeridas, apresentadas antes da primeira mensagem
logoUrl	—	URL do seu logótipo apresentado no cabeçalho do widget
avatarUrl	—	URL do avatar do agente de IA apresentado junto às mensagens
identity	—	Identidade do usuário predefinida no momento do init (os mesmos campos que `identify()`)
localStorageKey	—	Chave de localStorage a partir da qual ler automaticamente o `userId` (para configurações GTM / no-code)
chatSize	default	`compact`, `default` ou `large` — dimensões da janela de chat
launcherSize	default	`small`, `default` ou `large` — tamanho do botão launcher
offsetBottom	20	Distância à margem inferior (px)
offsetSide	20	Distância à margem esquerda/direita (px)
borderRadius	20	Raio de borda da janela de chat (px)
zIndex	999999	z-index CSS para o contentor do widget
customCSS	—	CSS personalizado injetado no Shadow DOM do widget para estilização avançada
testMode	false	Marcar as conversas como teste (ocultas das vistas principais)

Configuração completa#

Configuração completajavascript

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  channelId: 'YOUR_CHANNEL_ID',
  position: 'bottom-right',        // 'bottom-right' | 'bottom-left'
  primaryColor: '#2563eb',
  language: 'de',                  // BCP-47; padrão: <html lang> (en = sinal fraco), 'browser' o ignora
  title: 'Help Center',
  greeting: 'How can we help?',
  placeholder: 'Ask anything...',
  logoUrl: 'https://yoursite.com/logo.png',
  avatarUrl: 'https://yoursite.com/avatar.png',
  quickQuestions: [
    'How do I get started?',
    'What are the pricing plans?',
    'How do I contact support?'
  ],
  testMode: false,
  localStorageKey: 'myapp_user_id', // ler automaticamente o userId de localStorage (GTM / no-code)
  chatSize: 'default',              // 'compact' | 'default' | 'large'
  offsetBottom: 20,                 // distância ao fundo (px)
  identity: {                      // opcional: definir no init se o usuário já for conhecido
    email: 'user@example.com',
    name: 'John Doe',
    userId: 'usr_123',
    properties: {                  // propriedades de contato personalizadas
      account_type: 'enterprise',
      region: 'eu-west'
    }
  }
});

A maioria das configurações (cor, logotipo, saudação, perguntas rápidas) é gerenciada no dashboard de Channels. O widget obtém esses valores no momento do carregamento — você só precisa do par agentId/channelId do código de incorporação.