Compatibilidade e Requisitos

O painel da web e o widget de chat ao vivo funcionam com a maioria dos navegadores modernos. Aqui estão as versões suportadas:

• Mozilla Firefox: a partir da v52
• Google Chrome: a partir da v57
• Chromium: a partir da v57
• Apple Safari: a partir da v14.1
• Microsoft Edge: a partir da v16

Para o aplicativo móvel ZapiCRM, as versões suportadas são:

• Android: a partir da v5.0
• iOS: a partir da v11.0

Como Criar um Canal de Website no ZapiCRM?

Acesse a página de Caixas de Entrada. Vá em Configurações → Caixas de Entrada → Clique no botão Adicionar Caixa de Entrada.

Clique na opção Site.

Preencha as informações do nome, URL e outros detalhes do site.

• Nome do site: Ex.: Exemplo Inc.
• Domínio do site: Ex.: www.exemplo.com
• Cor do Widget: Selecione a cor do widget de chat.
• Cabeçalho de boas-vindas: Ex.: Olá
• Frase de boas-vindas: Ex.: Estamos aqui para ajudar com suas dúvidas.
• Habilitar saudação de canal: Para enviar uma saudação quando o cliente iniciar a conversa. Se habilitado, um campo para adicionar uma mensagem de saudação aparecerá, e você poderá personaliza-la.

Após preencher tudo, clique em Criar Caixa de Entrada.

Adicione agentes à caixa de entrada.

Importante: Mesmo sendo Administrador, é necessário se adicionar como agente para visualizar a caixa de entrada na tela.

Copie e cole o código exibido na página no seu site para ativar o atendimento ao cliente.

Configurações Adicionais

Se desejar ajustar configurações de notificação e agentes, acesse Configurações → Caixas de Entrada → Clique no botão de engrenagem.

Você verá todas as configurações adicionais.

Configurações

Em Configurações da Caixa de Entrada, você pode:

• Imagem do Canal: Você pode alterar a imagem que sera exibida na caixa de entrada.
• Nome do site: Você pode alterar o nome da caixa de entrada.
• Domínio do website: Você pode alterar o domínio do seu site.
• Seja bem-vindo: Você pode alterar a mensagem de cabeçalho de boas-vindas.
• Bem-vindo, saudação: Você pode alterar a frase de boas-vindas.
• Cor do widget: Você pode alterar a cor do widget que será exibida no site.
• Ativar saudação do canal: Você pode alterar a mensagem automatica que será enviada quando uma nova mensagem for criada.
• Definir o Tempo de Resposta: Alterar o tempo de resposta que será exibido no widget do chat, podendo ser Em alguns minutos, Em algumas horas ou Em um dia.
• Permitir mensagens após a resolução da conversa: Você pode alterar entre Ativado/Desativado, se os clientes podem ou não mandar mensagens após a resolução da conversa.
• Habilitar continuidade das conversas por e-mail: Você pode alterar entre Ativado/Desativado, se as conversas continuaram no pelo e-mail, se o e-mail de contato estiver disponível.
• Centro de Ajuda: Você pode escolher um centro de ajuda com a caixa de entrada.
• Ativar assinatura do agente: Você pode alterar entre Ativado/Desativado para exibir o nome do agente nas conversas desta caixa de entrada.
• Funcionalidades: Você pode alterar entre Ativado/Desativado para Exibir seletor de arquivos no widget, Exibir seletor de emoji no widget, Permitir que usuários terminem a conversa a partir do widget e Use o nome da caixa de entrada e avatar do bot.

Em Nome do remetente, você pode escolher entre:

• Amigável: Se selecionado, aparecerá o nome do agente que enviou a resposta.
• Profissional: Se selecionado, aparecerá somente o nome da empresa configurada.
  • Configure o nome da sua empresa e clique em Salvar.

Quando finalizar as configurações, clique em Atualizar.

Agentes

• Em agentes, voce pode Adicionar/Remover agentes para atender nessa caixa de entrada.

• Em atribuição de conversa, se habilitado, as novas conversas seram automaticamente atribuidas aos agentes adicionados.
  • Você pode tambem escolher um limite máximo de conversas desta caixa de entrada que poderam ser atribuído automaticamente a um agente.

Horário de funcionamento

Em horário de funcionamento você pode definir a sua disponibilidade:

Se habilitar Permitir a disponibilidade de negócios para essa caixa de entrada, você pode:

• Mensagem indisponível para visitantes: Criar uma mensagem personalizada que será enviada automaticamente se estiver fora do horário de funcionamento.
• Selecionar fuso horário: Selecionar um fuso horário, para o Brasil, selecione o fuso de Brasilia (GMT-3:00).
• Definir horas semanais: Ajusta as definições de horário de funcionamento na semana.

CSAT

Se você habilitar CSAT, irá iniciar uma pesquisa de satisfação quando a conversa for encerrada, o que ajudará a entender como os clientes se sentem em relação à sua experiência de suporte. Você pode:

• Tipo de exibição: Pode escolher o tipo de exibição da avaliação da conversa.
• Mensagem: personalize uma mensagem para saber como o cliente se sentiu em relação a conversa.

Finalizando a Configuração da Caixa de Entrada do Website

Clique no ícone de configurações na tela de Caixas de Entrada para acessar a página de configurações. Aqui estão alguns exemplos de configurações adicionais:

• Coleta de E-mail: Ativa por padrão, solicita o e-mail do cliente no início da conversa.
• CSAT (Satisfação do Cliente): Ative para exibir uma pesquisa de satisfação ao final do atendimento.

Abas de Configuração

• Colaboradores: Adicione ou remova agentes e habilite/desabilite a atribuição automática de novas conversas.

• Horário de Funcionamento: Defina os horários de atendimento da equipe. Ative e personalize a mensagem para horários fora do expediente.

• Formulário Pré-Chat: Coleta informações do cliente antes do início da conversa. Habilite e customize os campos necessários, como Nome, E-mail e Telefone.

• Configuração: Acesse o código para integração com o site.

• Construtor de Widget: Personalize o widget e veja as mudanças ao vivo.

Etapa 1. Baixe o plugin Chatwoot 

Baixe o arquivo Zip do último plugin Chatwoot WordPress do  GitHub , conforme mostrado abaixo.

Etapa 2. Carregue o plugin no seu site WordPress 

Entre na sua conta do WordPress. Navegue até o Painel de Administração e clique em “Plugins” na barra lateral. Você poderá ver o botão “Adicionar Novo”.

Você verá uma opção para carregar o plugin, como mostrado na captura de tela abaixo. Clique em “Upload” e selecione o arquivo Zip baixado na etapa 1.

Etapa 3. Ative o plugin 

Depois que o plugin for carregado, você verá uma tela de Sucesso com a opção “Ativar Plugin”, conforme mostrado abaixo. Clique no botão “Ativar Plugin”.

Parabéns! O plugin agora está instalado. Para concluir a configuração, você deve compartilhar as credenciais do aplicativo ZapiCRM, conforme mostrado nas etapas abaixo.

Etapa 4. Configurar o plugin 

Agora, você poderá ver “ZapiCRM Settings” no seu menu “Settings”. Clique nele para atualizar a configuração do chat ao vivo.

Você verá a tela de Configurações conforme mostrado abaixo. Configure seu plugin Chatwoot aqui para fazê-lo funcionar.

Você precisa criar uma caixa de entrada de site na sua conta do ZapiCRM. Consulte este  guia  para criar uma caixa de entrada de canal de site.

Os campos do formulário são explicados abaixo.

1. Token do site Chatwoot / URL de instalação do Chatwoot: Depois de criar uma caixa de entrada de canal de site na sua conta do ZapiCRM, você obterá um script. Você pode copiar o Token e a URL conforme mostrado abaixo.

1. Design de widgets: O Zapicrm suporta dois designs de widget de chat ao vivo: Design Padrão e um design de Bolha Expandida. Escolha sua preferência.
2. Posição do widget: Você pode selecionar onde colocar o widget de chat ao vivo no site com base em sua preferência. As opções disponíveis são Esquerda e Direita.
3. Linguagem: O ZapiCRM suporta mais de 30 idiomas. O idioma padrão é o inglês.
4. Texto do iniciador: Este é um campo opcional. Se você usar o design de bolha expandida, você pode usar o texto do iniciador para personalizar o texto exibido na bolha.

Após preencher o formulário, clique no botão “Salvar alterações”. Além disso, certifique-se de ter configurado a caixa de entrada do site do ZapiCRM .

Etapa 5. Verifique se o plugin está funcionando corretamente 

Visite seu site e veja se o widget aparece no site!

Etapa 1. Acesse o console do Gerenciador de tags 

Entre no espaço de trabalho do Tag Manager com sua conta do Google. Você verá um espaço de trabalho semelhante ao mostrado abaixo. Clique no botão “Adicionar uma nova tag” no painel.

Etapa 2. Crie uma nova tag com Tag Configuration 

Será apresentado um pop-up para criar uma tag. Altere o nome de “Tag sem título” para “ZapiCrm” ou um nome que você preferir.

Clique na configuração de tag e selecione o tipo de tag “HTML personalizado” na lista.

Copie o script da configuração da caixa de entrada no ZapiCRM para a área de texto do script HTML, conforme mostrado abaixo. Selecione a caixa de seleção “Support document.write”.

Etapa 3. Configurar o acionamento 

Clique em “Acionamento” e selecione “Todas as páginas” na lista.

Clique em “Salvar” para salvar a tag. Você poderá ver a tag listada em Alterações do espaço de trabalho. Clique em “Enviar” para implantar a tag. Forneça um nome de versão e implante as alterações clicando em “Publicar”.

Etapa 4. Marque isso na sua lista de tarefas ​#

Você implantou com sucesso o widget de chat ao vivo do ZapiCRM em seu site. Atualize seu site para ver o widget de chat ao vivo aparecer em todas as páginas.

Compatibilidade e requisitos 

O painel da web e o widget de chat ao vivo funcionam com a maioria dos navegadores modernos. Aqui estão as versões de navegadores suportadas:

• Mozilla Firefox: v52 em diante
• Google Chrome: v57 em diante
• Chromium: v57 em diante
• Apple Safari: v14.1 em diante
• Microsoft Edge: v16 em diante

Como criar um canal de site no ZapiCRM? 

Etapa 1. Vá para a página Caixas de entrada. Vá para Configurações → Caixas de entrada → botão “Adicionar caixa de entrada”.

Etapa 2. Clique no ícone “Website”.

Etapa 3. Insira o nome do seu site, URL e outros detalhes conforme descrito abaixo.

Os campos disponíveis são explicados abaixo.

1. Nome do site: Insira o nome do seu site. Por exemplo, Example Inc.
2. Domínio do site: Insira a URL do seu site. Por exemplo,www.example.com
3. Cor do widget: Clique na paleta e selecione uma cor para o widget de chat ao vivo do seu site.
4. Título de boas-vindas: Escreva uma mensagem de saudação para seus clientes. Por exemplo, Olá
5. Slogan de boas-vindas: Por exemplo, estamos aqui para ajudar você com suas perguntas. Pergunte-nos qualquer coisa ou compartilhe seu feedback.
6. Habilitar/desabilitar saudação do canal: Habilitar para enviar mensagem de saudação quando o cliente inicia a conversa
7. Mensagem de saudação do canal: Dê uma saudação para começar a conversa. Por exemplo, Olá. Como podemos ajudar você?

Depois que todos os detalhes forem inseridos, clique no botão “Criar caixa de entrada”.

Etapa 4. “Adicione agentes” à caixa de entrada do seu site.

As conversas serão roteadas para agentes somente se estiverem associadas à caixa de entrada. Mesmo se você for um Administrador, você precisa se adicionar como um agente à Caixa de Entrada para vê-la na sua tela.

Selecione os Agentes no menu suspenso e clique em Adicionar agentes. Se os agentes não foram adicionados, siga as etapas para  adicionar agentes .

Passo 5. Viva! Você criou com sucesso uma caixa de entrada de site. Agora, adicione o widget ao seu site.

Copie e cole o snippet de código mostrado na página para seu site e comece a dar suporte aos seus clientes. Você pode clicar no botão Copiar para copiar e depois  colar no arquivo raiz  do seu site.

Se você clicar no botão ” Mais configurações “, você será levado para as Configurações adicionais para a caixa de entrada. Se você clicar no botão ” Leve-me lá “, você será levado para a caixa de entrada recém-criada.

Etapa 6. Se você quiser atualizar os agentes com acesso à caixa de entrada, vá para Configurações → Caixas de entrada. Você poderá ver a caixa de entrada do seu site listada lá. Clique em Configurações. Você poderá ver o código, bem como a lista de agentes que têm acesso à caixa de entrada.

Conclua a configuração da caixa de entrada do site 

Você já tem uma caixa de entrada de site funcional. Vamos dar uma olhada nas configurações adicionais da Caixa de entrada .

Na tela Inboxes, clique no ícone de engrenagem para acessar a página Settings. Você verá a seguinte tela:

Guia de configurações 

Role para baixo para ver mais configurações, onde você pode configurar as diversas notificações que deseja receber quando a caixa de entrada do seu site começar a funcionar.

Aqui estão alguns exemplos para sua compreensão:

A caixa Habilitar coleta de e-mail  é habilitada por padrão. Isso significa que uma mensagem automática para coletar o id de e-mail será exibida assim que o cliente iniciar uma conversa. O cliente/usuário final receberá um prompt para inserir um id de e-mail.

Habilitar CSAT . Depois de habilitar isso, sua pesquisa de satisfação do cliente será iniciada toda vez que um ticket for resolvido. Os resultados do CSAT podem ser visualizados mais tarde na seção Relatórios.

Clique no botão ” Atualizar ” para salvar as alterações feitas.

Guia de colaboradores 

Clique na aba “Colaboradores”.

Aqui, você pode adicionar agentes à caixa de entrada ou excluir agentes já adicionados à caixa de entrada. Você também pode habilitar ou desabilitar a atribuição automática de novas conversas aos agentes adicionados a esta caixa de entrada.

Clique em  Update para salvar as alterações.

Guia Horário comercial 

Clique na aba “Horário Comercial”. Nesta seção, você pode definir o horário de trabalho da sua equipe.

Marque a caixa de seleção para  Enable business availability for this inbox se você tiver um horário comercial bem definido. Depois que a caixa for marcada, uma nova seção será aberta, como mostrado abaixo. Você pode escrever sua mensagem para ser exibida ao cliente durante o horário comercial FORA.

Você também pode selecionar o horário comercial disponível para cada dia da semana, juntamente com o fuso horário correto.

Clique no  Update Business Hour Setting botão.

Aba Formulário de pré-chat 

Clique na aba “Formulário de pré-chat”.

Com isso, você pode  coletar informações sobre seus clientes  assim que eles entrarem na sua janela de chat ao vivo/widget do site. Você pode usar isso para coletar nome, endereço de e-mail e mais antes de começar o chat.

Os campos vistos são explicados abaixo:

1. Habilitar formulário de pré-chat: Selecione Sim ou Não. Sim, se quiser usar o formulário de pré-chat. Não, se for mantê-lo desabilitado.
2. Mensagem pré-chat: Escreva uma mensagem para iniciar uma conversa com o cliente. Por exemplo, Olá, precisamos de algumas informações para atendê-lo melhor.
3. Campos de formulário de pré-chat: Verifique os necessários.
   Imp: “Nome”, “E-mail” e “Telefone” são os únicos atributos padrão para o formulário pré-chat. Os outros campos são criados por meio de atributos personalizados. Se precisar de campos personalizados no seu formulário, crie-os como atributos personalizados primeiro.

Clique no botão “Atualizar”. O formulário de pré-chat está habilitado agora.

Guia de configuração 

Clique na aba “Configuration”. Você pode encontrar o snippet de código a ser copiado para o site aqui.

Você pode clicar no  Copy botão para copiar o código e  colá-lo no arquivo raiz  do seu site.

Guia Construtor de Widgets 

Você pode personalizar seu web widget com configurações simples fornecidas nesta página. Você poderá ver suas alterações ao vivo.

Aqui está um rápido vislumbre de como o modo escuro funciona no widget de chat ao vivo:

Para ativar o modo escuro no widget do ZapiCRM, utilize o parâmetro darkMode junto com as configurações ZapiCRMSettings.

O parâmetro darkMode suporta dois valores:

• light – Ativa apenas o modo claro. Este é o valor padrão.
• auto – Ativa o modo escuro com base na preferência do sistema operacional.

window.ZapiCRMSettings = {

  //... outras configurações

  darkMode: "auto",

};

A validação de identidade pode ser habilitada gerando um HMAC.

A chave usada para gerar o HMAC para cada widget da web é diferente e pode ser copiada de Inboxes -> Configurações -> Configuração -> Validação de Identidade -> Copiar o token exibido lá.

Você pode gerar HMAC em diferentes linguagens, conforme mostrado abaixo.

Gerar HMAC

PHP

<?php

$key = '<webwidget-hmac-token>';

$message = '<identifier>';

$identifier_hash = hash_hmac('sha256', $message, $key);

?>

Javascript (Node.js)

const crypto = require('crypto');

const key = '<webwidget-hmac-token>';

const message = '<identifier>';

const hash = crypto.createHmac('sha256', key).update(message).digest('hex');

Ruby

require 'openssl'

require 'base64'

key = '<webwidget-hmac-token>'

message = '<identifier>'

OpenSSL::HMAC.hexdigest('sha256', key, message)

Elixir

key = '<webwidget-hmac-token>'

message = '<identifier>'

signature = :crypto.hmac(:sha256, key, message)

Base.encode16(signature, case: :lower)

Golang

package main

import (

    "crypto/hmac"

    "crypto/sha256"

    "encoding/base64"

    "encoding/hex"

)

func main() {

  secret := []byte("<webwidget-hmac-token>")

  message := []byte("<identifier>")

  hash := hmac.New(sha256.New, secret)

  hash.Write(message)

  hex.EncodeToString(hash.Sum(nil))

}

Python

import hashlib

import hmac

import base64

secret = bytes('<webwidget-hmac-token>', 'utf-8')

message = bytes('<identifier>', 'utf-8')

hash = hmac.new(secret, message, hashlib.sha256)

hash.hexdigest()

Como adicionar um formulário de pré-chat?

Passo 1. Acesse Configurações → Caixas de Entrada. Clique nas configurações específicas de uma caixa de entrada do site.

Passo 2. Vá para a aba “Formulário de Pré-Chat”.

Existem dois tipos de campos possíveis no formulário de pré-chat:

• Campos padrão: Estes são os campos principais de contato––Email, Número de telefone e Nome completo.
• Campos personalizados: Campos criados com atributos personalizados.

As configurações do formulário de pré-chat exibem tanto os campos padrão quanto os personalizados.

As colunas nas configurações do formulário de pré-chat são descritas abaixo:

• Chave: Identificador único do campo.
• Tipo: Tipo do campo (Texto, Lista, Número, Data, Link, Booleano).
• Obrigatório: Indica se o campo é obrigatório ou não.
• Nome do Campo: O rótulo que será exibido ao visitante no widget.
• Valor de Exemplo: O valor exibido como texto de preenchimento.

Todos os campos serão exibidos nas configurações do formulário de pré-chat por padrão. O administrador poderá realizar as seguintes ações:

• Ativar/desativar campos.
• Alterar a ordem dos campos.
• Atualizar o rótulo/placeholder.
• Ativar/desativar validação.

Personalize seu formulário de pré-chat conforme suas necessidades. Para adicionar mais campos, basta incluir mais atributos personalizados.

Como é um formulário de pré-chat?

Após habilitar o formulário de pré-chat, ele solicitará que seus clientes preencham um formulário semelhante ao mostrado abaixo ao iniciar uma conversa através do chat ao vivo.

Passo 1: Acessar o console do Tag Manager

Faça login no workspace do Tag Manager com sua conta Google. Você verá uma interface semelhante à mostrada abaixo. Clique no botão “Adicionar uma nova tag” no painel.

Passo 2: Criar uma nova tag com Configuração de Tag

Uma janela pop-up para criação de tag será exibida. Altere o nome de “Tag sem título” para “ZapiCRM” ou outro nome de sua preferência.

Clique em Configuração de tag e selecione o tipo de tag “HTML Personalizado” da lista.

Copie o script da configuração da caixa de entrada no ZapiCRM e cole na área de texto de script HTML, conforme mostrado abaixo. Marque a opção “Suporte a document.write”.

Passo 3: Configurar o Disparo

Clique em “Disparo” e selecione “Todas as páginas” na lista.

Clique em “Salvar” para gravar a tag. Você verá a tag listada nas alterações do Workspace. Clique em “Enviar” para implantar a tag. Dê um nome à versão e publique as mudanças clicando em “Publicar”.

Passo 4: Marque como concluído

Você implantou com sucesso o widget de chat ao vivo do ZapiCRM em seu site. Atualize sua página para ver o widget de chat ao vivo em todas as páginas.

Passo 1. Crie uma caixa de entrada no ZapiCRM

Consulte este guia para obter instruções detalhadas sobre como configurar uma caixa de entrada para site no ZapiCRM.

Passo 2. Instale o script gerado no Webflow

Acesse sua conta Webflow, selecione seu site e vá para as Configurações.

Em “Código Personalizado” -> “Código no Rodapé”, cole o script na área “Código do Rodapé” e salve as alterações.

Passo 3. Publique as alterações

Clique em “Publicar” -> Selecione o site -> Publicar nos domínios selecionados.

Passo 4. Verifique

Acesse seu site e verifique se o widget aparece.

Você pode criar essas mensagens utilizando a New Message API.

Exemplos de Payloads

Use os exemplos de payload abaixo como valores para criar diferentes tipos de mensagens interativas.

Opções

{

    "content": "Selecione um dos itens abaixo",

    "content_type": "input_select",

    "content_attributes": {

        "items": [

            { "title": "Opção1", "value": "Opção 1" },

            { "title": "Opção2", "value": "Opção 2" }

        ]

    },

    "private": false

}

Formulário

{

  "content": "formulário",

  "content_type": "form",

  "content_attributes": {

    "items": [

      {

        "name": "email",

        "placeholder": "Por favor, insira seu email",

        "type": "email",

        "label": "Email",

        "default": "xyc@xyc.com"

      },

      {

        "name": "text_area",

        "placeholder": "Por favor, insira o texto",

        "type": "text_area",

        "label": "Texto Longo",

        "default": "Texto de exemplo"

      },

      {

        "name": "text",

        "placeholder": "Por favor, insira o texto",

        "type": "text",

        "label": "Texto",

        "default": "Entrada de exemplo"

      },

      {

        "name": "select",

        "label": "Selecionar Opção",

        "type": "select",

        "options": [

          {

            "label": "🌯 Burrito",

            "value": "Burrito"

          },

          {

            "label": "🍝 Macarrão",

            "value": "Macarrão"

          }

        ]

      }

    ]

  },

  "private": false

}

Cartões

{

   "content": "mensagem de cartão",

   "content_type":"cards",

   "content_attributes":{

      "items":[

         {

            "media_url":"https://assets.ajio.com/medias/sys_master/root/hdb/h9a/13582024212510/-1117Wx1400H-460345219-white-MODEL.jpg",

            "title":"Tênis Nike 2.0",

            "description":"Correndo com o Tênis Nike 2.0",

            "actions":[

               {

                  "type":"link",

                  "text":"Ver Mais",

                  "uri":"google.com"

               },

               {

                  "type":"postback",

                  "text":"Adicionar ao carrinho",

                  "payload":"ITEM_SELECIONADO"

               }

            ]

         }

      ]

   },

   "private":false

}

Artigos

{

    "content": "artigos",

    "content_type": "article",

    "content_attributes": {

        "items": [

            { "title": "Guia inicial da API", "description": "Um guia de início rápido para API", "link": "http://google.com" },

            { "title": "Documentos de desenvolvimento", "description": "Documentação e diretrizes de desenvolvimento", "link": "http://google.com" }

        ]

    },

    "private": false

}