--- schema_version: "1" id: fe438e2b73c3048a9594624e89fd01570f86be3e394027f9c792e9c090b551d5 title: Integrate a Customizable Product WebView collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/commerce/264-0-0/rt_pos_orders_custom_webview.md canonical_url: https://help.salesforce.com/s/articleView?id=commerce.rt_pos_orders_custom_webview.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 617c8cc6ce2e61afcdac9a3057bc3f784466e9f070bb5248608b0a2c6d536972 description: Point of Sale's Design Your Own (DYO) feature lets merchants integrate a Customizable Product WebView. Users can launch a WebView on the POS app to create or alter products. Then, they can add the products to the cart for checkout. products: - Commerce release: "264" --- # Integrate a Customizable Product WebView Point of Sale's Design Your Own (DYO) feature lets merchants integrate a Customizable Product WebView. Users can launch a WebView on the POS app to create or alter products. Then, they can add the products to the cart for checkout. - Modern POS App Build: Current, available build in TestFlight - Platform Support: iPhone & iPad - Offline Support: No The functionality of the DYO WebView varies based on your configuration, there are two options available for integration: cookie-based or event-based. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png) Note It is the merchants' responsibility to have already created a Customizable Product WebView. While Point of Sale's DYO is a standard functionality, integration with the merchant's WebView is required for this feature. - Associates will have the ability to access an external URL for creating DYO products. - Associates can opt for "Custom Made" to include a personalized product in their cart. This functionality is available exclusively for online products marked with a DYO URL. It can be initiated from either a generic product URL or from the PDP if the product link is configured via PDP V2. - The price of a custom product will be visible to associates at the item level in the cart. - Associates can choose "Custom Made" to review the details of the product customizations within the cart. - Associates retain the capability to remove DYO products entirely by deleting the respective item from the cart. ## Configure Product Feed Configure your [Product Feed](https://help.salesforce.com/s/articleView?id=commerce.rt_adv_config_data_feeds_specs_product.htm&release=264.0.0&type=5 "Create a robust user experience in the POS app by viewing product details such as search results and filters.") to include a field for the DYO or Customizable Product URL. 1. In the Product Feed, for each DYO-applicable product, create a dedicated column to list the product's DYO/Custom Made URL. This column can be labeled at your discretion as it will be later mapped to a custom string field in the Field Mappings. 2. Upload the Product Feed, see [Run Feeds Manually](https://help.salesforce.com/s/articleView?id=commerce.rt_adv_config_data_feeds_manage_manual_run.htm&release=264.0.0&type=5 "Sometimes you need to run a data feed right away. You can manually run data feeds in Point of Sale to update your data immediately, rather than waiting for the next scheduled run. Implement these steps when you need the most current data.") or [Schedule Feed Runs in Point of Sale CMS](https://help.salesforce.com/s/articleView?id=commerce.rt_adv_config_data_feeds_manage_schedule.htm&release=264.0.0&type=5 "Schedule your data feeds in Point of Sale so that you have the most up-to-date data. Select a runtime that meets your business needs. Get advice on creating the schedule. When no longer needed, delete a schedule."). 3. Once it's been uploaded successfully, configure Field Mappings in CMS by going to **Feeds** | **Field mappings** | **Products**. 4. Under Source Field, look for the column that lists the URLs (e.g., "CustomMadeURL") and map it with any available custom string under Target Fields, e.g., "CustomString0".![A screenshot shows the mapping of custom URL to custom string.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_pos_orders_custom_webview_configure_product_feed.png) 5. Save your changes. ## Configure Deep Link Configure a deep link to launch your WebView in a PDP. Note, you may need to create several PDP layouts with different URLs to launch the WebView for different products (e.g, customizing jackets, shirts, dresses, etc. ) 1. In CMS, go to **Layouts** | **Layout Templates** | **PDP**. 2. Create or edit a PDP layout. 3. Using the deep link picker, go to URL.![A screenshot shows the option to configure a URL for a deep link](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_pos_orders_custom_webview_configure_deep_link.png) 4. Input the URL to launch the WebView. ## Integrate the DYO App This section is for merchants who wish to use their DYO app, for Customizable Products refer to [Integrate Customizable Products App](https://help.salesforce.com/s/articleView?id=commerce.rt_pos_orders_custom_webview.htm&release=264.0.0&type=5). ### Configure Cookie-Based Integration If the DYO app uses cookies, continue reading. If the app uses events instead, skip to [Configure Event-Based Integration](https://help.salesforce.com/s/articleView?id=commerce.rt_pos_orders_custom_webview.htm&release=264.0.0&type=5). 1. In CMS, go to **Apps** | **All**. 2. Edit the app config you wish to enable this feature. 3. Go to **Modules** | **Design your Own**. 4. Configure these fields: 1. Personalized Products Property Web URL: Enter the product feed field name containing the external URL for product personalization to load on the PDP. 2. Cookie Key Name for Personalized Products: Provide the key used to retrieve cookie details of personalized products upon addition to the cart. 3. Personalized Products Web Page Javascript Function for Add-to-Cart Action: Enter the Javascript function name responsible for triggering the add-to-cart action.![Settings for a personalised product's URL, cookie key, and JavaScript function.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_pos_orders_custom_webview_cookie_based_integration.png) ### Configure Event-Based Integration 1. In CMS, go to **Apps** | **All**. 2. Edit the app config you wish to enable this feature. 3. Go to **Modules** | **Design your Own**. 4. Configure these fields: 1. DYO Endpoint URL: Input the endpoint URL for Design Your Own. 2. DYO Event Name: Specify the event name used to trigger the add-to-cart action. 3. Personalized Products Property Web URL: Enter the product feed field name containing the external URL for product personalization to load on the PDP.![Settings for a design your own item's endpoint URL, name, and product property web URL.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_pos_orders_custom_webview_event_based_integration.png) ## Integrate Customizable Products App 1. In CMS, go to **Apps** | **All**. 2. Edit the app config you wish to enable this feature. 3. Go to **Modules** | **Design your Own**. 4. Configure theie fields: 1. Alteration Product Field: Enter the product feed field name containing the external URL for product personalization to load on the PDP. 2. Alterations Endpoint URL: Input the endpoint URL for Customizable Product. 3. Alterations Client Secret: Input the clientSecret parameter of the Alteration Endpoint URL. 4. Alterations Event Name: Specify the event name used to trigger the add-to-cart action.![Settings for an alterations product, including its field, URL, client secret, and name.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_pos_orders_custom_webview_integrate_customizable_products.png) ## POS Behavior Upon enabling Point of Sale's DYO feature, successfully integrating with the merchant's WebView, tap on the deep link to launch the WebView. ![The POS app shows a web view for custom fabric selection.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_pos_orders_custom_webview_pos_behavior_1.png) The WebView will allow users to customize the product and add them to the cart. ![The POS app shows the cart containing a customized product.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_pos_orders_custom_webview_pos_behavior_2.png) Product details can be viewed by tapping on the Custom Made CTA. This CTA is a default feature of the Custom Made layout, which can be configured in CMS by going to **Layouts** | **Layout Templates** | **Product Cart Cell**. ![The POS app shows details of a custom-made product order.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_pos_orders_custom_webview_pos_behavior_3.png)