Salesforce Integration Guide

This guide details the integration process of VU Custom, an end-to-end solution for designing, producing, and fulfilling custom products, with your Salesforce Commerce Cloud environment.

I. Overview of the Salesforce Integration Process

The integration between VU Custom and Salesforce Commerce Cloud follows a structured sequence to ensure all aspects of product customization, cart routing, and order fulfilment are handled efficiently:

1

Establish Store Connection/Access

Initial setup involves creating necessary API clients and providing credentials to VU Custom to establish a secure connection with your Salesforce instance.

2

Embed Customizer

The VU Customizer, a powerful visualizer experience for custom product designs, is embedded into your Salesforce product display pages.

3

Add Basic HTML and/or CSS

Brands are responsible for styling the customizer to match their brand guidelines by adding HTML and CSS to their Salesforce pages.

4

VU Links SKUs to Templates within VU OS

VU Custom's professional services team will link your existing Salesforce SKUs to the customization templates built within the VU OS.

5

Add to Cart - Logic Creation

Custom logic is developed to ensure that when a customer adds a customized product to their cart, the Salesforce cart receives essential details such as a RecipeID, SKU/Variant, and other order line attributes. The customizer will route the product to Salesforce's cart, where the checkout flow will occur natively on Salesforce.

6

Orders Pushed to VU via Salesforce APIs

After a product is designed and paid for, order information is pushed from Salesforce to VU Custom's OMS via configured APIs. These steps kick in after the product has been designed and paid for, managing the order flow from Salesforce into VU Custom for production.

II. Customer Setup Requirements for Order Flow (Pre-Integration)

Before initiating the integration, your Salesforce Commerce Cloud environment requires specific configurations:

1. API Client Creation in Business Manager:

   • Client Name: "VU Platform Integration".

   • Grant Type: client_credentials.

   • Scopes Needed: Ensure the following scopes are granted for VU Custom's operations:

     1. sfcc.orders.search (for order polling).

     2. sfcc.orders (for order details).

     3. sfcc.products (existing product sync).

2. Provide to VU: You must securely provide the following credentials to VU Custom for establishing the connection:

   • Instance URL: e.g., https://xxxx-xxx.dx.commercecloud.salesforce.com .

   • OAuth2 Client ID.

   • OAuth2 Client Secret.

   • Site ID(s) to poll orders from.

3. Optional but Recommended:

   • Webhook URL setup for real-time order notifications. This aligns with VU's event-driven order status notifications communicated to your e-commerce platform.

   • IP allowlist (if required by your security policy).

Refer to Salesforce Documentation for a more detailed approach.

III. Detailed Step-by-Step Integration Guide

This section provides a detailed breakdown of each step, from initial setup to order processing.

Step 1: Prepare Your Salesforce Commerce Cloud Environment

As outlined in the "Customer Setup Requirements" above, you need to configure your Salesforce Business Manager. This involves creating an API Client with the name "VU Platform Integration", setting the grant type to client_credentials, and assigning specific scopes for order search, order details, and product synchronization.

Once the client is created, provide the Instance URL, OAuth2 Client ID, OAuth2 Client Secret, and Site ID(s) to VU Custom. Additionally, consider setting up a Webhook URL for real-time order notifications and an IP allowlist if your security policy requires it.

Step 2: Establish Store Connection in VU Admin

This step connects your Salesforce Commerce Cloud to the VU Admin platform:

1. Log into VU Admin: Navigate to the admin website and log in using your email and password.

2. Access Stores: From the Dashboard, click on Settings > Stores.

3. Add New Store: Select the store you want to add and enter the required details. Key fields include:

   • Name: Your store's name.

   • Store URL: The complete URL address of your Salesforce store.

   • Access Token: Utilize the OAuth2 Client ID obtained from Salesforce.

   • Token Secret: Use the OAuth2 Client Secret obtained from Salesforce.

   • Store Domain: Your Salesforce domain.

   • Currency: A three-character currency code, e.g., USD.

   • Locale: Language code applicable to the store, e.g., en-US.

   • Store Key: This field is auto-filled.

4. Click Save to successfully add your store.

Step 3: Create and Configure Products and Templates in VU Admin

This involves defining your customizable products and how they will appear and function in the customizer:

• Create a Product Matrix: This is an essential planning document that defines your brand's custom product offerings, specifying customizable components, available materials, colors, options, and business rules and constraints. You will also decide between 2D or 3D visualization for your products, based on their complexity and customization type.

  • Add Products:

    • From the Dashboard, click Settings > Products > Create New Product or Add New.

    • Enter the following details :

      • Name

      • Code

      • Category

      • Active status

      • Thumbnail image

      • Revision Code

      • Tags

      • Comments if any

    • You can also add Product Variants with their own thumbnails, names, codes, SKUs, UPCs, prices, and tags.

• Create and Manage Templates: Templates define different customizer structures and user flows.

  • From the Dashboard, click Customizer > Templates > Add New.

  • Enter the Name, Disclaimer, and Tags.

  • Click EDIT to access the detailed template editor where you can configure:

    • Locales: Select applicable languages for the template.

    • Models: Add and select the 3D models for your template.

    • Materials: Define materials, models, and meshes available for the template.

    • Camera, Lighting, Lights: Update camera specifications, upload lighting files, and add light effects.

    • Tabs: Organize customizer options into tabs, adding relevant elements or element groups.

    • Starting Points: Create preset design options to expedite the customization process for end-users.

    • Elements: Utilize various elements to customize the product, such as:

      • Embroidery/Decoration: For stitch effects or other decorative effects.

      • List: For choices like product colors, displayed as dropdowns, thumbnails, or radio boxes.

      • Comment/Input: For end-users to write text.

      • Quantity: For choosing product quantities.

      • Information: For adding HTML descriptions or info boxes.

      • Image Upload: For end-users to upload their own images.

      • SVG: To colorize layers of an SVG file.

      • Summary: To add summaries to the template.

      • Color Picker: For a full range of color selection.

      • Button: To add buttons to the template.

    • Perspectives: Build different 2D designs for the product template's sides.

• Click Save to save your template changes.

Step 4: Embed the Customizer on Your Salesforce Product Display Page (PDP)

The customizer needs to be integrated into your storefront:

• Add the JS Snippet: The core of embedding is adding a JavaScript snippet to all product display pages that require customization. This snippet calls the VU Custom server to fetch the appropriate VU widget, determining which widget to load based on a variant ID passed as {VARIANT}. This data-variant value must match the name of the template folder in VU Custom.

• Location: The snippet should be placed on the product display page for all products requiring customization. A dynamic approach is preferred, where the variant ID is populated automatically based on the chosen product.

• Routing to SF Cart: After the product is designed within the customizer, it will be routed to your Salesforce cart. The checkout process will then occur natively on your Salesforce storefront.

Step 5: Style the Customizer

Brands have full autonomy over the customizer's layout and appearance:

• Apply Web-Styling: You must apply web-styling (CSS) over the customizer code to achieve your desired layout and look-and-feel. VU Custom provides an initial HTML template to help you get started.

• HTML Layout: You can add HTML elements to your Salesforce page alongside the JS Snippet. The JS Snippet will map customizer elements to these HTML elements upon loading, allowing you to rearrange them as needed.

Step 6: Link SKUs to Templates within VU OS

This step ensures your Salesforce products are correctly associated with VU Customization templates:

• Access Provision: Brands must provide access to VU Custom’s Professional Services team to access their e-commerce storefront.

• SKU Identification: SKUs must be created within your Salesforce platform and identified to VU Custom. The Professional Services team will then link these desired SKUs to the templates built in VU OS that support your custom products.

Step 7: Create Add to Cart - Logic

This is crucial for handling customized products in the Salesforce cart:

• Add To Cart Functionality: VU Custom will help facilitate the Add To Cart function as part of the implementation process.

• Data for SF Cart: The ATC logic will be created to supply the Salesforce cart with a RecipeID (a unique eight-character token capturing user design and collections), the SKU/Variant, and any other relevant customer order line attributes.

• Payment Requirement: VU requires that the product is paid for through the Salesforce checkout process for orders to appear in the VU OMS. Brands will manage the SKUs, pricing, and upcharges directly via their e-commerce platform. Upcharges configured in VU Custom will appear when personalization effects are added to the product in the customizer.

• Custom Code Location: Any custom code for ATC functionality, and other business logic (e.g., decision elements for hiding/showing parts), should ideally be stored in a dedicated JavaScript file within the custom code directory in VU OS, rather than directly in the Salesforce HTML. UI-related aesthetic functions can remain in the Salesforce HTML.

Step 8: Orders Pushed to VU via Salesforce APIs

Once a customized product is purchased, the order flow transitions to VU Custom for fulfilment:

• Order Creation in VU OMS: Order information is pushed from Salesforce to VU Custom's OMS using the previously configured API credentials. You should then see the order in the "Orders" section of the VU Admin Panel.

• Order Management: Use the OMS to manage the order status and route it to the appropriate factory for fulfilment.

• Viewing Orders: All created and in-process orders are recorded on the Order screen. Orders can be filtered by factory and brand companies. Only administrators can view and process orders.

• Order Routing: Orders can be filtered based on the factory and brand's companies. You can modify order details, hold orders, or add error information.

• Order Travelers: Travelers provide information about orders received and sent to the factory for processing. These can be created for a specific factory, all factories, or products of a brand, and are available in various formats. Factories can access Travelers and Production Files directly via the VU Platform Web Portal, APIs, or an SFTP server.

• Order Statuses: VU Custom tracks standard order statuses, including New order, Processing, and Delivery.

IV. Post-Integration Management within VU Admin

After the integration, you can utilize the below mentioned tools for ongoing management:

• Reporting: Access tools like the Query Builder to construct data queries, and generate Reports and Dashboards (Financial, Operational, and custom) for comprehensive analytics and data insights.

• User Management: Manage Roles, create and manage users and assign specific permissions to control access and actions within the platform.

• Factories: Add and manage your brand's manufacturing units where customized products are produced.

• Connections: Manage endpoints integrated with third-party applications.

• Locales: Configure languages for translating VU Custom applications across global business regions.

• Profanity Filter: Configure an allow list or block list to manage specific words in the personalization experience, preventing undesirable content.