Widgets - Como exibir a pesquisa no meu site?

O que é o Widget da Track CXM?

O Widget é a interface que permite adicionar as pesquisas criadas na Track CXM em ambientes como seu site, blog, app e outras partes do seu ambiente online.

O lado positivo do Widget é que ele permite coletar o feedback do cliente no calor da experiência, ao exibir a pesquisa no conclusão de uma etapa ou configuração é possível coletar dados no ato, o que torna os feedbacks mais ricos e completos.

Os Widgets da Track CXM podem ser utilizados nos modelos Box ou Embed visando se adaptar melhor ao layout da página em que será adicionado.

​Pontos importantes sobre o Widget:

Como criar um Widget?

Para criar um Widget acesse o menu de Widgets nas configurações e clique no botão “Novo Widget”:

Na sessão de configuração de Widget você terá quatro etapas, sendo elas:

• Ativação: Configurações de nome, ativação e destino do Widget.

• Configuração: Configurações das regras de exibição e recorrência.

• Design: Configurações do visual do Widget.

• Código: Retirada do código e acompanhamento do status de implementação.
  ​

Ativação

Na etapa de ativação, primeiramente defina o status inicial desejado para o Widget (ativado ou desativado) e o nome desejado para identificação:
​

Após definir o status e nome, será necessário adicionar o endereço em que deseja exibir o Widget e qual pesquisa já criada será exibida através dele.

Configuração de URLs para Exibição de Pesquisas no Widget

Nosso widget permite a instalação de um único script (por widget) e exibe pesquisas com base no domínio em que está carregado.

Para garantir que cada pesquisa seja exibida corretamente, é importante entender como o sistema identifica os domínios.

Ao configurar a URL, o sistema verifica se o domínio da página contém a string definida na configuração da pesquisa. Isso significa que:

• Se uma pesquisa estiver configurada para o domínio Track.co, ela será exibida em qualquer página cujo endereço contenha "Track.co", incluindo subdomínios como ABC.track.co.
• Para diferenciar pesquisas por subdomínio, é necessário configurar cada pesquisa com um domínio exclusivo e utilizar widgets diferentes.

Exemplo de configuração correta:

• Para exibir uma pesquisa apenas em ABC.track.co, utilize ABC.track.co na configuração e associe a um widget específico.
• Para exibir uma pesquisa em todo o domínio principal e seus subdomínios, utilize Track.co.

IMPORTANTE: 

Caso você deseje utilizar o mesmo código para pesquisas e URLs diferentes basta clicar no botão “Adicionar” e mais uma sessão de URL e pesquisa será adicionada!

Após definir os endereços (URLs) e pesquisas, siga para a definição das regras de ativação do Widget:

​

As opções de ativação disponíveis são:
​

• Ativar e desativar manualmente o Widget:

Ao definir essa opção o Widget se manterá ativo ou desativo e somente terá seu status alterado por meio de intervenção manual do usuário.

• Desativar automaticamente quando:

Ao definir essa opção o Widget terá seu status alterado automaticamente seguindo as regras selecionadas, na configuração você pode definir somente uma ou ambas condições, sendo elas:

• Encerrar coleta após quantidade de respostas: O Widget será desativado após atingir a meta de coleta de respostas definidas.

• Definir prazo de ativação do Widget: O Widget será desativado logo que o período de ativação definido for encerrado.

Clique em “Salvar e continuar” no canto superior direito da tela para seguir para a próxima sessão:

Configurações

Na etapa de configuração você irá definir o comportamento do seu novo Widget, sendo as configurações separadas em visualização e recorrência.
​

As opções de visualização são:

• Imediatamente após o carregamento da página: O Widget será exibido logo que a página de destino for carregada.

• Depois que um usuário visualizar a página por um tempo específico: O Widget será exibido somente após o tempo de navegação definido ser atingido na página de destino.

A opções de recorrência são:
​

​

O Widget possui dois modos de exibição:​

• Modelo Box: O Widget será exibido como modal no canto inferior direito do site de destino.

• Modelo Embedded: O Widget será exibido conforme a adição no endereço de destino, seja dentro de modais, páginas específicas ou outro formato desejado pela empresa.

Em termos de aparência, as configurações são:

• Iniciar minimizado (apenas modelo box): O Widget será apresentado minimizado., ou seja, o usuário precisará clicar no widget para abrí-lo e ter a pesquisa exibida.

Essa será a mensagem que o usuário verá após finalizar a resposta no Widget.

Implementando o Widget no seu site: Código

Importante:

Na sessão de código são exibidos duas opções de código do Widget:

Código identificado: O Widget associará as respostas com os dados identificadores dos respondentes, para que seja funcional, a equipe técnica que irá adicionar o código no endereço desejado deverá enviar os dados dos usuários juntamente com a requisição de exibição do Widget.

Observe que para o código de coleta identificada são adicionadas as variáveis de dados de cliente que precisam ser enviados junto à requisição.

​
Sua equipe pode adicionar outras informações no Widget conforme os atributos cadastrados na plataforma.

Após a implementação do código você pode verificar se a instalação teve sucesso clicando em “Atualizar” ou acessando a página novamente.

​

Widget não verificado

Widget verificado
​

Uma vez que seu widget estiver verificado, sua implementação foi feita corretamente!

Como associar os dados do meu cliente em widgets identificados?

Para associar as respostas do widget às informações do cliente de forma dinâmica, a empresa pode utilizar variáveis que armazenam os dados do cliente e adicioná-las ao script antes de executá-lo. A abordagem pode variar dependendo da tecnologia usada no site (ex.: JavaScript puro, frameworks como React ou Angular), mas aqui está um exemplo genérico em JavaScript puro.

Exemplo de implementação dinâmica:

<script>
    // Suponha que os dados do cliente estejam disponíveis no site, por exemplo, vindos de uma API ou sessão.
    const customerData = {
        name: "João da Silva", // Nome do cliente
        email: "joao.silva@email.com", // Email do cliente
        phone: "+5511999999999" // Telefone do cliente
    };

    // Insere os dados dinâmicos do cliente no widget
    (function (f, b, g) {
        var a = {
            key: 'fc3C7CtE', // Chave do widget
            customer: {
                name: customerData.name,
                email: customerData.email,
                phone: customerData.phone
            }
        };
        var e;
        var c = f.getElementsByTagName(b)[0];
        if (f.getElementById(g)) { return };
        e = f.createElement(b);
        e.id = g;
        e.src = 'https://app.track.co/widget.min.js';
        e.type = 'text/javascript';
        e.async = true;
        e.onload = e.onreadystatechange = function () {
            var h = this.readyState;
            if (h && h !== 'complete' && h !== 'loaded') { return };
            try {
                var c = new TrackWidget();
                c.createWidget(a);
            } catch (i) { }
        };
        c.parentNode.insertBefore(e, c);
    }(document, 'script', 'trackwidget-js'));
</script>

Como funciona:

1. Obtendo os dados do cliente:

   • Os dados podem vir de diferentes fontes, como APIs, cookies, local storage, ou diretamente de variáveis disponíveis no backend (ex.: dados da sessão do usuário logado).
   • O objeto customerData contém as informações do cliente. Substitua os valores estáticos do exemplo pelos dados reais do site.

2. Substituindo os dados no script:

   • No objeto a.customer, os valores name, email e phone recebem os dados do cliente de forma dinâmica.
   • O widget será associado às informações corretas do cliente.

Exemplo avançado com API:

Se os dados do cliente forem carregados de uma API de backend, você pode realizar uma chamada assíncrona antes de inicializar o script:

<script>
    // Função para buscar os dados do cliente
    async function fetchCustomerData() {
        try {
            const response = await fetch('/api/get-customer-data'); // Endpoint da API
            const customerData = await response.json();

            // Inicializa o widget com os dados recebidos
            (function (f, b, g) {
                var a = {
                    key: 'fc3C7CtE',
                    customer: {
                        name: customerData.name,
                        email: customerData.email,
                        phone: customerData.phone
                    }
                };
                var e;
                var c = f.getElementsByTagName(b)[0];
                if (f.getElementById(g)) { return };
                e = f.createElement(b);
                e.id = g;
                e.src = 'https://app.track.co/widget.min.js';
                e.type = 'text/javascript';
                e.async = true;
                e.onload = e.onreadystatechange = function () {
                    var h = this.readyState;
                    if (h && h !== 'complete' && h !== 'loaded') { return };
                    try {
                        var c = new TrackWidget();
                        c.createWidget(a);
                    } catch (i) { }
                };
                c.parentNode.insertBefore(e, c);
            }(document, 'script', 'trackwidget-js'));
        } catch (error) {
            console.error('Erro ao carregar os dados do cliente:', error);
        }
    }

    // Executa a função para buscar os dados e carregar o widget
    fetchCustomerData();
</script>

Materiais adicionais

• Para informações adicionais da implementação acesse: Documentação Técnica Widget

• Para implentar o Widget via Google Tag Manager: Tags personalizadas Google

• Para utilizar o Widget no seu aplicativo: Widget no App.

  Importante: Se seu aplicativo for desenvolvido em Flutter, recomendamos o uso do nosso SDK Flutter.
  
  
  

Em caso de dúvidas, entre em contato com nossa equipe de atendimento através da janela de chat no canto inferior direito da tela, ou envie sua dúvida para support@track.co, ou ligue para: (11) 4858-9924 .