Salesforce Docs Portal

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
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 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 or Schedule Feed Runs in Point of Sale CMS.
  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.
  5. Save your changes.

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.

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.

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.

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.

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.

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.