Flutter

O canal "Mobile" permite incorporar o chat do bot em aplicativos Android e iOS feitos em Flutter. A integração é feita pelo SDK digitalcontact_bots_sdk, que exibe o chat como um widget nativo do aplicativo (sem WebView) e se conecta diretamente à plataforma.

Neste documento, abordaremos as opções de configuração do canal "Mobile" no painel e como incorporar o chat no seu aplicativo Flutter.

Configurações do canal

Dentro da aba “Canais”, selecione a opção “Mobile”. As configurações feitas nesta tela definem a aparência padrão do chat no aplicativo.

Usar configurações do Webchat

Usar configurações do Webchat: ao ativar, o chat no aplicativo passa a usar os mesmos estilos e configurações do canal "WebChat". Com essa opção ativada, não é necessário repetir as configurações abaixo.

Identificação

Título do bot: nome exibido no cabeçalho do chat (máximo de 28 caracteres).

Aparência

Ícone: imagem do bot exibida no cabeçalho do chat (deve ter 80x80 pixels).
Cor principal: define a cor do cabeçalho e do fundo das mensagens enviadas pelo cliente.
Cor secundária: define a cor do fundo das mensagens enviadas pelo bot.
Cor do texto principal: define a cor do texto das mensagens enviadas pelo cliente e do cabeçalho.
Cor do texto secundário: define a cor do texto das mensagens enviadas pelo bot.
Exibir mais opções de cores: libera a personalização de cores adicionais da interface. Ao ativar, aparecem os campos abaixo:
- Cor de fundo das sugestões: cor de fundo dos botões de sugestão.
- Cor do texto das sugestões: cor do texto e da borda dos botões de sugestão.
- Cor de fundo do card: cor de fundo do balão do card e do carrossel.
- Cor do texto do card: cor do texto do balão do card e do carrossel.
- Cor de fundo dos botões do card: cor de fundo dos botões do card e do carrossel.
- Cor do texto dos botões do card: cor do texto e da borda dos botões do card e do carrossel.
- Cor do hiperlink: cor dos links enviados nas mensagens.

Configurações

Notificações sonoras: reproduz um som a cada nova mensagem.
Desabilitar anexos: impede que o cliente envie arquivos e documentos (oculta o clipe de anexos).
Redefinir configurações: restaura as configurações padrão do canal.
Salvar: aplica e salva todas as alterações feitas.

💡 Dica: as configurações do painel são carregadas pelo aplicativo sempre que o chat é aberto. Ao alterar e salvar algo aqui, não é necessário publicar uma nova versão do aplicativo.

Snippet de publicação

Na mesma tela, a seção Snippet de publicação mostra o código para incorporar o chat no aplicativo, já preenchido com o código do seu bot. Selecione a tecnologia Flutter e, se quiser ver todos os parâmetros disponíveis, ative a opção Visualizar versão customizada.

Requisitos

Flutter 3.44.9 ou superior.
Aplicativo Android ou iOS com acesso à internet.

Implementação Básica

Adicione a dependência no pubspec.yaml do seu projeto:

# pubspec.yaml
dependencies:
  digitalcontact_bots_sdk: ^0.2.0

Depois, rode flutter pub get.

Importe o pacote e use o ChatWidget:

import 'package:digitalcontact_bots_sdk/digitalcontact_bots_sdk.dart';

ChatWidget('65c11777776343f36b748f6e')

O ChatWidget cuida sozinho de toda a conexão: ele se conecta quando entra na tela e se desconecta quando sai dela. Abrir e fechar o chat fica a cargo do aplicativo. O chat não tem botão de fechar próprio, então basta exibir ou remover o widget:

class ChatScreen extends StatefulWidget {
  const ChatScreen({super.key});

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  bool _chatOpen = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Atendimento'),
        actions: [
          if (_chatOpen)
            IconButton(
              icon: const Icon(Icons.close),
              onPressed: () => setState(() => _chatOpen = false),
            ),
        ],
      ),
      body: _chatOpen
          ? ChatWidget('65c11777776343f36b748f6e')
          : const Center(child: Text('Toque no botão para abrir o chat.')),
      floatingActionButton: _chatOpen
          ? null
          : FloatingActionButton(
              onPressed: () => setState(() => _chatOpen = true),
              child: const Icon(Icons.chat_bubble),
            ),
    );
  }
}

Implementação completa (Opcional)

Caso queira passar informações específicas para o fluxo do bot ou personalizar o layout, use esta versão:

import 'package:digitalcontact_bots_sdk/digitalcontact_bots_sdk.dart';

ChatWidget(
  '65c11777776343f36b748f6e',
  options: ChatOptions(
    mustStartNewSession: false, // Força uma conversa nova ao abrir o chat

    // Variáveis da sessão
    sessionVariables: {
      'variavel_1': 'exemplo1',
      'variavel_2': 'exemplo2',
    },

    // Configurações de layout do chat
    layout: ChatLayout(
      botName: 'Assistente Virtual',       // Nome do bot
      botBgColor: '#2F2F2F',               // Cor de fundo da mensagem do bot
      botTextColor: '#FFFFFF',             // Cor do texto da mensagem do bot
      userBgColor: '#6A5A37',              // Cor de fundo da mensagem do usuário e do cabeçalho
      userTextColor: '#FFFFFF',            // Cor do texto da mensagem do usuário e do cabeçalho
      suggestionBgColor: '#FFFFFF',        // Cor de fundo dos botões de sugestão
      suggestionTextColor: '#4D70FF',      // Cor do texto e da borda dos botões de sugestão
      cardBgColor: '#F3F5F9',              // Cor de fundo do card e do carrossel
      cardTextColor: '#5A5D68',            // Cor do texto do card e do carrossel
      cardButtonBgColor: '#F3F5F9',        // Cor de fundo dos botões do card e do carrossel
      cardButtonTextColor: '#5A5D68',      // Cor do texto e da borda dos botões do card e do carrossel
      hyperlinkColor: '#4D70FF',           // Cor dos hiperlinks enviados nas mensagens
      hideHeader: false,                   // Esconde o cabeçalho do chat
      timeAlign: 'right',                  // Posição do horário na mensagem: 'left' ou 'right'
      inputPlaceholder: 'Digite algo...',  // Texto exibido no campo de mensagem
    ),
  ),
)

Funcionalidades Avançadas

1. Atribuição de Variáveis

Permite que o fluxo do bot já inicie com variáveis pré-estabelecidas, personalizando a experiência do usuário desde o primeiro contato.

Como usar:

ChatWidget(
  '65c11777776343f36b748f6e',
  options: const ChatOptions(
    sessionVariables: {
      'nome_usuario': 'João Silva',
      'cpf': '123.456.789-00',
      'email': 'joao@exemplo.com',
      'produto_interesse': 'Seguro Auto',
    },
  ),
)

Exemplo prático: Se o cliente já está logado no seu aplicativo, o bot pode começar a conversa sabendo o nome e o CPF dele, sem precisar perguntar de novo.

💡 Dica: as variáveis ficam disponíveis durante toda a conversa e podem ser utilizadas no fluxo do bot.

2. Personalização de Layout

Permite alterar as configurações visuais do chat diretamente no código, sobrescrevendo as configurações do painel administrativo. Só os parâmetros informados são sobrescritos; os demais continuam vindo do painel.

Como usar:

ChatWidget(
  '65c11777776343f36b748f6e',
  options: const ChatOptions(
    layout: ChatLayout(
      botName: 'Assistente Virtual',
      botBgColor: '2F2F2F',      // Fundo das mensagens do bot
      botTextColor: 'FFFFFF',    // Cor do texto do bot
      userBgColor: '6A5A37',     // Fundo das mensagens do usuário
      userTextColor: 'FFFFFF',   // Cor do texto do usuário
      hyperlinkColor: 'FF8C00',  // Cor dos hiperlinks
    ),
  ),
)

Parâmetros de layout disponíveis:

Os parâmetros são equivalentes aos do "WebChat", com os nomes no padrão do Dart (por exemplo, bot-bg-color no WebChat corresponde a botBgColor no Flutter).

Parâmetro	Equivalente no WebChat	O que altera	Se não for informado, usa
`botName`	`bot-name`	Nome exibido no cabeçalho	Título do bot
`botBgColor`	`bot-bg-color`	Cor de fundo das mensagens do bot	Cor secundária
`botTextColor`	`bot-text-color`	Cor do texto das mensagens do bot	Cor do texto secundário
`userBgColor`	`user-bg-color`	Cor de fundo das mensagens do usuário e do cabeçalho	Cor principal
`userTextColor`	`user-text-color`	Cor do texto das mensagens do usuário e do cabeçalho	Cor do texto principal
`suggestionBgColor`	`suggestion-bg-color`	Cor de fundo dos botões de sugestão	Cor de fundo das sugestões; sem ela, fundo transparente
`suggestionTextColor`	`suggestion-text-color`	Cor do texto e da borda dos botões de sugestão	Cor do texto das sugestões; sem ela, a cor de fundo das mensagens do usuário (`userBgColor` ou Cor principal)
`cardBgColor`	`card-bg-color`	Cor de fundo do card e do carrossel	Cor de fundo do card
`cardTextColor`	`card-text-color`	Cor do texto do card e do carrossel	Cor do texto do card
`cardButtonBgColor`	`card-button-bg-color`	Cor de fundo dos botões do card e do carrossel	Cor de fundo dos botões do card
`cardButtonTextColor`	`card-button-text-color`	Cor do texto e da borda dos botões do card e do carrossel	Cor do texto dos botões do card
`hyperlinkColor`	`hyperlink-color`	Cor dos hiperlinks enviados nas mensagens	Cor do hiperlink; sem ela, a cor do texto da mensagem
`hideHeader`	—	Com `true`, esconde o cabeçalho do chat (nome, ícone e botões de reinício e de configurações)	`false`
`timeAlign`	—	Posição do horário dentro da mensagem: `'left'` ou `'right'`	`'right'`
`inputPlaceholder`	—	Texto exibido no campo de mensagem enquanto está vazio	`Digite algo...`

💡 Dica: as cores devem ser informadas em hexadecimal no formato RRGGBB, com ou sem o # (ex: '#FF8C00' ou 'FF8C00'). O ícone do bot não pode ser alterado pelo código: ele sempre vem do painel.

Exemplo prático: Dois aplicativos de uma empresa que usam o mesmo bot, porém possuem identidades visuais diferentes, podem personalizar apenas o seu chat, sem modificar as configurações originais do painel.

3. Controle de Sessão

Por padrão, a conversa fica salva no aparelho: ao fechar e abrir o chat de novo, o cliente continua de onde parou e vê as mensagens anteriores. O parâmetro mustStartNewSession (false por padrão) muda esse comportamento.

Como usar:

// Sempre inicia uma conversa nova ao abrir o chat
ChatWidget(
  '65c11777776343f36b748f6e',
  options: const ChatOptions(mustStartNewSession: true),
)

// Continua a conversa salva no aparelho, se houver
ChatWidget(
  '65c11777776343f36b748f6e',
  options: const ChatOptions(mustStartNewSession: false),
)

💡 Dica: o cliente também pode reiniciar a conversa pelo botão de reinício no cabeçalho do chat.

4. Ambiente

O parâmetro env define em qual ambiente da plataforma o chat se conecta. Para o seu aplicativo em produção, basta omiti-lo.

Valor	Ambiente
`'production'`	Produção (padrão)
`'test'`	Homologação
`'dev'`	Desenvolvimento

Como usar:

ChatWidget(
  '65c11777776343f36b748f6e',
  env: 'test',
)

Recursos do chat no aplicativo

Além das configurações acima, o chat no aplicativo oferece:

Tamanho da fonte: pelo botão de configurações no cabeçalho, o cliente escolhe entre os tamanhos Normal, Grande e Extra grande. A escolha fica salva no aparelho. O chat também respeita o tamanho de fonte definido nas configurações do sistema do celular.
Acesso rápido: quando o Acesso Rápido está ativo no bot, a lista de atalhos é exibida pelo botão de menu ao lado do campo de mensagem.
Links: os links enviados nas mensagens são abertos fora do aplicativo (no navegador, no discador ou no aplicativo correspondente do celular).

Flutter

Configurações do canal​

Usar configurações do Webchat​

Identificação​

Aparência​

Configurações​

Snippet de publicação​

Requisitos​

Implementação Básica​

Implementação completa (Opcional)​

Funcionalidades Avançadas​

1. Atribuição de Variáveis​

2. Personalização de Layout​

3. Controle de Sessão​

4. Ambiente​

Recursos do chat no aplicativo​

Configurações do canal

Usar configurações do Webchat

Identificação

Aparência

Configurações

Snippet de publicação

Requisitos

Implementação Básica

Implementação completa (Opcional)

Funcionalidades Avançadas

1. Atribuição de Variáveis

2. Personalização de Layout

3. Controle de Sessão

4. Ambiente

Recursos do chat no aplicativo