O widget de chat do Kookee tinha uma tarefa e a cumpria bem: o visitante faz uma pergunta, o assistente responde com base na central de ajuda e cita o artigo que usou. Aí o visitante clica na citação, e o widget falha com ele. O navegador sai da página ou abre uma aba nova, e a conversa que produziu a resposta fica em algum lugar para trás.
O clique que deveria ser o melhor momento da conversa era o que a encerrava.
Por isso refiz o widget. Ele não é mais só um chat: tem três abas — Início, Perguntar e Ajuda — e um leitor de artigos. Saiu hoje, e estas são as regras que segui.
1. O artigo abre onde a pergunta foi feita
Uma fonte abaixo de uma resposta, um link dentro de uma, um artigo numa lista: todos agora abrem dentro do widget, num leitor com botão de voltar. A página atrás dele não se mexe, e a conversa também não.
O leitor é a página de artigo da central de ajuda no tamanho do widget: um índice, o mesmo voto “Este artigo foi útil?” e um botão Perguntar sobre este artigo, que leva o título do artigo para o chat. Um post do blog ou uma entrada do registro de alterações abre do mesmo jeito e ganha botões de reação no lugar do voto.
Se seu site já trata os cliques nas fontes por conta própria, nada muda: seu handler continua tendo prioridade, e o leitor não entra no caminho.
2. Nem toda visita começa com uma pergunta
Um chat vazio pede ao visitante que faça primeiro a parte mais difícil: colocar o problema em palavras. Muita gente abre um widget de suporte para dar uma olhada — ver se algo está quebrado, o que mudou ou se existe um artigo com um título mais ou menos certo.
O Início é para essas pessoas. Ele mostra seu anúncio mais recente, seus próprios links, as entradas mais novas do registro de alterações e os posts mais novos do blog, e os artigos de ajuda mais vistos, com uma caixa de pergunta no topo para quem já sabe o que perguntar. A Ajuda é a própria central de ajuda: uma caixa de busca e suas coleções, cada uma com o número de artigos.
Nada disso é conteúdo novo. Início e Ajuda são montados com o que você já publica, e uma lista sem nada fica de fora em vez de aparecer vazia.
Perguntar é o chat de sempre, com sua saudação e algumas perguntas sugeridas para o primeiro toque.
3. Qualquer link da sua página pode abrir um artigo
O melhor lugar para a ajuda é ao lado do que ela explica: um ponto de interrogação perto de um campo de configuração, um link “Como funciona a cobrança?” na página de preços. Até agora esse link precisava levar para outro lugar.
Basta um atributo em qualquer elemento para que o clique abra o artigo no widget:
<a href="/help/getting-started" data-kookee-article="getting-started">Como começar</a>Dois detalhes importam aqui. O href continua, então o link ainda funciona quando o widget está bloqueado ou não carregou. E um clique com Ctrl, Cmd ou Shift pressionado, ou com o botão do meio do mouse, não é interceptado: quem pede uma aba nova ganha uma aba nova. As regras completas estão em Abra artigos de ajuda dentro do widget.
4. Os textos ficam no painel, a aparência fica no seu código
Nesta eu fui e voltei várias vezes. Um widget tem dois tipos de configuração, e cada um pede um lugar diferente.
O que ele diz — abas, título, saudação, perguntas sugeridas e links — muda com frequência e raramente é decisão de um desenvolvedor. Isso fica salvo no painel, na aba Personalizar, com pré-visualização ao vivo, e uma alteração salva chega ao seu site em cerca de um minuto, sem deploy.
A aparência — tema, posição, cor de destaque, botão do widget — não fica salva em lugar nenhum. Ela fica no snippet do seu site. Uma aparência buscada no servidor chega depois que o botão já foi desenhado, e por isso a tela pisca; além disso, o mesmo projeto muitas vezes roda em mais de um site, e esses sites não devem ter a mesma cara. O painel ajuda mesmo assim: a aba Instalação é um pequeno construtor com pré-visualização que escreve o snippet para você.
Onde os dois se sobrepõem, o código tem prioridade, chave por chave. Um site em vários idiomas passa os textos traduzidos no código e deixa o painel decidir o resto.
5. A requisição de configurações nunca pode derrubar o widget
Configurações salvas significam que o widget agora as pede ao servidor, e uma requisição nova é mais uma forma de falhar. Por isso dei a ela o mínimo de poder que consegui:
É feita uma vez por carregamento de página, e o navegador guarda a resposta por um minuto.
Não conta na sua cota mensal da API. Cota não existe para contar uma consulta de configurações a cada visualização de página.
Se falhar, o widget volta a ser o chat simples de antes. O visitante vê menos abas, nunca um erro.
O que deixei de fora
Isto não é um chat ao vivo. Não há atendente esperando do outro lado: o assistente responde com base nos seus artigos, e suas instruções dizem para onde ele deve mandar as pessoas quando não souber responder.
O widget também não se ativa sozinho. Todo widget já instalado continua um chat simples até você marcar as abas no painel.
Como ativar
A tag de script recebe a atualização sem nenhuma mudança no seu site. No React, atualize para @kookee/react 1.11.0 e @kookee/sdk 1.11.0. Depois abra Widget do site → Personalizar no seu projeto e ative as abas — Adicione as abas Início e Ajuda ao seu widget mostra o passo a passo, e Instale o widget no seu site cobre a primeira instalação.