Chat

VTEX Assisted Sales (SuiteShare)

O que vamos ver aqui: Como criar um chat, personalizar e incorporar no site.

Tenha um chat sem filas e sem que o seu cliente fique esperando horas para ser atendido. Envie ele diretamente para o seu WhatsApp.

Para começar você deve ter criado os links que serão utilizados no seu atendimento e um link âncora.

Importante: Para criar um chat é preciso ter um captura ou um seletivo criado. Se você ainda não criou, acesse os nossos artigos.

Acesse “Atrair” > “Chat”

${"base64":" ","img":{"width":544,"height":360,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":39055,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_1.png"}}$

Clique em “Novo”

${"base64":" ","img":{"width":1304,"height":744,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":177258,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_2.png"}}$

Selecione qual será o link do seu chat :

${"base64":" ","img":{"width":1318,"height":546,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":73522,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_3.png"}}$

Lembre-se: Ele pode ser uma Captura ou um Seletivo.

Defina o Layout:

${"base64":" ","img":{"width":1098,"height":776,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":127508,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_4.png"}}$

Você pode escolher as cores, mensagens e ir visualizando todas as alterações simultaneamente.

${"base64":" ","img":{"width":1440,"height":977,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":419065,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_5.png"}}$

Você também pode configurar o CTAs do seu chat, ou seja, definir quando ele vai abrir automaticamente para o seu cliente.

${"base64":" ","img":{"width":842,"height":678,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":112867,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_6.png"}}$

Veja um exemplo de “Houver uma intenção de sair da página”

${"base64":" ","img":{"width":1440,"height":745,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1317999,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_7.png"}}$

Defina onde mostrar o chat no seu site ou quando ele não irá aparecer:

${"base64":" ","img":{"width":986,"height":870,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":133740,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_8.png"}}$

Depois de definir o layout e os gatilhos, clique em “Salvar”

Para inserir o chat no seu site, acesse na aba “Chat” e clique no seletor e clique em “instruções de instalação” :

${"base64":" ","img":{"width":1294,"height":414,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":73325,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_9.png"}}$

Basta copiar e colar o código fornecido no “Body” do painel administrativo do seu site:

${"base64":" ","img":{"width":982,"height":1096,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":194044,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_10.png"}}$

E pronto, qualquer alteração feita no Chat dentro do painel da Suiteshare, já será alterado automaticamente no chat do seu site.