Call to Action

2 min de leitura

Não perca clientes que acessam o seu site, ou sua página de vendas e tenha alertas que aumentam suas conversões no WhatsApp que aparecem quando seu cliente tem a intenção de sair da sua página ou já esteja a um bom tempo no site.

Para configurar, acesse seu painel do VTEX Assisted Sales (SuiteShare) e clique em Atrair > Call to Action.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAALUlEQVR4nGOYv2TRxm2bbMCAYeLEibdv3+bj47OwtGTIzc29c+fuieOH4mOjAVMwEcNAavP3AAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_1.png","width":504,"height":432,"type":"png"}}$

Clique em “Novo”.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAI0lEQVR4nGPo37UweVN72oa2I99vMLBYKjHIMzAoMWgmugIAmhwJJU/UEqsAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_2.png","width":298,"height":142,"type":"png"}}$

Selecione o modelo.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGOwsbbMzc06d/bkubMnASKJBr3KmqrzAAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_3.png","width":1206,"height":384,"type":"png"}}$

Clique na opção de selecionar o modelo e escolha uma das opções.

${"base64":" ","img":{"width":1440,"height":221,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25584,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_4.png"}}$

Defina o “Layout”.

${"base64":" ","img":{"width":992,"height":730,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":133396,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_5.png"}}$

Imagem: Você pode editar a imagem inserindo uma imagem com URL válida. Defina o Título que irá chamar o cliente e a Descrição do CTA.

Defina as configurações do Botão.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHElEQVR4nGNgZGQICQnJycmZNGkSw8ePH//DAACRTQ/DRJGULAAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_6.png","width":986,"height":586,"type":"png"}}$

Qual será o link que ele será encaminhado quando o cliente clicar.

O Texto do botão que irá atrair o seu cliente.

Defina configurações, como por exemplo: Se o botão será centralizado ou não e também o tipo de animação.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJ0lEQVR4nGNwd3dfv379ITBgUFdXX79+/bVr10AcSUnJiorySjAAAIiBE0HWjp3cAAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_7.png","width":1000,"height":702,"type":"png"}}$

Defina se irá habilitar o Overlay , ou seja , se vai sobressair a tela (deixando o restante da tela escura).

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAI0lEQVR4nGNQVlbk4WBnZ2V2cnRguHL58vXr165fv/bv3x8AWmgLz9RsNOsAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_8.png","width":996,"height":614,"type":"png"}}$

Faça a configuração para mobile.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFklEQVR4nGPQ0ND48ePH/Xv3rl+/DgAuhwiB9XpSIAAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_9.png","width":988,"height":356,"type":"png"}}$

Defina os gatilhos de exibição do seu CTA.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/ABcYF6CgobKystfX1wALCwtISEh7e3v6+/sAjY2N6+vrxMTE////ZecVzqkpbWUAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_10.png","width":982,"height":826,"type":"png"}}$

Defina em quais locais do seu site irá aparecer a mensagem ou onde não irá aparecer:

${"base64":" ","img":{"width":986,"height":870,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":133707,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_11.png"}}$

Antes de clicar em “Salvar” clique em “preview” para confirmar todas as alterações.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGMwYGD4fyv594mIza0MACMWBcC8wYZ1AAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_12.png","width":272,"height":68,"type":"png"}}$

${"base64":" ","img":{"width":1256,"height":1062,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":167739,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/conversational-commerce/vtex-assisted-sales-suiteshare/call-to-action-suiteshare_13.png"}}$

Se não houver nenhuma alteração, clique em “Salvar”.

NOTA: Se você já tiver o código do chat instalado no seu site, não será preciso realizar nenhuma alteração, agora se você não tiver basta acessar esse link para ver as configurações de instalação.