{"section":"tutorials","requestedLocale":"pt","requestedSlug":"como-ativar-o-app-carrinho-compartilhavel","locale":"pt","slug":"como-ativar-o-app-carrinho-compartilhavel","path":"docs/pt/tutorials/pedidos/televendas-e-atendimento-ao-cliente/como-ativar-o-app-carrinho-compartilhavel.md","branch":"main","content":"O app [Carrinho Compartilhável](https://apps.vtex.com/vtex-social-selling/p) permite que vendedores selecionem produtos para seus clientes e compartilhem o carrinho preenchido por canais como WhatsApp, Facebook Messenger e e-mail.\n\n![Shareable Cart Demo](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pedidos/televendas-e-atendimento-ao-cliente/como-ativar-o-app-carrinho-compartilhavel_1.gif)\n\nEste 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](/pt/docs/tutorials/como-usar-o-app-carrinho-compartilhavel) para iniciar suas estratégias de Social Selling.\n\n## Instalação\n\nPara instalar o app na sua loja, siga os passos a seguir:\n\n1. Acesse a [página do app](https://apps.vtex.com/vtex-social-selling/p) na VTEX App Store.\n2. Clique no botão __Obter app__.\n3. Digite o nome da sua conta no pop-up e clique em __Confirmar__.\n4. Leia os termos de serviço e clique no botão __Instalar__.\n\nAo 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.\n\n> ⚠️ O nome da sua conta é o identificador usado para acessar seu Admin, no lugar de \\{accountName\\} no endereço: `https://{accountName}.myvtex.com/admin`\n\n## Configuração\n\nAo 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*.\n\nConfira 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.\n\n### Ativar app\n\nQuando ativada, esta configuração faz com que a interface de compartilhamento de carrinho apareça para usuários que acessarem sua loja pelo link:\n\n`https://{Endereço web da sua loja}/checkout/?socialselling=on`\n\nQuando desativada, a interface deixa de aparecer para todos usuários.\n\n### Adicionar vendedor\n\nEsta configuração permite ativar a identificação de vendedores através de campos específicos do pedido.\n\n- __Ativo__: permite exibir ou ocultar o botão __Adicionar código de vendedor__ na interface de compartilhamento de carrinho.\n\n- __Adicionar utmiCampaign__: disponibiliza `utmiCampaign` para preenchimento.\n\n- __Adicionar marketingTag__: disponibiliza `marketingTag` para preenchimento.\n\nA 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.\n\nSe ambas opções estiverem selecionadas, o vendedor precisará indicar qual campo está preenchendo na interface de compartilhamento de carrinho.\n\n> ℹ️ As informações registradas poderão ser encontradas no card **Promoções e Parcerias** nos [detalhes do pedido](/pt/docs/tracks/ver-detalhes-do-pedido) ou dentro do objeto `marketingData` retornado ao obter as informações do pedido usando a [Orders API](https://developers.vtex.com/docs/api-reference/orders-api#get-/api/oms/pvt/orders/-orderId-).\n\n### Canais \n\nEsta configuração permite ativar os canais de compartilhamento desejados na interface de compartilhamento de carrinho.\n\n- Whatsapp\n- Facebook Messenger\n- SMS\n- Link\n- Gmail\n- Email\n\n> ⚠️ 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.\n\n## Customização (opcional)\n\nCaso 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](/pt/tutorial/configurar-template-no-smartcheckout--frequentlyAskedQuestions_599). \n\nNa imagem a seguir, a opção A apresenta as cores originais e a opção B uma customização possível.\n\n![shareable-cart-ui-customization](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pedidos/televendas-e-atendimento-ao-cliente/como-ativar-o-app-carrinho-compartilhavel_2.png)\n\nO 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.\n\n> ❗ **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.\n\nEm seguida, basta alterar as propriedades no código CSS conforme a necessidade. \n\n```\n/* START Pick Color Nuevo Carrito */\n.sb-b-erasecart .sb-icon,\n.sb-b-erasecart .sb-label,\n.sb-b-erasecart a:hover .sb-icon {\n color: #fff!important;\n background-color: #ee38ed!important\n}\n/* END Pick Color Nuevo Carrito */\n/* START Pick Color Codigo Vendedor */\n.sb-b-codigovendedor .sb-icon,\n.sb-b-codigovendedor .sb-label,\n.sb-b-codigovendedor a:hover .sb-icon {\n color: #fff!important;\n background-color: #a62a9a!important\n}\n/* END Pick Color Codigo Vendedor */\n/* START Pick Color Whatsapp */\n.sb-b-whatsapp .sb-icon,\n.sb-b-whatsapp .sb-label,\n.sb-b-whatsapp a:hover .sb-icon {\n color: #fff!important;\n background-color: #ad28ac!important\n}\n/* END Pick Color Whatsapp */\n/* START Pick Color Facebook Messenger */\n.sb-b-facebook-messenger .sb-icon,\n.sb-b-facebook-messenger .sb-label,\n.sb-b-facebook-messenger a:hover .sb-icon {\n color: #fff!important;\n background-color: #8e208d!important\n}\n/* END Pick Color Facebook Messenger */\n/* START Pick Color SMS */\n.sb-b-sms .sb-icon,\n.sb-b-sms .sb-label,\n.sb-b-sms a:hover .sb-icon {\n color: #fff!important;\n background-color: #751b74!important\n}\n/* END Pick Color SMS */\n/* START Pick Color Link */\n.sb-b-link .sb-icon,\n.sb-b-link .sb-label,\n.sb-b-link a:hover .sb-icon {\n color: #fff!important;\n background-color: #5a155a!important\n}\n/* END Pick Color Link */\n/* START Pick Color GMAIL */\n.sb-b-gmail .sb-icon,\n.sb-b-gmail .sb-label,\n.sb-b-gmail a:hover .sb-icon {\n color: #fff!important;\n background-color: #480b48!important\n}\n/* END Pick Color GMAIL */\n/* START Pick Color Email */\n.sb-b-email .sb-icon,\n.sb-b-email .sb-label,\n.sb-b-email a:hover .sb-icon {\n color: #fff!important;\n background-color: #330133!important\n}\n/* END Pick Color Email */\n/* START Pick Color BUTTON OK */\n.swal2-styled.swal2-confirm {\n border: 0!important;\n border-radius: .25em!important;\n background: initial!important;\n background-color: #31c431!important;\n color: #fff!important;\n font-size: 1.0625em!important;\n}\n/* END Pick Color BUTTON OK */\n/* START Pick Color BUTTON CANCEL */\n.swal2-styled.swal2-cancel {\n border: 0!important;\n border-radius: .25em!important;\n background: initial!important;\n background-color: #a0a0a0!important;\n color: #fff!important;\n font-size: 1.0625em!important;\n}\n/* END Pick Color BUTTON CANCEL */\n```\n\n## Perguntas frequentes (FAQ)\n\n### Como essa funcionalidade é possível tecnicamente?\n\nO app utiliza a funcionalidade de [carrinho compartilhado](/pt/docs/tutorials/o-que-e-o-carrinho-compartilhado) da VTEX, que permite que mais de um cliente adicione, retire ou atualize itens e informações de um mesmo carrinho.\n\n### De que forma identificar vendedor e promoção?\n\nApresentamos 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.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
CenárioDescriçãoDetalhes
**1**utmi_campaign + marketingTag\n `utmiCampaign = codigoVendedor`\n `marketingTags[1] = promo10off`\n
**2**marketingTag\n `marketingTags[1] = codigoVendedor`\n `marketingTags[2] = promo10off`\n
**3**utmi_campaign + cupom\n `utmiCampaign = codigoVendedor`\n `coupon = cupomDesconto`\n
**4**cupom`coupon = cupomDescontoVendedor`
\n\n> ℹ️ No Cenário 4 é necessário [gerar cupons em massa](/pt/tutorial/consigo-gerar-um-cupom-em-massa--frequentlyAskedQuestions_348), para que cada vendedor tenha seu próprio cupom para identificação e ativação de desconto.\n\n### Quem preenche os dados pessoais e o endereço: vendedor ou cliente?\n\nO 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__.\n\nSendo 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.__\n\n### O vendedor terá acesso a dados sensíveis, como endereço e pagamento?\n\nNã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.\n\nSendo 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.\n\n### De que forma o vendedor pode abordar o cliente?\n\nPara 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.\n\n__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.\n\n__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.\n\n### Como o vendedor pode acompanhar os pedidos?\n\nO cliente sempre terá acesso ao acompanhamento de seu pedido pelo e-mail cadastrado do pedido. __Por isso é essencial garantir que este seja preenchido corretamente.__\n\nPara que o vendedor também tenha acesso pode-se:\n\n- Utilizar o SAC da empresa para atendimento dos vendedores\n- Criar uma página customizada de consulta de vendas\n\nA página customizada de consulta de vendas seria desenvolvida usando as [APIs da VTEX](https://developers.vtex.com/docs/getting-started-list-of-rest-apis) 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.\n\n### Como eu altero um carrinho já compartilhado?\n\nBasta 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. \n\n### Se eu alterar os itens ou dados de um carrinho, isso afeta outros carrinhos compartilhados anteriormente?\n\nNão. Todas alterações afetam somente o carrinho que foi acessado, identificável pelo parâmetro orderFormId visto no link compartilhado.\n\n### Por quanto tempo um carrinho compartilhado existe?\n\nCada carrinho compartilhado criado permanece válido até o fechamento da compra ou por um período máximo de 2 anos.\n\n### Por que devo gerar um novo carrinho a cada nova venda?\n\nO 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."}