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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/AOL87dTz4kRIR5CRkQBcYV1JTUwFBQVwcHAA2u/iuc3BTk9PmpmahFETAKHpaI0AAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_1.png","width":544,"height":360,"type":"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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAI0lEQVR4nGP4/fv7jm1bNm1a++b1CwZfX28+Ph52dmZDIwMAzisLkRD77AcAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_3.png","width":1318,"height":546,"type":"png"}}$

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

Defina o Layout:

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGOwsbZlFhUPDQtYuGoLw+QJE1u7eq5du/Tl+28Gdg52AwN9V1c3GxsbACRlDrqNdLFDAAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_4.png","width":1098,"height":776,"type":"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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/ABISEp+fn1RUVMfHxwBXVlbV1dVsbGzx8fEAPT09rKysYGBgbGxsVSwSHZwn4GwAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_6.png","width":842,"height":678,"type":"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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGOwsbaYMnliRWVZSGgwAB5XBMtAlxoCAAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Conversational%20Commerce/VTEX%20Assisted%20Sales%20(SuiteShare)/chat_9.png","width":1294,"height":414,"type":"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.