Implementação de chat ao vivo (QSC)

Sobre a implementação do chat ao vivo

O bate-papo ao vivo é um recurso do Qualtrics Social Connect que permite adicionar um serviço de bate-papo ao vivo ao seu site. Quando os clientes clicam nesse chatbot, ele cria uma menção em sua conta do Social Connect para um agente agir. Quando um agente responde a essa menção, a resposta vem do chatbot, oferecendo uma experiência de conversação perfeita ao cliente.

Introdução ao chat ao vivo

O bate-papo ao vivo é um complemento da sua licença da Qualtrics. Entre em contato com seu representante de vendas para começar a usar o bate-papo ao vivo. Depois que o bate-papo ao vivo for adicionado à sua conta, você receberá um ID de integração e um ID de aplicativo exclusivos. Grave esses IDs para mais tarde.

Personalizando seu chat ao vivo

Depois que o Chat ao vivo estiver ativado para sua conta, você poderá encontrá-lo no Gerenciador de perfis. Aqui, você pode personalizar aspectos do seu chat ao vivo, como:

• A aparência da janela de chat (cores e logotipo).
• Adicione os domínios do site em que a janela de bate-papo deve aparecer.
• Selecione um fluxo que comece quando um cliente envia uma mensagem inicial.
• Anexe uma resposta rápida a cada mensagem enviada.

Consulte a página Perfil do bate-papo ao vivo para obter mais informações.

Adicionando bate-papo ao vivo ao seu site

Enquanto estiver no Gerenciador de perfis, clique em Visualizar para visualizar o snippet de código do seu bate-papo ao vivo. 

Copie este código e entregue-o à sua equipe de TI. Eles precisarão adicionar o código ao cabeçalho ou ao corpo do site no qual desejam que o bate-papo ao vivo apareça.

Depois de adicionado, o Chat ao vivo aparecerá no canto inferior direito do seu site. Em seguida, você pode personalizar ainda mais seu bate-papo ao vivo ajustando o CSS. Consulte esta página de suporte externo para obter mais informações sobre como personalizar seu bate-papo ao vivo com CSS.

Criação automática de casos

Ao utilizar o chat ao vivo, recomendamos que você ative a criação automática de casos. Isso agrupará automaticamente as mensagens da mesma conversa em uma cadeia em vez de adicionar cada mensagem como uma menção individual.

Rastreamento de página da Web

Se você tiver seu bate-papo ao vivo em várias páginas da Web, recomendamos adicionar o rastreamento de página da Web. Isso permite que os agentes vejam de qual página da Web o cliente está conversando. Para adicionar o rastreamento de página da Web, você precisará adicionar um código adicional ao snippet de código para bate-papo ao vivo.

1. No seu snippet de código existente, procure a seguinte linha de código:

   ClarabridgeChat.init({ appId: 'integration-id' }).then(() => {

2. Inserir uma quebra de linha.
3. Adicione o seguinte bloco de códigos na nova linha:

   ClarabridgeChat.setDelegate({
   
    beforeSend(message) {
   
    message.metadata = {
   
    ...message.metadata,
   
    originTitle: document.title,
   
    originUrl: window.location.href
   
   ;
   
    return message;
   
    }
   
    });

4. As menções agora mostrarão a página da Web de onde o cliente conversou.

Criadores de gelo

Um quebra-gelo é uma pequena mensagem que aparece ao lado do ícone de Bate-papo ao vivo em seu site. Muitas vezes, ele age como um prompt para chamar a atenção do cliente para o chat ao vivo como um recurso se ele tiver perguntas. No exemplo abaixo, “Podemos ajudá-lo?” é o quebra-gelo.

Para adicionar um disjuntor de gelo, você precisará adicionar um código adicional ao snippet de código para o seu bate-papo ao vivo:

1. Encontre as seguintes linhas de código no seu snippet de código existente:

   ClarabridgeChat.init({
   
    // integrationId: 'your_integration_id', // Use this OR appId
   
    appId: '', // Use this OR integrationId

2. Inserir uma quebra de linha.
3. Adicione o seguinte bloco de códigos na nova linha:

   icebreaker : {
   
    delay: 1000,
   
    texto: 'Podemos ajudá-lo?',
   
    estilos: {
   
    backgroundColor: '#9FFF04',
   
    textColor: '#F420F5',
   
    borderWidth: '1px', //
   
    borderColor: '#EAFD10',
   
    width: '150px', //
   
    auge: '40px' //
   
    }
   
    },

4. No snippet de código acima, você pode ajustar os valores em negrito para personalizar seu quebra-gelo. Talvez você precise pedir ajuda à sua equipe de TI. Abaixo estão dicas para cada campo:
   • atraso: a quantidade de tempo que o cliente precisa gastar na página antes que o quebra-gelo apareça. Inserir um período de atraso em milissegundos.
   • texto: insira a mensagem de quebra de gelo.
   • estilos: estas são propriedades CSS adicionais para personalizar a aparência do disjuntor de gelo. Alguns são obrigatórios, enquanto outros são opcionais. Continue lendo para obter mais informações sobre cada propriedade.
   • backgroundColor: A cor de fundo. Insira um código de cor HEX. Esta propriedade é obrigatória.
   • textColor: A cor do texto. Insira um código de cor HEX. Esta propriedade é obrigatória.
   • borderWidth: A largura da borda da bolha que mostra a mensagem. Insira uma largura em pixels. Esta característica é opcional. Quando excluído, o quebra-gelo não terá uma borda.
   • borderColor: A cor da borda. Insira um código de cor HEX. Esta propriedade é obrigatória se usar borderWidth.
   • largura: A largura da bolha do quebra-gelo. Insira uma largura em pixels. Esta característica é opcional. Se excluído, o disjuntor de gelo terá como padrão 150 pixels de largura.
   • altura: A altura da bolha do quebra-gelo. Inserir uma altura em pixels. Esta característica é opcional. Se excluído, o disjuntor de gelo terá como padrão 50 pixels de altura.
5. Seu ícone de bate-papo ao vivo agora terá uma mensagem de quebra de gelo ao lado dele.

Fluxos

Você pode adicionar fluxos ao seu chat ao vivo para automatizar respostas por meio de seu chat ao vivo. Visite a página vinculada para saber mais sobre a criação de fluxos. Esta seção abordará como adicionar um fluxo ao seu bate-papo ao vivo.

1. Cole o seguinte bloco de código após o snippet de código do bate-papo ao vivo original:

   ClarabridgeChat.on('widget:open', () => {
   
    ClarabridgeChat.createConversation();
   
    });

2. Navegar para o Gerenciador de perfis e use a lista de opções Enviar fluxo ao iniciar para selecionar um fluxo.
3. Você pode selecionar 3 fluxos adicionais para anexar a cada mensagem enviada, fornecendo aos clientes várias opções, como iniciar o chat ou modificar o idioma de suporte.

Horário comercial e disponibilidade do agente

Você pode limitar seu bate-papo ao vivo a estar disponível apenas durante o horário comercial e quando os agentes estiverem on-line e disponíveis. Isso requer que você integre seu chat em tempo real com a API Qualtric Social Connect. Você também deve criar sua programação de horário comercial.

1. Siga este guia para integrar seu site à API do Qualtrics Social Connect.
2. Chame este ponto de acesso para recuperar seu ID do horário comercial.
3. Use seu código empresarial para, em seguida, recuperar a programação de horário comercial usando este ponto de acesso.
4. Você receberá um resultado semelhante a este:

   {"name":"minha programação","periodicidades":[{"dayofweek":1,"start":"0900","end""end":"1200",{"dayofweek":1,"start":"1300","end":"1900"},{"dayofweek":900,"start":"0900","end":"1800":"00"

5. Você pode utilizar essas informações para ativar o chat ao vivo somente durante o horário de trabalho.
6. Você também pode usar a mesma chamada de API para recuperar informações sobre os agentes disponíveis e desativar o bate-papo ao vivo se nenhum estiver disponível.