{"section":"tutorials","requestedLocale":"en","requestedSlug":"how-to-activate-the-shareable-cart-app","locale":"en","slug":"how-to-activate-the-shareable-cart-app","path":"docs/en/tutorials/orders/telesales-and-customer-service/how-to-activate-the-shareable-cart-app.md","branch":"main","content":"The [Shareable Cart](https://apps.vtex.com/vtex-social-selling/p) app allows sales assistants to select products for their customers and share the cart through channels such as WhatsApp, Facebook Messenger and email.\n\n![Shareable Cart Demo](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/orders/telesales-and-customer-service/how-to-activate-the-shareable-cart-app_1.gif)\n\nThis article explains how to install the app and configure this functionality in your store. After completing the activation steps, your sales assistants will be able to [follow the instructions](/en/docs/tutorials/how-to-use-the-shareable-cart-app) to start your Social Selling strategies.\n\n## Installation \n\nTo install the app in your store, follow the steps below:\n\n1. Access the [app page](https://apps.vtex.com/vtex-social-selling/p) on VTEX App Store.\n2. Click on the **Get** button.\n3. Enter your account name in the **Account Info** field.\n4. Click on the **Confirm order and begin installation button**.\n5. Click on the **Install** button.\n\nAfter you complete these steps, the app will be installed on the account you entered. The next step is to review the app's settings to adjust it to meet your store's needs. \n\n> ⚠️ Your account name is the identifier used to access your Admin. You must replace the \\{accountName\\} with it in the link `https://{accountName}.myvtex.com/admin`\n\n## Configuration\n\nWhen you finish installing the app in your store, you will be redirected to the configuration page. It can be found in *Apps > My Apps > Social Selling > Settings*.\n\nCheck the details of each setting below. If you make any adjustments, be sure to click on the **Save** button for the changes to be applied in your store.\n\n### Activating the app\n\nWhen enabled, this setting causes the cart sharing interface to appear for users who access your store through the link:\n\n`https://{Your store web address}/checkout/?socialselling=on`\n\nWhen disabled, the interface no longer appears for all users.\n\n### Adding a sales assistant\n\nThis configuration allows you to activate the sales assistant identification through specific fields of the order.\n\n- **Active**: allows you to show or hide the **Add sales assistant code** button on the cart sharing interface.\n\n- **Add utmiCampaign**: provides utmiCampaign for filling `utmiCampaign` for filling\n\n- **Add marketingTag**: provides `marketingTag` for filling\n\nThe field in which the salesperson code will be inserted depends on the store needs. In the order form, `utmiCampaign` receives only one value, while `marketingTags` can be filled with multiple values.\n\nIf both options are selected, the sales assistant needs to indicate which field he is filling in the cart sharing interface.\n\n> ℹ️ The added information can be found on the **Promotions and Partnerships card** in the [orders details](/en/docs/tracks/seeing-order-details) or within the `marketingData` object returned when obtaining the order information using the [Orders API](https://developers.vtex.com/docs/api-reference/orders-api#get-/api/oms/pvt/orders/-orderId-).\n\n### Channels\n\nThis setting allows you to activate the desired sharing channels in the cart sharing interface.\n\n- Whatsapp\n- Facebook Messenger\n- SMS\n- Link\n- Gmail\n- Email\n\n> ⚠️ Sales assistants will need to log in to the social media accounts and applications used for sharing on the device they use to add items to the cart.\n\n## Customization (optional)\n\nYou can change the button colors on your store's cart sharing interface through [Checkout customization](/en/tutorial/configurar-template-no-smartcheckout--frequentlyAskedQuestions_599). \n\nIn the image below, option A shows the original colors and option B shows one possible customization.\n\n![shareable-cart-ui-customization](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/orders/telesales-and-customer-service/how-to-activate-the-shareable-cart-app_2.png)\n\nThe code below must be added at the end of the `checkout5-custom.css` or `checkout6-custom.css` file, available for customization in *Store Settings > Checkout > Code*. The file that should be edited depends on the version of the Checkout used by your store.\n\n> ❗ **Warning:** Errors in the checkout customization can break your customers’ purchase flow. If you do not understand the code below, ask your technical team for help.\n\nThen change the properties in the CSS code according to your needs.\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## Frequently Asked Questions (FAQ)\n\n### How is this functionality technically possible?\n\nThe app uses VTEX's [shared cart](/en/docs/tutorials/what-is-the-shared-cart) functionality, which allows more than one customer to add, remove or update items and information from the same cart.\n\n### How to identify sales assistants and promotions?\n\nSee some possibilities in the table below. We recommend that the store's technical support team indicates which is the simplest way to meet your business needs.\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
ScenarioDescriptionDetails
**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 + coupon\n `utmiCampaign = codigoVendedor`\n `coupon = cupomDesconto`\n
**4**coupon`coupon = cupomDescontoVendedor`
\n\n> ℹ️ In Scenario 4 it is necessary to [generate coupons in bulk](/en/tutorial/how-to-generate-massive-coupons--frequentlyAskedQuestions_348), so that each sales assistant has their own coupon for identification and discount activation.\n\n### Who fills in personal details and addresses, sales assistants or customers?\n\nThe sales assistant does not need to log in to start browsing and to select the products. The filling in of personal data and address by the sales assistant is **optional**.\n\nTherefore, both the sales assistant and the customer can fill in this data, and it will depend on the customer's preference. **Payment details must always be filled in by the customer**.\n\n### Will the sales assistant have access to sensitive data, such as address and payment information?\n\nNo, the sales assistant will not have access to sensitive customer data. Even if the sales assistant fills in personal and delivery details, customers can change them when they receive the link.\n\nTherefore, even if the customer receives a link with the data filled in by the sales assistant, he/she **needs** to confirm on behalf of whom and at which address the purchase will be made.\n\n### How can sales assistants approach customers?\n\nIn order for the approach to be effective, ideally, differentiated promotional conditions should be presented to favor assisted sales over purchases made directly through e-commerce.\n\n**If the sales assistant had previous contact** with the customer, he/she can get in touch and assist the sale in real-time, creating the cart as he/she talks to the customer.\n\n**If the sales assistant doesn't have direct contact** with the customer, he/she can create cart options according to the store’s marketing strategy and/or the customer's profile, and then approach the customer in an active way.\n\n### How can the sales assistant track orders?\n\nThe customer will always have access to the tracking of his order through the email added to the order. **So it is important to make sure that it is filled out correctly**.\n\nFor the sales assistant to also have access, you can:\n\n- Use the company's customer support to assist sales assistants\n- Create a custom sales query page\n\nThe custom sales query page would be developed using [VTEX APIs](https://developers.vtex.com/docs/getting-started-list-of-rest-apis) to consult which orders used sales assistant codes, give visibility to each order status and facilitate the control of conversion, delivery and commission calculation.\n\n### How do I change a cart that has already been shared? \n\nSimply open the shared link to load the cart and make the necessary changes. All users with access to the link can see items, add and remove products, and even pay for the order. \n\n### If I change cart items or information, does it affect other previously shared carts?\n\nNo. All changes affect only the cart that has been accessed, identifiable by the orderFormId parameter in the shared link. \n\n### How long does a shared cart exist for?\n\nEach shared cart created is valid until the purchase is completed or for up to 2 years.\n\n### Why should I create a new cart for every new sale?\n\nThe shared cart works just like a normal shopping cart - every buyer must have one. Sharing does not create multiple carts with the selected items, it only allows more than one user to modify its content."}