Menu
Feedback
Comece aqui
Tutoriais


Como ativar o app Carrinho Compartilhável (Social Selling)
7 min de leitura

O app Carrinho Compartilhável permite que vendedores selecionem produtos para seus clientes e compartilhem o carrinho preenchido por canais como WhatsApp, Facebook Messenger e e-mail.

{"base64":"  ","img":{"width":1280,"height":676,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1771914,"url":"https://images.ctfassets.net/alneenqid6w5/sf2zbYOG7janUXWbgkajd/93aa5f4ea002c5877a9620722af67890/Jy98kJ.gif"}}

Este artigo explica como instalar o app e configurar a funcionalidade na sua loja. Ao concluir os passos de ativação, seus vendedores poderão seguir as instruções de uso para iniciar suas estratégias de Social Selling.

Instalação

Para instalar o app na sua loja, siga os passos a seguir:

  1. Acesse a página do app na VTEX App Store.
  2. Clique no botão Obter app.
  3. Digite o nome da sua conta no pop-up e clique em Confirmar.
  4. Leia os termos de serviço e clique no botão Instalar.

Ao concluir estes passos, o app será instalado na conta informada. O próximo passo é rever as configurações do app para ajustá-lo às necessidades da sua loja.

O nome da sua conta é o identificador usado para acessar seu Admin, no lugar de {accountName} no endereço: https://<span class="c-link">{accountName}</span>.myvtex.com/admin

Configuração

Ao finalizar a instalação do app na sua loja, você será redirecionado para sua página de configuração. Ela pode ser encontrada em Apps > Meus Apps > Social Selling > Configurações.

Confira os detalhes de cada configuração a seguir. Caso necessite fazer algum ajuste, não se esqueça de clicar no botão Salvar para que as mudanças sejam aplicadas na sua loja.

Ativar app

Quando ativada, esta configuração faz com que a interface de compartilhamento de carrinho apareça para usuários que acessarem sua loja pelo link:

https://{Endereço web da sua loja}/checkout/?socialselling=on

Quando desativada, a interface deixa de aparecer para todos usuários.

Adicionar vendedor

Esta configuração permite ativar a identificação de vendedores através de campos específicos do pedido.

  • Ativo: permite exibir ou ocultar o botão Adicionar código de vendedor na interface de compartilhamento de carrinho.

  • Adicionar utmiCampaign: disponibiliza utmiCampaign para preenchimento.

  • Adicionar marketingTag: disponibiliza marketingTag para preenchimento.

A escolha do campo em que o código do vendedor será inserido depende das necessidades da loja. No formulário de pedido utmiCampaign recebe apenas um valor, enquanto marketingTags pode ser preenchido com múltiplos valores.

Se ambas opções estiverem selecionadas, o vendedor precisará indicar qual campo está preenchendo na interface de compartilhamento de carrinho.

As informações registradas poderão ser encontradas no card Promoções e Parcerias nos detalhes do pedido ou dentro do objeto marketingData retornado ao obter as informações do pedido usando a Orders API.

Canais

Esta configuração permite ativar os canais de compartilhamento desejados na interface de compartilhamento de carrinho.

  • Whatsapp
  • Facebook Messenger
  • SMS
  • Link
  • Gmail
  • Email

Lembre-se que o vendedor precisará fazer login nas contas de redes sociais e aplicativos utilizados para compartilhamento no dispositivo que utilizarem para montar o carrinho.

Customização (opcional)

Caso você queira customizar as cores dos botões da interface de compartilhamento de carrinho da sua loja, isto é possível através de uma customização do Checkout.

Na imagem a seguir, a opção A apresenta as cores originais e a opção B uma customização possível.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAECAIAAAArjXluAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAJUlEQVR4nGN48fPx0YWHGWoWT4o1i2OwTSuUZVZgyMloUJfWBAC/Mwqj4CU3fwAAAABJRU5ErkJggg==","img":{"src":"https://images.ctfassets.net/alneenqid6w5/7qzGILGsBqu6sD2n052VQl/ba27c3afc9c744907ac707f10658e8e1/shareable-cart-ui-customization.png","width":200,"height":400,"type":"png"}}

O código abaixo deve ser adicionado no fim do arquivo checkout5-custom.css ou checkout6-custom.css, disponível para customização em Configurações da Loja > Checkout > Código. A escolha de qual deve ser editado depende da versão do Checkout utilizada pela sua loja.

Atenção: Erros na customização do checkout podem quebrar o fluxo de compra dos seus cliente. Peça ajuda para seu time técnico se não souber o que está fazendo.

Em seguida, basta alterar as propriedades no código CSS conforme a necessidade.


/* START Pick Color Nuevo Carrito */
.sb-b-erasecart .sb-icon,
.sb-b-erasecart .sb-label,
.sb-b-erasecart a:hover .sb-icon {
color: #fff!important;
background-color: #ee38ed!important
}
/* END Pick Color Nuevo Carrito */
/* START Pick Color Codigo Vendedor */
.sb-b-codigovendedor .sb-icon,
.sb-b-codigovendedor .sb-label,
.sb-b-codigovendedor a:hover .sb-icon {
color: #fff!important;
background-color: #a62a9a!important
}
/* END Pick Color Codigo Vendedor */
/* START Pick Color Whatsapp */
.sb-b-whatsapp .sb-icon,
.sb-b-whatsapp .sb-label,
.sb-b-whatsapp a:hover .sb-icon {
color: #fff!important;
background-color: #ad28ac!important
}
/* END Pick Color Whatsapp */
/* START Pick Color Facebook Messenger */
.sb-b-facebook-messenger .sb-icon,
.sb-b-facebook-messenger .sb-label,
.sb-b-facebook-messenger a:hover .sb-icon {
color: #fff!important;
background-color: #8e208d!important
}
/* END Pick Color Facebook Messenger */
/* START Pick Color SMS */
.sb-b-sms .sb-icon,
.sb-b-sms .sb-label,
.sb-b-sms a:hover .sb-icon {
color: #fff!important;
background-color: #751b74!important
}
/* END Pick Color SMS */
/* START Pick Color Link */
.sb-b-link .sb-icon,
.sb-b-link .sb-label,
.sb-b-link a:hover .sb-icon {
color: #fff!important;
background-color: #5a155a!important
}
/* END Pick Color Link */
/* START Pick Color GMAIL */
.sb-b-gmail .sb-icon,
.sb-b-gmail .sb-label,
.sb-b-gmail a:hover .sb-icon {
color: #fff!important;
background-color: #480b48!important
}
/* END Pick Color GMAIL */
/* START Pick Color Email */
.sb-b-email .sb-icon,
.sb-b-email .sb-label,
.sb-b-email a:hover .sb-icon {
color: #fff!important;
background-color: #330133!important
}
/* END Pick Color Email */
/* START Pick Color BUTTON OK */
.swal2-styled.swal2-confirm {
border: 0!important;
border-radius: .25em!important;
background: initial!important;
background-color: #31c431!important;
color: #fff!important;
font-size: 1.0625em!important;
}
/* END Pick Color BUTTON OK */
/* START Pick Color BUTTON CANCEL */
.swal2-styled.swal2-cancel {
border: 0!important;
border-radius: .25em!important;
background: initial!important;
background-color: #a0a0a0!important;
color: #fff!important;
font-size: 1.0625em!important;
}
/* END Pick Color BUTTON CANCEL */

Perguntas frequentes (FAQ)

Como essa funcionalidade é possível tecnicamente?

O app utiliza a funcionalidade de carrinho compartilhado da VTEX, que permite que mais de um cliente adicione, retire ou atualize itens e informações de um mesmo carrinho.

De que forma identificar vendedor e promoção?

Apresentamos algumas possibilidades na tabela abaixo. Recomendamos que o time técnico de suporte à loja avalie a forma mais simples de atender às necessidades do negócio.

CenárioDescriçãoDetalhes
1utmi_campaign + marketingTag

utmiCampaign = codigoVendedor

marketingTags[1] = promo10off

2marketingTag

marketingTags[1] = codigoVendedor

marketingTags[2] = promo10off

3utmi_campaign + cupom

utmiCampaign = codigoVendedor

coupon = cupomDesconto

4cupomcoupon = cupomDescontoVendedor

No Cenário 4 é necessário gerar cupons em massa, para que cada vendedor tenha seu próprio cupom para identificação e ativação de desconto.

Quem preenche os dados pessoais e o endereço: vendedor ou cliente?

O vendedor não precisa fazer login para iniciar a navegação e selecionar os produtos. O preenchimento dos dados pessoais e do endereço pelo vendedor é opcional.

Sendo assim, tanto o vendedor quanto o cliente podem preenchê-los, conforme a preferência do cliente. Já os dados de pagamento devem ser sempre preenchidos pelo cliente.

O vendedor terá acesso a dados sensíveis, como endereço e pagamento?

Não, o vendedor não terá acesso a dados sensíveis do cliente. Mesmo que o vendedor preencha os dados pessoais e de entrega, o cliente poderá alterá-los ao receber o link.

Sendo assim, mesmo que o cliente receba um link com os dados do vendedor vinculados, ele precisa confirmar em nome de quem e em qual endereço, de fato, será feita a compra.

De que forma o vendedor pode abordar o cliente?

Para que a abordagem do vendedor seja efetiva, o ideal é que se apresentem condições promocionais diferenciadas para privilegiar as vendas assistidas em relação às compras realizadas diretamente pelo e-commerce.

Se o vendedor já possui um histórico de contato com o cliente, ele pode entrar em contato e assistir a venda em tempo real, criando o carrinho a medida que conversa com o cliente.

Caso não possua este contato direto, o vendedor pode criar opções de carrinhos de acordo com a estratégia de marketing e/ou o perfil do cliente. E então abordar o cliente de forma de ativa, apresentando os diferenciais de cada opção.

Como o vendedor pode acompanhar os pedidos?

O cliente sempre terá acesso ao acompanhamento de seu pedido pelo e-mail cadastrado do pedido. Por isso é essencial garantir que este seja preenchido corretamente.

Para que o vendedor também tenha acesso pode-se:

  • Utilizar o SAC da empresa para atendimento dos vendedores
  • Criar uma página customizada de consulta de vendas

A página customizada de consulta de vendas seria desenvolvida usando as APIs da VTEX para consultar os pedidos que utilizaram o código do vendedor, dar visibilidade do status de cada pedido e facilitar o controle da conversão, entrega e cálculo de comissão.

Como eu altero um carrinho já compartilhado?

Basta abrir o link compartilhado para carregar o carrinho e fazer as alterações necessárias. Todos usuários com acesso ao link podem ver itens, adicionar e remover produtos, e até pagar pelo pedido.

Se eu alterar os itens ou dados de um carrinho, isso afeta outros carrinhos compartilhados anteriormente?

Não. Todas alterações afetam somente o carrinho que foi acessado, identificável pelo parâmetro orderFormId visto no link compartilhado.

Por quanto tempo um carrinho compartilhado existe?

Cada carrinho compartilhado criado permanece válido até o fechamento da compra ou por um período máximo de 2 anos.

Por que devo gerar um novo carrinho a cada nova venda?

O carrinho compartilhado funciona como um carrinho de compras normal - cada comprador deve ter o seu. O compartilhamento não cria vários carrinhos com os itens escolhidos, apenas permite que mais de um usuário modifique o seu conteúdo.

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback