Configuração de Widgets

​

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

​

Etapa 1: Básico

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

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

• 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)

• 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

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

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

• 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)

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

• 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

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

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

​

Exemplos

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

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

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

​

Etapa 1: Básico

• 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

• Título do gráfico

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

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

• Igual às estatísticas

• 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 intervalos de tempo
• Opções: hora, dia, semana, mês
• Usado para gráficos linha/barra/área
• Não pode usar com Agrupar Por

• Igual às estatísticas

​

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

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

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

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

• 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

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

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

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

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

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

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

​

Guia de Tipos de Gráfico

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

• 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

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

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

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

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

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

​

Exemplos

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

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

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

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

​

Etapa 1: Básico

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

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

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

• 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

• Título da tabela

• Subtítulo opcional

• Igual a estatísticas/gráficos

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

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

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

• Igual a estatísticas/gráficos

​

Recursos Interativos

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

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

• 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

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

​

Tipos de Coluna

• Formato internacional (+55 11 98765 4321)
• Prefixo de bandeira do país
• Exemplos: client_phone_number, phone_number

• Emblemas coloridos
• Exemplos: campo status em qualquer tabela

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

• 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.

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

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

​

Exemplos

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

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

​

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

Coluna: Status
Operador: =
Valor: completed

Coluna: Duration
Operador: >
Valor: 60

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

​

Filtragem de Campo de Avaliaçã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

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

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

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

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

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

​

Intervalos de Datas

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

​

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

• 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

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

• 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

• 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

• 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

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

• 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