Configuração de Widgets

Guia completo para configurar widgets de Estatística, Gráfico e Tabela com todas as opções disponíveis

Aprenda como configurar cada tipo de widget com explicações detalhadas de cada opção.

Criando Widgets

1. Navegue até o painel personalizado
2. Clique em “Gerenciar Widgets” e depois em “Criar Novo Widget”
3. Selecione o tipo de widget
4. Siga o assistente de 2-3 etapas
5. Salve e adicione ao painel

Widgets de Estatística

Exibição de métrica única com comparação opcional e gráfico de tendência.

Etapa 1: Básico

Nome do Widget

• Identificador interno para lista de widgets
• Não exibido no painel
• Exemplo: “Total de Chamadas Deste Mês”

Tabela de Dados

• Escolha a fonte de dados: calls, leads, campaigns, assistants, phone_numbers, sms
• Determina as colunas disponíveis

Agregação

• COUNT - Número total de registros (nenhuma coluna necessária)
• SUM - Soma de valores (requer seleção de coluna)
• AVG - Média de valores (requer seleção de coluna)
• MAX - Valor máximo (requer seleção de coluna)
• MIN - Valor mínimo (requer seleção de coluna)

Coluna (se SUM/AVG/MAX/MIN selecionado)

• Selecione a coluna numérica para agregar
• Exemplo: duration para duração média de chamada
• Não necessário para COUNT

Etapa 2: Exibição e Filtros

Rótulo (obrigatório)

• Título principal mostrado no widget
• Exemplo: “Total de Chamadas”

Descrição

• Texto opcional abaixo do valor
• Oculto se comparação habilitada
• Exemplo: “Chamadas feitas este mês”

Cor

• primary (azul), success (verde), warning (amarelo), danger (vermelho), info (ciano), gray (cinza)
• Escolha baseado no tipo de métrica (verde para positivo, vermelho para negativo)

Mostrar Mini Gráfico

• Exibe pequeno gráfico de linha mostrando tendência diária
• Usa o mesmo intervalo de datas da estatística

Comparar com Período Anterior

• Mostra mudança percentual do período anterior
• Exemplo: Últimos 7 dias vs 7 dias anteriores
• Exibe “+15%” ou “-8%” com seta para cima/baixo
• Substitui o campo de descrição

Intervalo de Datas

• Filtrar por data de criação
• Opções: Hoje, 1, 7, 14, 30, 60, 90, 180, 365 dias

Condições (opcional)

• Adicione filtros para restringir dados
• Múltiplas condições combinadas com AND
• Veja a seção Filtrando Dados

Exemplos

Total de Chamadas

Agregação: COUNT
Tabela: calls
Rótulo: "Total de Chamadas"
Descrição: "Últimos 30 dias"
Cor: primary
Intervalo de Datas: 30 dias

Duração Média de Chamadas

Agregação: AVG
Tabela: calls
Coluna: duration
Rótulo: "Duração Média"
Cor: info
Mostrar Mini Gráfico: Sim
Intervalo de Datas: 30 dias

Agendamentos Bem-sucedidos

Agregação: COUNT
Tabela: calls
Rótulo: "Agendamentos Reservados"
Cor: success
Comparar: Sim
Intervalo de Datas: 7 dias
Condições:
  - status = completed
  - evaluation.appointment_booked = true

Widgets de Gráfico

Visualize tendências com 8 tipos de gráficos.

Etapa 1: Básico

Igual aos widgets de Estatística, mais:

Tipo de Gráfico

• line - Tendências ao longo do tempo
• bar - Compare categorias ou períodos de tempo
• area - Gráfico de tendência preenchido
• pie - Proporções (requer Agrupar Por)
• donut - Pizza com buraco central (requer Agrupar Por)
• polarArea - Circular com raio variável (requer Agrupar Por)
• radar - Comparação multi-eixo
• radialBar - Indicador de progresso único

Etapa 2: Exibição e Filtros

Rótulo (obrigatório)

• Título do gráfico

Descrição

• Texto de subtítulo opcional abaixo do gráfico
• Exemplo: “Desempenho dos últimos 30 dias”

Cor

• Cor primária do gráfico
• Para pizza/donut, usa paleta multi-cor (azul, verde, laranja, vermelho, roxo, rosa)

Intervalo de Datas

• Igual às estatísticas

Agrupar Por OU Agrupar Por Período (mutuamente exclusivos)

Agrupar Por - Agrupamento categórico

• Agrupar dados por valores de coluna
• Exemplos: Status, Id da Campanha, Nome do Assistente
• Obrigatório para gráficos pizza/donut/polarArea
• Opcional para gráficos barra/radar
• Não pode usar com Agrupar Por Período

Agrupar Por Período - Agrupamento baseado em tempo

• Agrupar por intervalos de tempo
• Opções: hora, dia, semana, mês
• Usado para gráficos linha/barra/área
• Não pode usar com Agrupar Por

Condições

• Igual às estatísticas

Etapa 3: Avançado (Apenas Gráficos)

Mostrar Linhas de Grade (apenas linha/barra/área)

• Linhas horizontais/verticais de fundo
• Ajuda a ler valores exatos
• Padrão: Sim

Mostrar Legenda

• Rótulos codificados por cor
• Padrão: Sim para pizza/donut/polarArea, Não para outros
• Posição: Abaixo do gráfico

Mostrar Dicas

• Pop-ups ao passar mouse com valores exatos
• Padrão: Sim (recomendado)

Mostrar Rótulos de Dados

• Valores exibidos diretamente nos elementos do gráfico
• Padrão: Sim para pizza/donut/polarArea, Não para outros
• Pode poluir gráficos linha/barra

Mostrar Barra de Ferramentas (apenas linha/barra/área)

• Controles de zoom e download
• Padrão: Não

Curva da Linha (apenas linha/área)

• smooth - Curvas arredondadas (padrão, visualmente atraente)
• straight - Linhas diretas (preciso)
• stepline - Degraus (bom para eventos discretos)

Largura da Linha (apenas linha/barra/área)

• Espessura em pixels (1-10)
• Padrão: 2px

Altura do Gráfico

• Espaço vertical em pixels (200-800)
• Padrão: 300px
• Gráficos mais altos melhores para mais pontos de dados

Habilitar Gradiente (apenas radialBar)

• Efeito de gradiente de cor
• Padrão: Não

Cor do Gradiente (se gradiente habilitado)

• Cor final para gradiente
• Padrão: Verde (#10b981)

Guia de Tipos de Gráfico

Gráfico de Linha

• Use para: Tendências diárias/semanais, dados contínuos
• Requer: Agrupar Por Período
• Exemplo: Chamadas por dia nos últimos 30 dias

Gráfico de Barras

• Use para: Comparação de categoria, períodos de tempo
• Pode usar: Agrupar Por (categorias) OU Agrupar Por Período (tempo)
• Exemplo: Chamadas por campanha, distribuição por hora

Gráfico de Área

• Use para: Igual à linha, enfatiza volume
• Requer: Agrupar Por Período
• Exemplo: Tendência de volume de chamadas

Gráfico de Pizza/Donut

• Use para: Proporções, porcentagens
• Requer: Agrupar Por (NÃO Agrupar Por Período)
• Exemplo: Distribuição de status de chamadas

Área Polar

• Use para: Como pizza mas mostra magnitude via raio
• Requer: Agrupar Por
• Exemplo: Contribuição de campanha

Gráfico Radar

• Use para: Comparação multi-variável
• Requer: Agrupar Por
• Exemplo: Desempenho entre métricas

Barra Radial

• Use para: Porcentagem/progresso único
• Não usa: Agrupar Por ou Agrupar Por Período
• Exemplo: % de conclusão de meta

Exemplos

Volume Diário de Chamadas (Linha)

Tabela: calls
Agregação: COUNT
Tipo de Gráfico: line
Rótulo: "Chamadas Diárias"
Agrupar Por Período: dia
Mostrar Grade: Sim
Curva de Traçado: smooth
Intervalo de Datas: 30 dias

Distribuição de Status (Pizza)

Tabela: calls
Agregação: COUNT
Tipo de Gráfico: pie
Rótulo: "Status de Chamadas"
Agrupar Por: status
Mostrar Legenda: Sim
Mostrar Rótulos de Dados: Sim
Intervalo de Datas: 7 dias

Padrão por Hora (Barras)

Tabela: calls
Agregação: COUNT
Tipo de Gráfico: bar
Rótulo: "Chamadas Por Hora"
Agrupar Por Período: hora
Intervalo de Datas: 7 dias

Comparação de Campanhas (Barras)

Tabela: calls
Agregação: COUNT
Tipo de Gráfico: bar
Rótulo: "Chamadas Por Campanha"
Agrupar Por: campaign.name
Intervalo de Datas: 30 dias

Widgets de Tabela

Exiba registros detalhados com colunas personalizadas.

Etapa 1: Básico

Tabela de Dados

• Escolha a fonte: calls, leads, campaigns, assistants, phone_numbers, sms

Filtro de Campanha (apenas tabela leads)

• Selecione campanha para:
  • Filtrar tabela para essa campanha
  • Habilitar colunas de variáveis personalizadas
• Opcional

Filtro de Assistente (apenas tabela calls)

• Selecione assistente para:
  • Filtrar tabela para esse assistente
  • Habilitar colunas de campos de avaliação
• Opcional

Seleção de Colunas

• Colunas básicas: Id, Status, Created At, etc.
• Colunas de relacionamento: Assistant Name, Campaign Name
• Campos de avaliação: evaluation. (se assistente selecionado)
• Variáveis de lead: variables. (se campanha selecionada)
• Padrão se nenhum selecionado: Id, Status, Created At

Etapa 2: Exibição e Filtros

Rótulo (obrigatório)

• Título da tabela

Descrição

• Subtítulo opcional

Intervalo de Datas

• Igual a estatísticas/gráficos

Ordenar Por

• Coluna de ordenação padrão
• Apenas colunas simples (não relacionamentos)
• Padrão: created_at

Direção da Ordenação

• desc (mais recente primeiro) - padrão
• asc (mais antigo primeiro)

Linhas Por Página

• Número de linhas a exibir (1-100)
• Padrão: 10

Condições

• Igual a estatísticas/gráficos

Recursos Interativos

Linhas Clicáveis

• As linhas da tabela são clicáveis
• Automaticamente vincula à página de detalhes/edição do registro
• Funciona para: Calls, Leads, Campaigns, Assistants

Filtro de Data Dinâmico

• Altere o intervalo de datas diretamente no widget
• Substitui o intervalo de datas padrão configurado
• Útil para explorar diferentes períodos de tempo

Filtro de Status

• Menu suspenso de seleção múltipla para filtrar por status
• Disponível para: Calls, Leads, Campaigns, Assistants, SMS
• Selecione múltiplos status de uma vez

Exibição de Texto

• Texto longo automaticamente truncado em 50 caracteres
• Passe o mouse sobre texto truncado mostra conteúdo completo em dica

Tipos de Coluna

Colunas de Número de Telefone

• Formato internacional ([phone])
• Prefixo de bandeira do país
• Exemplos: client_phone_number, phone_number

Colunas de Status

• Emblemas coloridos
• Exemplos: campo status em qualquer tabela

Colunas de Data

• Formato “3 horas atrás”
• Passe o mouse mostra data/hora completa
• Exemplos: created_at, updated_at

Colunas de Avaliação (tabela calls com assistente)

• Campos booleanos: marca de verificação ou X com emblema verde/vermelho
• Campos não-booleanos: valor com emblema cinza
• Passe o mouse mostra descrição do campo
• Formato: evaluation.

Colunas de Variáveis (tabela leads com campanha)

• Dados personalizados de lead
• Formato: variables.
• Exemplos: customer_name, company

Colunas de Relacionamento

• Acesse dados relacionados
• Exemplos: Assistant Name, Campaign Name
• Não pode ordenar por estas

Exemplos

Chamadas Recentes

Tabela: calls
Colunas:
  - Client Phone Number
  - Assistant Name
  - Duration
  - Status
  - Created At
Ordenar: Created At desc
Linhas: 25
Intervalo de Datas: 7 dias

Agendamentos Bem-sucedidos

Tabela: calls
Assistente: [Selecione para carregar campos]
Colunas:
  - Client Phone Number
  - Assistant Name
  - evaluation.appointment_booked
  - Created At
Ordenar: Created At desc
Linhas: 50
Intervalo de Datas: 30 dias
Condições:
  - Status = completed
  - Coluna: Extracted Variables
    Nome da Variável Extraída: Custom variable
    Nome da Variável Personalizada: appointment_booked
    Operador: =
    Valor da Variável: true

Filtrando Dados

Todos os widgets suportam condições para filtrar dados.

Operadores

• = - Igual
• != - Diferente
• > - Maior que
• >= - Maior ou igual
• < - Menor que
• <= - Menor ou igual
• like - Contém texto
• in - Um de (separado por vírgula)
• not in - Não é um de
• is null - Sem valor
• is not null - Tem valor

Filtragem Básica

Filtro de Status

Coluna: Status
Operador: =
Valor: completed

Filtro de Duração

Coluna: Duration
Operador: >
Valor: 60

Múltiplos Valores

Coluna: Status
Operador: in
Valor: completed,in-progress

Filtragem de Campo de Avaliação

Filtre por valores de avaliação pós-chamada.

Configuração:

1. Coluna: Extracted Variables
2. Nome da Variável Extraída: Status ou Custom variable
3. Se Custom variable: Digite o nome do campo em Custom Variable Name
4. Valor da Variável: true/false para booleanos, ou any + valor personalizado

Exemplo Booleano - Agendamento Reservado

Coluna: Extracted Variables
Nome da Variável Extraída: Custom variable
Nome da Variável Personalizada: appointment_booked
Operador: =
Valor da Variável: true

Exemplo Não-Booleano - Sentimento

Coluna: Extracted Variables
Nome da Variável Extraída: Custom variable
Nome da Variável Personalizada: sentiment
Operador: =
Valor da Variável: any
Valor Personalizado: positive

Verificar Se Campo Existe

Coluna: Extracted Variables
Nome da Variável Extraída: Custom variable
Nome da Variável Personalizada: interested
Operador: =
Valor da Variável: any

Múltiplas Condições

Condições combinadas com AND:

Filtrar para chamadas longas bem-sucedidas:
Condição 1:
  - Coluna: Status
  - Operador: =
  - Valor: completed

Condição 2:
  - Coluna: Duration
  - Operador: >
  - Valor: 120

Condição 3:
  - Coluna: Extracted Variables
  - Nome da Variável Extraída: Custom variable
  - Nome da Variável Personalizada: appointment_booked
  - Operador: =
  - Valor da Variável: true

Melhores Práticas

Nomenclatura de Widgets

Use nomes internos descritivos:

• ✅ “Chamadas de Vendas - Últimos 30 Dias”
• ✅ “Duração Média de Suporte”
• ❌ “Widget 1”

Intervalos de Datas

Combine intervalo ao caso de uso:

• Hoje: Monitoramento em tempo real
• 7 dias: Desempenho semanal
• 30 dias: Tendências mensais
• 90+ dias: Análise de longo prazo

Cores

Uso estratégico de cores:

• Verde (success): Métricas positivas
• Vermelho (danger): Métricas de alerta
• Azul (primary): Métricas neutras
• Amarelo (warning): Atenção necessária
• Cinza (info): Informação secundária

Desempenho

Mantenha painéis rápidos:

• Use filtros de intervalo de datas
• Limite widgets por painel a menos de 20
• Use COUNT quando possível (mais rápido)
• Evite intervalos de datas muito longos

Solução de Problemas

Widget mostra “Sem dados”

• Expanda o intervalo de datas
• Remova/ajuste filtros
• Verifique se a tabela tem registros

Campos de avaliação não aparecem

• Selecione assistente na configuração do widget
• Certifique-se de que o assistente tem esquema pós-chamada
• Verifique se os nomes dos campos correspondem

Gráfico mostra vazio

• Pizza/donut: Deve usar Agrupar Por (não Período)
• Linha/área: Deve usar Agrupar Por Período (não Categoria)
• Verifique se o intervalo de datas inclui dados

Tabela faltando colunas

• Colunas de relacionamento precisam de registros relacionados
• Colunas de avaliação precisam de seleção de assistente
• Colunas de variáveis precisam de seleção de campanha

Erro “Agrupar Por obrigatório”

• Gráficos pizza/donut/polarArea DEVEM ter Agrupar Por
• Não pode usar Agrupar Por Período com estes tipos de gráfico

Não pode ordenar por coluna

• Colunas de relacionamento (com .) não são ordenáveis
• Campos de avaliação não são ordenáveis
• Use colunas básicas para ordenação

Para criação de painel e gerenciamento de layout, veja Visão Geral de Painéis Personalizados.