Configuração do Widget

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

Criando Widgets

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

Widgets de Estatística

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

Etapa 1: Básicos

Nome do Widget

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

Tabela de Dados

Escolha a fonte de dados: chamadas, leads, campanhas, assistentes, números_de_telefone, sms
Determina as colunas disponíveis

Agregação

COUNT - Número total de registros (nenhuma coluna necessária)
SUM - Soma dos valores (requer seleção de coluna)
AVG - Média dos 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 a duração média da chamada
Não é necessário para COUNT

Etapa 2: Exibição e Filtros

Rótulo (obrigatório)

Cabeçalho principal exibido no widget
Exemplo: “Total de Chamadas”

Descrição

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

Cor

primária (azul), sucesso (verde), aviso (amarelo), perigo (vermelho), info (ciano), cinza
Escolha com base no tipo de métrica (verde para positivo, vermelho para negativo)

Mostrar Mini Gráfico

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

Comparar com o Período Anterior

Mostra a variação percentual em relação ao período anterior
Exemplo: Últimos 7 dias vs últimos 7 dias
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 os dados
Múltiplas condições combinadas com AND
Veja a seção Filtrando Dados

Exemplos

Total de Chamadas

Agregação: COUNT
Tabela: chamadas
Rótulo: "Total de Chamadas"
Descrição: "Últimos 30 dias"
Cor: primária
Intervalo de Datas: 30 dias

Duração Média da Chamada

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

Compromissos Bem-Sucedidos

Agregação: COUNT
Tabela: chamadas
Rótulo: "Compromissos Agendados"
Cor: sucesso
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ásicos

Igual aos widgets de Estatística, além de: Tipo de Gráfico

line - Tendências ao longo do tempo
bar - Comparar categorias ou períodos de tempo
area - Gráfico de tendência preenchido
pie - Proporções (requer Agrupar Por)
donut - Gráfico de 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 opcional abaixo do gráfico
Exemplo: “Desempenho dos últimos 30 dias”

Cor

Cor primária do gráfico
Para pizza/donut, usa paleta de múltiplas cores (azul, verde, laranja, vermelho, roxo, rosa)

Intervalo de Datas

Igual aos stats

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 de pizza/donut/polarArea
Opcional para gráficos de 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 de linha/barra/área
Não pode usar com Agrupar Por

Condições

Igual aos stats

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 cores
Padrão: Sim para pizza/donut/polarArea, Não para outros
Posição: Parte inferior do gráfico

Mostrar Tooltips

Pop-ups ao passar o 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 de 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 (precisas)
stepline - Passo a passo (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 são 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 o gradiente
Padrão: Verde (#10b981)

Calcular como Percentagem (apenas radialBar)

Calcula automaticamente a porcentagem a partir das condições
Fórmula: (condições atendidas / total) × 100
Requer: Pelo menos uma condição deve ser adicionada primeiro
Exemplo: Condição “status = completed” calcula leads concluídos / leads totais × 100
Aparece após adicionar condições na Etapa 2

Mostrar Rodapé com Números (apenas radialBar)

Exibe “X alcançado / Y total” abaixo do gráfico radial
Visível apenas quando “Calcular como Percentagem” está habilitado
Mostra números exatos ao lado da porcentagem
Exemplo de rodapé: “150 alcançados / 1.000 totais”

Ângulo de Início (apenas radialBar)

Onde o arco começa em graus (-360° a 360°)
Padrão: -140°
Valores comuns: -140° (padrão), -90° (semicirculo esquerdo), 0° (parte inferior)

Ângulo de Fim (apenas radialBar)

Onde o arco termina em graus (-360° a 360°)
Padrão: 130°
Validação: O arco total (fim - início) não pode exceder 360°
Valores comuns: 130° (padrão), 90° (semicirculo direito), 180° (semicirculo), 270° (três quartos)

Tamanho Oco (apenas radialBar)

Tamanho do círculo interno como porcentagem (0-100%)
Padrão: 60%
Valor mais alto = anel mais fino, valor mais baixo = anel mais grosso

Array de Traços (apenas radialBar)

Espaçamento para padrão de anel tracejado (0-50)
Padrão: 10
0 = linha sólida, números mais altos = mais espaçamento entre os traços

Guia de Tipos de Gráfico

Gráfico de Linha

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

Gráfico de Barra

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

Gráfico de Área

Use para: Igual ao de 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 do status das chamadas

Área Polar

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

Gráfico Radar

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

Barra Radial

Use para: Indicadores de progresso circulares mostrando porcentagens (0-100%)
Não usa: Agrupar Por ou Agrupar Por Período
Cálculo de Porcentagem: Adicione condições e, em seguida, habilite “Calcular como Percentagem” para calcular automaticamente (condições atendidas / total) × 100
Exemplo: Taxa de conversão de leads (15%), sucesso na entrega de SMS (82,8%), conclusão de metas

Exemplos

Volume Diário de Chamadas (Linha)

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

Distribuição de Status (Pizza)

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

Padrão Horário (Barra)

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

Comparação de Campanhas (Barra)

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

Taxa de Conversão de Leads (Barra Radial com Porcentagem)

Tabela: leads
Agregação: COUNT
Tipo de Gráfico: radialBar
Rótulo: "Taxa de Conversão"
Descrição: "Leads concluídos"
Cor: sucesso
Intervalo de Datas: 30 dias

Etapa 2 - Condições:
  Campo: status
  Operador: =
  Valor: completed

Etapa 2 - Porcentagem (aparece após adicionar condição):
  Calcular como Percentagem: Sim
  Mostrar Rodapé com Números: Sim

Etapa 3 - Avançado (opcional):
  Ângulo de Início: -140°
  Ângulo de Fim: 130°
  Tamanho Oco: 60%
  Array de Traços: 10

Como funciona:
  - Conta leads onde status = completed (por exemplo, 150)
  - Conta leads totais (por exemplo, 1.000)
  - Calcula: 150 / 1.000 × 100 = 15%
  - Exibe: "15%" com rodapé "150 alcançados / 1.000 totais"

Sucesso na Entrega de SMS (Barra Radial com Gradiente)

Tabela: sms
Agregação: COUNT
Tipo de Gráfico: radialBar
Rótulo: "SMS Entregues"
Descrição: "Taxa de sucesso na entrega"
Cor: info
Intervalo de Datas: 7 dias

Etapa 2 - Condições:
  Campo: status
  Operador: =
  Valor: delivered

Etapa 2 - Porcentagem:
  Calcular como Percentagem: Sim
  Mostrar Rodapé com Números: Sim

Etapa 3 - Avançado:
  Habilitar Gradiente: Sim
  Gradiente Para Cor: #10b981 (verde)
  Ângulo de Início: -90°
  Ângulo de Fim: 270° (cria um semicirculo de três quartos)
  Tamanho Oco: 55%
  Array de Traços: 12

Resultado: "82,8%" com rodapé "120 alcançados / 145 totais"
Visual: Gradiente de azul para verde, semicirculo de três quartos

Chamadas de Qualidade (Múltiplas Condições)

Tabela: chamadas
Agregação: COUNT
Tipo de Gráfico: radialBar
Rótulo: "Chamadas de Qualidade"
Descrição: "Chamadas de saída longas concluídas"
Cor: sucesso
Intervalo de Datas: 30 dias

Etapa 2 - Condições (todas devem ser verdadeiras):
  Condição 1:
    Campo: status
    Operador: =
    Valor: completed

  Condição 2:
    Campo: duration
    Operador: >
    Valor: 180

  Condição 3:
    Campo: type
    Operador: =
    Valor: outbound

Etapa 2 - Porcentagem:
  Calcular como Percentagem: Sim
  Mostrar Rodapé com Números: Sim

Etapa 3 - Avançado:
  Habilitar Gradiente: Sim
  Gradiente Para Cor: #3b82f6
  Array de Traços: 8

Como funciona:
  - Conta chamadas que atendem a TODAS as três condições (por exemplo, 45)
  - Conta chamadas totais (por exemplo, 100)
  - Calcula: 45 / 100 × 100 = 45%
  - Exibe: "45%" com rodapé "45 alcançados / 100 totais"

Leads Qualificados (Estilo Semicirculo)

Tabela: leads
Agregação: COUNT
Tipo de Gráfico: radialBar
Rótulo: "Leads Qualificados"
Cor: info
Intervalo de Datas: 30 dias

Etapa 2 - Condições:
  Campo: status
  Operador: =
  Valor: scheduled

Etapa 2 - Porcentagem:
  Calcular como Percentagem: Sim
  Mostrar Rodapé com Números: Sim

Etapa 3 - Avançado (design de semicirculo):
  Habilitar Gradiente: Sim
  Gradiente Para Cor: #10b981
  Ângulo de Início: -90°
  Ângulo de Fim: 90° (cria um semicirculo perfeito)
  Tamanho Oco: 70% (anel mais fino)
  Array de Traços: 0 (linha sólida)

Resultado: "2,2%" com rodapé "4.841 alcançados / 220.073 totais"
Visual: Semicirculo limpo da esquerda para a direita, gradiente de azul para verde

Widgets de Tabela

Exiba registros detalhados com colunas personalizadas.

Etapa 1: Básicos

Tabela de Dados

Escolha a fonte: chamadas, leads, campanhas, assistentes, números_de_telefone, sms

Filtro de Campanha (apenas tabela de leads)

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

Filtro de Assistente (apenas tabela de chamadas)

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

Seleção de Colunas

Colunas básicas: Id, Status, Criado Em, etc.
Colunas de relacionamento: Nome do Assistente, Nome da Campanha
Campos de avaliação: evaluation. (se assistente selecionado)
Variáveis de leads: variables. (se campanha selecionada)
Padrão se nenhuma selecionada: Id, Status, Criado Em

Etapa 2: Exibição e Filtros

Rótulo (obrigatório)

Cabeçalho da tabela

Descrição

Subtítulo opcional

Intervalo de Datas

Igual aos stats/gráficos

Ordenar Por

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

Direção de Ordenação

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

Linhas Por Página

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

Condições

Igual aos stats/gráficos

Recursos Interativos

Linhas Clicáveis

As linhas da tabela são clicáveis
Link automático para a página de detalhes/edição do registro
Funciona para: Chamadas, Leads, Campanhas, Assistentes

Filtro de Data Ao Vivo

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

Dropdown de múltipla seleção para filtrar por status
Disponível para: Chamadas, Leads, Campanhas, Assistentes, SMS
Selecione múltiplos status ao mesmo tempo

Exibição de Texto

Texto longo é automaticamente truncado em 50 caracteres
Passar o mouse sobre o texto truncado mostra o conteúdo completo em tooltip

Tipos de Colunas

Colunas de Número de Telefone

Formato internacional (+1 555 123 4567)
Prefixo de bandeira do país
Exemplos: client_phone_number, phone_number

Colunas de Status

Distintivos coloridos
Exemplos: campo de status em qualquer tabela

Colunas de Data

Formato “há 3 horas”
Passar o mouse mostra a data e hora completas
Exemplos: created_at, updated_at

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

Campos booleanos: marca de verificação ou X com distintivo verde/vermelho
Campos não booleanos: valor com distintivo cinza
Passar o mouse mostra a descrição do campo
Formato: evaluation.

Colunas de Variáveis (tabela de leads com campanha)

Dados personalizados de leads
Formato: variables.
Exemplos: customer_name, company

Colunas de Relacionamento

Acesse dados relacionados
Exemplos: Nome do Assistente, Nome da Campanha
Não pode ser ordenado por esses

Exemplos

Chamadas Recentes

Tabela: chamadas
Colunas:
  - Número de Telefone do Cliente
  - Nome do Assistente
  - Duração
  - Status
  - Criado Em
Ordenar: Criado Em desc
Linhas: 25
Intervalo de Datas: 7 dias

Compromissos Bem-Sucedidos

Tabela: chamadas
Assistente: [Selecionar para carregar campos]
Colunas:
  - Número de Telefone do Cliente
  - Nome do Assistente
  - evaluation.appointment_booked
  - Criado Em
Ordenar: Criado Em desc
Linhas: 50
Intervalo de Datas: 30 dias
Condições:
  - Status = completed
  - Coluna: Variáveis Extraídas
    Nome da Variável Extraída: Variável personalizada
    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
!= - Não igual
> - Maior que
>= - Maior ou igual
< - Menor que
<= - Menor ou igual
like - Contém texto
in - Um dos (separados por vírgula)
not in - Não um dos
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: Duração
Operador: >
Valor: 60

Múltiplos Valores

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

Filtragem de Campo de Avaliação

Filtrar por valores de avaliação pós-chamada. Configuração:

Coluna: Variáveis Extraídas
Nome da Variável Extraída: Status ou Variável personalizada
Se Variável personalizada: Insira o nome do campo em Nome da Variável Personalizada
Valor da Variável: true/false para booleanos, ou qualquer + valor personalizado

Exemplo Booleano - Compromisso Agendado

Coluna: Variáveis Extraídas
Nome da Variável Extraída: Variável personalizada
Nome da Variável Personalizada: appointment_booked
Operador: =
Valor da Variável: true

Exemplo Não-Booleano - Sentimento

Coluna: Variáveis Extraídas
Nome da Variável Extraída: Variável personalizada
Nome da Variável Personalizada: sentiment
Operador: =
Valor da Variável: qualquer
Valor Personalizado: positivo

Verificar se o Campo Existe

Coluna: Variáveis Extraídas
Nome da Variável Extraída: Variável personalizada
Nome da Variável Personalizada: interested
Operador: =
Valor da Variável: qualquer

Múltiplas Condições

Condições combinadas com AND:

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

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

Condição 3:
  - Coluna: Variáveis Extraídas
  - Nome da Variável Extraída: Variável personalizada
  - Nome da Variável Personalizada: appointment_booked
  - Operador: =
  - Valor da Variável: true

Melhores Práticas

Nomeação de Widgets

Use nomes internos descritivos:

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

Intervalos de Datas

Combine o intervalo com o 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 (sucesso): Métricas positivas
Vermelho (perigo): Métricas de alerta
Azul (primária): Métricas neutras
Amarelo (aviso): Atenção necessária
Cinza (info): Informação secundária

Desempenho

Mantenha os 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 o assistente na configuração do widget
Certifique-se de que o assistente tenha esquema pós-chamada
Verifique se os nomes dos campos correspondem

Gráfico aparece 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 sem 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 necessário”

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

Não é possível 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 painéis e gerenciamento de layout, veja Visão Geral dos Painéis Personalizados.

​Criando Widgets

​Widgets de Estatística

​Etapa 1: Básicos

​Etapa 2: Exibição e Filtros

​Exemplos

​Widgets de Gráfico

​Etapa 1: Básicos

​Etapa 2: Exibição e Filtros

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

​Guia de Tipos de Gráfico

​Exemplos

​Widgets de Tabela

​Etapa 1: Básicos

​Etapa 2: Exibição e Filtros

​Recursos Interativos

​Tipos de Colunas

​Exemplos

​Filtrando Dados

​Operadores

​Filtragem Básica

​Filtragem de Campo de Avaliação

​Múltiplas Condições

​Melhores Práticas

​Nomeação de Widgets

​Intervalos de Datas

​Cores

​Desempenho

​Solução de Problemas

Criando Widgets

Widgets de Estatística

Etapa 1: Básicos

Etapa 2: Exibição e Filtros

Exemplos

Widgets de Gráfico

Etapa 1: Básicos

Etapa 2: Exibição e Filtros

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

Guia de Tipos de Gráfico

Exemplos

Widgets de Tabela

Etapa 1: Básicos

Etapa 2: Exibição e Filtros

Recursos Interativos

Tipos de Colunas

Exemplos

Filtrando Dados

Operadores

Filtragem Básica

Filtragem de Campo de Avaliação

Múltiplas Condições

Melhores Práticas

Nomeação de Widgets

Intervalos de Datas

Cores

Desempenho

Solução de Problemas