1. All Collections >
  2. Canais. >
  3. Widget do Chat do Site >
  4. Início rápido do widget de chat do site

Início rápido do widget de chat do site

Avatar
Joshua Lim
6 minutos de leitura

O widget de chat do website permite que os visitantes do website entrem em contacto consigo através de chat ao vivo ou por outros canais de mensagens que tenha ligado.

Conectando um widget de chat para o site.

Veja o vídeo abaixo para um guia passo a passo sobre como ligar o chat do site ao respond.io.

How to Connect Website Chat to respond.io

Passo 1: Vá para Definições > Canais

Passo 2: Clique em Adicionar canal > Chat no site > Ligar

Passo 3: Preencha o(s) site(s) onde o widget será adicionado.

Consulte o seguinte sobre como os sites podem ser incluídos na lista de permissões.

  • Se o utilizador adicionarhttps://app.respond.io, apenashttps://app.respond.ioserá incluído na lista de permissões. Qualquer outro subdomínio ou raiz não deve funcionar.

  • Se o utilizador adicionarhttps://*.respond.io, todos os subdomínios, incluindo o domínio raiz, serão incluídos na lista de permissões.

  • Se o utilizador adicionarhttps://respond.io, apenas o domínio raiz será incluído na lista de permissões.

Passo 4:Selecione uma cor de tema para o widget utilizando o seletor de cores interativo.

Escolha uma cor que combine com a sua marca cor e site.

Passo 5:Selecione um ícone para o widget apresentar no website. Se preferir enviar um ícone personalizado, pode enviar um ícone quadrado com um tamanho recomendado de 256px x 256px.

Os widgets podem ser ainda mais personalizados depois de ligados.

Passo 6: Clique emSeguinte> Adicione o script ao seu site preferido. Em alternativa, pode enviar as instruções de instalação a outra pessoa por e-mail.

Instalando o widget de chat

Pode precisar de um webmaster ou administrador técnico para ajudar a instalar o widget de chat no website. Se necessário, procure ajuda.

Dependendo do sistema que utiliza para criar e gerir o seu website, criámos um guia passo a passo para o orientar na instalação de um Chat Widget no seu website.

Para outras plataformas ou serviços, navegue até ao código HTML da página. Cole o script antes da etiqueta </body> .

<body>
...
...
...
<Paste Script Here>
</body>

Se precisar de ajuda, pode reencaminhar o script juntamente com as instruções de instalação para o administrador do seu site. Marque a caixa de seleção correspondente e introduza o endereço de e-mail de alguém que o possa ajudar a instalar o plugin de chat.

O widget de chat do site respond.io aparecerá no seu site depois de o script ser instalado com sucesso.

Personalizando o widget de chat

Passo 1:No seu espaço de trabalho, aceda aDefinições>Canal

Passo 2: Localizar o canal de chat do site > clicar em Personalizar

Personalize o widget do site para corresponder à aparência do site, para que o widget tenha uma aparência uniforme. No lado direito da página, existe uma pré-visualização do widget de chat do site. Qualquer personalização feita no widget será refletida no widget para o ajudar a ter uma melhor ideia do que está a personalizar.

Exibir & Aparência

Pode personalizar o seguinte para alterar a aparência de exibição do widget no site.

Campo

Descrição

Cor do tema

A cor escolhida será utilizada como cor primária do seu widget.

Cor do texto

A cor escolhida será utilizada como cor principal do texto do seu widget.

Ícone de chat do site

O ícone selecionado é utilizado dentro do balão do widget juntamente com a cor do tema. Pode carregar um ícone personalizado, se necessário.

Mensagem pop-up

A mensagem pop-up é apresentada aos visitantes do website uma vez por dia, 5 segundos após o carregamento da página. Se não for definido, não será apresentada nenhuma mensagem pop-up aos visitantes do site.

Validação para o ícone de chat do site:

  • Tamanho máximo de ficheiro: 1 MB

  • Dimensão máxima do ficheiro: 256 x 256 px

  • Formato: Quadrado

Posição

Campo

Descrição

Alinhar a

Os utilizadores podem optar por especificar uma posição para exibir o widget à esquerda ou à direita da plataforma.

Espaçamento vertical

Os utilizadores podem especificar a quantidade de espaçamento vertical entre o widget de chat do website e a parte inferior do ecrã.

Espaçamento horizontal

Os utilizadores podem especificar a quantidade de espaçamento horizontal entre o widget de chat do website e a lateral do ecrã.

Tamanho do widget

Os utilizadores podem escolher o tamanho do widget: Pequeno, Padrão ou Grande.

Opções de visualização

Os utilizadores podem optar por exibir este widget no ambiente de trabalho, em dispositivos móveis ou em ambos.

Elementos do Cabeçalho

Campo

Descrição

Título

O título será apresentado no topo do seu widget de chat.

Slogan

O slogan será apresentado abaixo do título.

Logotipo do site de chat

Solte aqui a imagem do seu logótipo para que seja apresentada no topo do chat do site. O formato pode ser PNG, SVG ou JPG e o tamanho do ficheiro não pode ser superior a 4,0 MB.

Ícones do canal

Esta opção permitirá que os Contactos entrem em contacto consigo através do Canal da sua preferência, desde que as opções sejam fornecidas. Pode adicionar até seis canais e eles serão apresentados no topo do widget de chat do site.

Ícones do canal a cores

Os ícones do canal podem ser apresentados em branco ou a cores no seu widget de chat. Selecione Branco ou Colorido para combinar com a cor do tema do seu widget de chat.

Validação para o logótipo do chat do site:

  • Tamanho máximo de ficheiro: 4 MB

  • Dimensão máxima do ficheiro: 1024 x 1024 px

  • Formato: Quadrado

Ícones do canal

Se o widget de chat do website nunca tiver sido configurado antes, os canais ligados com informações adequadas serão listados por predefinição como ligações de canais do widget.

Pode adicionar os links do canal do widget e especificar as informações necessárias para o canal selecionado.

Aqui está a lista de campos de entrada necessários para cada um dos links de canal suportados.

Links do canal

Campo de entrada obrigatório

WhatsApp

Número de telefone WhatsApp

Facebook Messenger

ID da página do Facebook

Telegrama

Nome do bot do Telegram

Twitter

ID do Twitter

LINHA

ID DA LINHA

Viber

Nome da conta pública Viber

SMS

Número de telefone SMS

E-mail

Endereço de e-mail

Chamada telefónica

Número de telefone

Link personalizado

Endereço URL e ícone

QR personalizado

Imagem e ícone QR

Validação para o ícone do canal:

  • Tamanho máximo de ficheiro: 1 MB

  • Dimensão máxima do ficheiro: 256 x 256 px

  • Formato: Quadrado

Formulário de pré-chat

A ativação desta opção irá adicionar um formulário de pré-chat ao chat do seu site. Se estiver ativado, os visitantes do seu website receberão um formulário para preencher antes de iniciar o chat.

Com esta opção ativada, pode incluir campos personalizados adicionais quando necessário. Além disso, também pode personalizar o rótulo dos campos padrão de acordo com a forma como aparecem aos seus Contactos.

Os rótulos dos campos podem ser personalizados para um idioma diferente, de modo a corresponder ao idioma do site'.

Configurações adicionais

Campo

Descrição

Texto da barra de entrada

Este texto funcionará como um espaço reservado na área de digitação.

Fonte do texto

A fonte que será utilizada para exibir a fonte no widget de chat do website.

Restringir os anexos recebidos

Quando esta opção está marcada, o visitante do site não tem a opção de anexar um anexo no widget de chat do site.

Manter o chat do site oculto

Ao utilizar esta opção, o widget ficará completamente oculto. Até que a Referência de Âncora seja clicada ou quando o chat é aberto através da API programática.

#widget_de_chat_web

Usando a âncora acima, pode criar um botão na sua página para abrir o widget após ser clicado.

Ocultar a marca Respond.io

Utilizando esta opção pode remover a marca respond.io do seu widget.

Configuração de canal

Passo 1: Clique em Definições > Canais

Passo 2: Localizar o Chat do site > clicar em Gerir

Passo 3: Na página de configuração do chat do site verá as seguintes definições:

  • Link de chat - O link URL para o seu contacto aceder ao seu canal.

  • Nome do canal - O nome do canal pode ser alterado e é utilizado internamente para identificar o canal.

  • Domínios de sites - Site(s) que estão ligados ao seu widget.

  • Código de chat do site - O código que pode colar no código-fonte HTML do seu site se precisar de recuperar o trecho de código gerado.

Se não incluir seu site nesta lista, seu widget não será carregado. Você pode adicionar várias URLs se estiver usando o plugin em vários sites.

Passo 4: Clique em Guardar alterações para atualizar a página de configuração do chat do site

Identificando os utilizadores logados

Os utilizadores com sessão iniciada no seu site podem ser identificados adicionando um código JavaScript simples ao código do seu site. Depois de o identificador passado ser correspondido com um contacto existente, a conversa atual será retomada.

O termo “utilizador” é utilizado no contexto do seu website. Na plataforma respond.io, continuamos a referir-nos a eles como “Contactos”.

window.__respond_settings = {
  identifier: "customer@example.com",
  firstName: "Jane",
  lastName: "Doe",
  phone: "60123456789",
  email: "customer@example.com",
  profilePic: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
  countryCode: "MY",
  language: "en",
  // Campos personalizados
  custom_fields: {
    // slugs de campos personalizados
    number: 123,
    description: "algum texto",
  },
};

Guia sobre como utilizar o código

  • Edite o código (fornecido abaixo) para enviar ao respond.io o identificador do utilizador actualmente ligado. Pode ser o endereço de e-mail, o ID de contacto ou qualquer outro campo de contacto. Por favor, note que o identificador é um campo obrigatório.

  • Cole o código diretamente na tag head de cada página onde pretende que o chat do site apareça.

    • O script para identificar os utilizadores com sessão iniciada deve ser colocado acima do código de chat do site, que pode ser encontrado na caixa de diálogo de configuração de chat do site.

  • Pode também enviar campos de contacto do respond.io associados aos seus contactos para que armazenemos o campo de contacto durante o processo de criação do contacto. O nome do campo (ou slug) pode ser encontrado no módulo Campos de contacto.

  • Note que se estiver a utilizar esta funcionalidade, o formulário pré-chat será ignorado, o que significa que os contactos não precisam de preencher as suas informações antes de iniciar uma conversa.

O exemplo acima está a passar um endereço de e-mail como identificador e, durante o processo de criação de contactos, todos os campos de contacto passados serão armazenados.

Controlo Programático (API para Utilizadores)

O widget de chat do website pode ser aberto e fechado através do código JavaScript do seu website. Isto permite-lhe criar um botão personalizado "Fale connosco" no seu website e acione o widget de chat do website para abrir quando um visitante clicar no botão.

Ações

  1. Abrir bate-papo

    1. Descrição: Abre o widget de chat.

    2. Sintaxe: $respond.do("chat:open")

  2. Fechar bate-papo

    1. Descrição: Fecha o widget de chat.

    2. Sintaxe: $respond.do("chat:close")

Ouvintes de eventos

  1. A caixa de chat foi aberta

    1. Descrição: Manipula o evento de abertura do widget de chat (aciona a sua função de callback ).

    2. Sintaxe:$respond.on("chat:open", callback)

  2. A caixa de chat foi fechada

    1. Descrição: Manipula o evento fechado do widget de chat (despoleta a sua função de callback ).

    2. Sintaxe:$respond.on("chat:closed", callback)

Métodos de verificação do estado

  1. O chat está aberto?

    1. Descrição: Retorna true se o widget de chat estiver aberto, caso contrário false.

    2. Sintaxe: $respond.is("chat:open")

  2. O chat está fechado?

    1. Descrição: Retorna true se o widget de chat estiver fechado, caso contrário false.

    2. Sintaxe: $respond.is("chat:fechado")

Perguntas frequentes e resolução de problemas

Porque é que as minhas mensagens não estão a ser entregues aos Contactos?

Pode haver algumas razões pelas quais as mensagens não estão sendo entregues:

  • O contato saiu do site.

  • A inatividade do contato pode ter excedido o período de tempo limite.

  • O cliente do contato pode ter problemas de conexão com a internet.

Por que meu widget não está aparecendo no meu site?

  1. Certifique-se de que o código está instalado corretamente. Consulte as instruções aqui sobre como instalar o widget de chat do site.

  2. Não se esqueça de colocar na lista de permissões o site onde o widget será instalado. Consulte o Passo 3 de Conectar o widget de chat do site para saber como colocar seu domínio na lista de permissões.

Compartilhar este artigo
Telegram
Facebook
Linkedin
Twitter

Não consegue encontrar o que você está procurando? 🔎