Tours do produto e “Mostre-me”

Mostrar em vez de explicar: um tour do produto guia seus visitantes passo a passo pela sua página. A página fica levemente escurecida, um anel destaca o elemento e, ao lado, há uma bolha com seu texto e os botões Zurück (voltar), Weiter (avançar) e Beenden (encerrar).

Criar tours

Em /app/projects/{id}, na aba Textos e formulários, seção Tours do produto, você informa seus tours em JSON. Deixar vazio e salvar remove todos os tours.

[
  {
    "id": "erste-schritte",
    "name": "First steps",
    "steps": [
      { "selector": "#konto", "title": "Your account", "text": "Change your details here." },
      { "selector": ".rechnung", "text": "And the invoices are here.", "placement": "top" }
    ]
  }
]

Um tour tem:

• id – obrigatório, único. Letras minúsculas, dígitos, - e _, começa com letra ou dígito, no máximo 48 caracteres. Você inicia o tour por ele.
• name – um nome para você.
• steps – de 1 a 30 etapas.

Uma etapa tem:

• selector – obrigatório. Um seletor CSS para o elemento na sua página, no máximo 300 caracteres.
• text – obrigatório. O texto na bolha.
• title – opcional, um título.
• placement – bottom (padrão) ou top. É uma preferência, não uma promessa: se a bolha não couber acima, vai para baixo.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – rótulos próprios opcionais para os botões Avançar, Voltar, Concluir e Encerrar.

Limites: no máximo 20 tours por projeto e 32 KB no total. Ao salvar, a conta verifica o JSON e informa o erro se houver algo incorreto.

Iniciar um tour

Você inicia tours pelo código, por exemplo, por um botão “Iniciar tour” ou após o primeiro login:

ReactiveChat('tour', 'erste-schritte');

A chamada retorna true se o tour começar; caso contrário, false. Você pode encerrá-lo com:

ReactiveChat('tourStop');

O visitante encerra um tour com Beenden, na última etapa com Fertig (concluir), ou com a tecla Escape. Um contador mostra em qual etapa está.

Se um elemento estiver ausente

Se o widget não encontrar o elemento de uma etapa, por exemplo, porque não existe nessa página ou está oculto, ele ignora a etapa. Se todos os elementos estiverem ausentes, o tour não começa, e a chamada retorna false. Por isso, verifique os seletores exatamente na página em que inicia o tour.

Design

Os tours têm design fixo e neutro, independente das cores da marca e do CSS personalizado. A bolha tem no máximo 320 px de largura. Sem rótulos próprios, os botões se chamam “Beenden”, “Zurück”, “Weiter” e “Fertig” em todos os idiomas. Por isso, para tours em páginas em inglês ou polonês, você define os campos i18n_* em cada etapa.

“Mostre-me”

Na resposta, o assistente de IA pode apontar para um controle na sua página, por exemplo, o botão “Adicionar ao carrinho”. Para isso, depois da primeira abertura do chat, o widget lê os controles visíveis da página atual.

• Se o elemento estiver claramente visível, um anel o destaca, com a primeira frase da resposta ao lado. A janela do chat permanece aberta.
• Se estiver coberto ou o visitante estiver no celular, aparece um botão Mostre-me na mensagem. Somente um clique nele mostra o elemento.
• Qualquer toque, a tecla Escape ou rolar para longe encerra a exibição.

O chat nunca fecha sozinho para isso.

Você pode desativar a leitura da página e, com ela, “Mostre-me” no código de incorporação:

data-rc-dom-spiegel="false"

Você exclui áreas individuais marcando-as com data-rc-private ou data-rc-ignore. Mais detalhes em Conhecimento e fontes.