O card promocional no chat

Um card com imagem, título, botão e link de texto dentro da janela do chat, por exemplo, para seu plano pago. Configuração na conta, público, ocultação para clientes pagantes e controle por JavaScript.

O card promocional permite mostrar sua própria oferta dentro da janela do chat, normalmente seu plano pago. Ele tem imagem, título, texto curto, botão grande e um link de texto abaixo. Aparece no topo da conversa, na tela inicial do chat ou nos dois lugares.

O card não é uma mensagem: não aparece no histórico que sua equipe vê, e os visitantes não podem dispensá-lo. O botão e o link de texto abrem seus destinos em uma nova aba.

Configuração

Você encontra o card promocional na conta, em Projeto → Aparência → Card promocional. A prévia do chat nessa página mostra o card enquanto você digita.

Título – obrigatório, até 80 caracteres.
Texto abaixo – opcional, até 200 caracteres.
Imagem – opcional, um endereço que comece com https://. Sem imagem, o card contém apenas texto.
Texto do botão – obrigatório, até 40 caracteres, por exemplo, “Teste grátis por 30 dias”.
Link do botão – obrigatório, a página para a qual o botão leva.
Link de texto – opcional, até 60 caracteres, por exemplo, “Ver todos os planos”. Se adicionar um link de texto, também será obrigatório um destino do link. O widget acrescenta a seta no final por conta própria.
Cor própria para botão e destaque – sem marcar a opção, o card usa a cor da marca. O rótulo do botão fica claro ou escuro automaticamente para continuar legível.
Onde o card aparece – “Na conversa, no topo” e/ou “Na tela inicial”. Para a segunda opção, a tela inicial precisa estar ativada.
Quem vê – todos os visitantes ou apenas os não identificados (veja abaixo).

Use endereços que comecem com https:// para o link do botão e o destino do link. O widget só mostra o botão e o link de texto com destino https.

O card só pode ser ativado quando estiver completo: com título, texto do botão, link do botão e pelo menos um local de exibição. Se faltar algo, ele é salvo como rascunho, e a conta informa o que falta.

Os textos valem no idioma padrão do projeto. Após salvar, leva até um minuto para os visitantes verem a alteração.

Ocultar o card de clientes pagantes

Clientes que já pagam não precisam de um anúncio do plano pago. O reactive.chat não conhece os planos dos seus usuários; seu site conhece. Há três formas de lidar com isso.

1. Público “Somente visitantes não identificados”. Se seu site já identifica usuários com ReactiveChat('identify', …) (com userId ou email), esses usuários deixam de ver o card. Isso basta se apenas clientes pagantes tiverem login com você.

2. Uma linha no script da página, assim que você souber que o usuário paga:

ReactiveChat('promo', false);

Se essa linha puder ser executada antes do carregamento do código de incorporação, coloque isto antes dela:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

3. Um atributo no código de incorporação, se seu servidor já entrega a página de forma diferente para clientes pagantes:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-promo="false"
        async></script>

As duas opções valem apenas para a página em que estão e somente para aquela visualização. ReactiveChat('promo', true) mostra o card novamente conforme configurado na conta.

Ajustar o card por página

Em vez de true ou false, você pode passar um objeto. Seus campos substituem as configurações da conta nessa página; tudo o que omitir vem da conta.

ReactiveChat('promo', {
  titel: 'Annual plan: 2 months free',
  knopf: 'Switch now',
  ziel: 'https://www.your-domain.com/pricing?annual=1'
});

Os nomes dos campos são os mesmos da conta (em alemão):

titel – título (até 80 caracteres),
text – texto abaixo (até 200 caracteres),
bild – endereço da imagem que começa com https://,
knopf e ziel – texto do botão (até 40 caracteres) e link do botão,
link_text e link_ziel – link de texto (até 60 caracteres) e seu destino,
farbe – cor própria como #rrggbb,
orte – uma lista de "gespraech" (na conversa) e "start" (tela inicial); se nem o objeto nem a conta definirem isso, vale ["gespraech"],
zielgruppe – "alle" (todos) ou "anonym" (somente visitantes não identificados).

Você também pode fornecer textos por idioma, por exemplo, titel: { en: 'Annual plan', de: 'Jahrestarif' }. Textos mais longos são encurtados.

Um objeto mostra o card nessa página mesmo que esteja desativado na conta. Nesse caso, forneça tudo: pelo menos titel e, para um botão, também knopf e ziel.

Exibições e cliques

Na conta, abaixo do card promocional, a seção Desempenho mostra exibições, cliques no botão e no link de texto e a taxa de cliques, somados para os últimos 7 e 30 dias e por dia. Por visitante e dia, contam no máximo uma exibição por local e um clique por destino. A prévia na conta não conta, nem um card exibido apenas por ReactiveChat('promo', {...}) enquanto estiver desativado na conta.

Eventos para sua própria análise

Além disso, dois eventos no script da página informam o que acontece com o card, por exemplo, para repassá-los à sua ferramenta de análise.

ReactiveChat('on', 'promo:shown', function (e) {
  // e.ort: "gespraech" (conversation) or "start" (start page)
});

ReactiveChat('on', 'promo:click', function (e) {
  // e.ziel: "knopf" (button) or "link" (text link), e.ort: "gespraech" or "start"
});

promo:shown dispara uma vez por local e visualização de página, e somente quando a janela do chat está aberta com o card. Ninguém viu um card dentro de um chat fechado. promo:click dispara a cada clique no botão ou no link de texto.

Se o card não aparecer

Está ativado? Um card incompleto permanece como rascunho.
Até um minuto pode passar após salvar até os visitantes verem a alteração.
Local “tela inicial”: a tela inicial do chat está ativada?
Público “não identificados”: se seu site identifica o visitante com ReactiveChat('identify', …), ele não vê o card.
Desativado nesta página? Procure data-rc-promo="false" no código de incorporação e ReactiveChat('promo', false) nos scripts.
Botão ou link de texto ausente: o destino não começa com https://.

Como abrir o chat por um link ou botão do seu site está descrito em Abrir o chat por um link ou botão próprio. Os conceitos básicos de incorporação estão em Incorporar o widget.