{"section":"tutorials","requestedLocale":"en","requestedSlug":"extensibility-in-vtex-sales-app","locale":"en","slug":"extensibility-in-vtex-sales-app","path":"docs/en/tutorials/vtex-sales-app/extensibility-in-vtex-sales-app.md","branch":"main","content":"> ℹ️ This feature is in beta, which means we're working on improving it. If you have any questions, contact our [Support team](https://help.vtex.com/en/support).\n\n**Extensibility** is a feature that allows you to customize the default sales journey in VTEX Sales App by adding capabilities aligned with the store's business model. Stores can use it to integrate custom experiences at specific points of the interface without building a solution from scratch.\n\nThis article provides an overview of the feature, extension use cases, and implementation guidance.\n\n> ❗ Merchants and partners are responsible for implementing Sales App Extensibility. To do so, we recommend following our [developer documentation](https://developers.vtex.com/docs/guides/sales-app-extensions-implementation).\n\n## How extensibility works\n\nExtensibility is a native solution that allows stores to securely integrate with external APIs and interact with data from other applications. The feature uses predefined extension points to render components and add features without changing the main Sales App flow.\n\nSales App has eight extension points:\n\n- `cart.cart-list.after`\n- `cart.cart-item.after`\n- `cart.order-summary.after`\n- `pdp.sidebar.before`\n- `pdp.sidebar.after`\n- `pdp.content.after`\n- `menu.item`\n- `menu.drawer-content`\n\n> ℹ️ Learn more in [Exploring Sales App extensions](https://developers.vtex.com/docs/guides/exploring-sales-app-extensions).\n\nEach extension point allows users to interact with specific data and functions, and they're available in the following contexts of the sales journey:\n\n- Shopping cart (`cart.cart-item.after`, `cart.cart-list.after`) and checkout (`cart.order-summary.after`):\n\n  ![extensibilidade_vtex_sales_app_1_cart_checkout_EN](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/vtex-sales-app/extensibilidade_vtex_sales_app_1_cart_checkout_EN.png)\n\n- Product details page (`pdp.sidebar.before`, `pdp.sidebar.after`, `pdp.content.after`):\n\n  ![extensibilidade_vtex_sales_app_4_pdp_EN](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/vtex-sales-app/extensibilidade_vtex_sales_app_4_pdp_EN.png)\n\n- Menu (`menu.item`) and side modal (`menu.drawer-content`):\n\n  ![extensibilidade_vtex_sales_app_2_menu_EN](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/vtex-sales-app/extensibilidade_vtex_sales_app_2_menu_EN.png)\n\n  ![extensibilidade_vtex_sales_app_3_drawer_EN](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/vtex-sales-app/extensibilidade_vtex_sales_app_3_drawer_EN.png)\n\n  > ℹ️ When users click the menu extension component, Sales App opens a side modal on the left. This allows developers to create multiple internal navigation flows.\n\n## Extension security and stability\n\nAs a native solution, Extensibility avoids unexpected behavior and keeps store operations running smoothly. The main goals of this feature are:\n\n- **Security:** Increases security for developers when implementing code.\n- **Stability:** Keeps the application stable, even when customizations fail.\n- **Compatibility:** Ensures that Sales App updates don't compromise store customizations.\n\n## Extension use cases\n\nThe following table shows how merchants benefit from Extensibility:\n\n| Context | Description |\n| :--- | :--- |\n| Integration with external services or data | Integration with loyalty programs, the sale of additional services (such as warranties or insurance), the application of discounts in exchange for products, internal commissions or financing, among others. In general, these are integrations with external data and services already used in ecommerce or physical stores. |\n| Integration with VTEX data | Integration with VTEX solutions that aren't part of the standard Sales App journey, such as the marketplace ecosystem or some payment solutions. |\n| Centralization of representative's tasks | Centralizing representative's daily tasks, such as lead capturing and viewing store management data, in a single platform to increase speed and efficiency. |\n\n## Before you begin\n\nWe recommend developers install the Sales App Extensions Skill, which helps with project definition and implementation. Learn more in [VTEX Sales App Extensions Skill](https://developers.vtex.com/docs/guides/vtex-sales-app-extensions-skill).\n\n## Planning the project scope\n\nThe first step is planning, in which the merchant or partner should outline the scope of what'll be implemented.\n\n**Example:** A store sells construction materials and the scope of its project is to add a calculator to the product details page (PDP) that measures the amount of material needed per square meter (m²). Customers can then see exactly how much material they need to buy — for instance, 4 kilograms (kg) of mortar per square meter.\n\n## Mapping user experience and technical requirements\n\nThe second step is to map in detail the user experience (UX) flows and technical requirements for this implementation.\n\n> ⚠️ If the project has very complex flows and requirements, we recommend assigning a specialist to this stage, such as a designer or product manager.\n\n**Example:** In the construction materials store, in simple terms, the mapping would include how the user accesses the calculator in the purchase flow, how it's displayed in the interface, and what calculations are available to users. The mapping of technical requirements would involve describing how this calculator interacts with the store Checkout, Catalog, and Inventory systems during implementation.\n\n> ℹ️ When the feature is already implemented in the ecommerce website, the user experience in the Sales App should be as similar as possible to maintain consistency across the store's sales channels.\n\n## Checking technical feasibility\n\nThe third step is to validate the technical feasibility of the project. The developer must verify that the mapped requirements and integrations are compatible with the specifications of the extension points, as described in the [Extensibility developer documentation](https://developers.vtex.com/docs/guides/sales-app-extensions-implementation).\n\n> ⚠️ If a required function or configuration is missing, contact [VTEX Support](https://help.vtex.com/en/support) and describe your use case and the limitations you've encountered.\n\n## Implementing the project\n\nFinally, the developer implements the extensions, as described in the [Extensibility developer documentation](https://developers.vtex.com/docs/guides/sales-app-extensions-implementation). We recommend validating the implementation with local tests before making the extensions available to store customers.\n\n> ℹ️ The **Extensions Skill** can help during the project implementation stage. Learn more in [VTEX Sales App Extensions Skill](https://developers.vtex.com/docs/guides/vtex-sales-app-extensions-skill)."}