Step by step guide to create an Omni-Channel Product Widget
1. Log in to the Destini CMS and navigate to the Omni-Channel Dashboard
Details on accessing the Omni-Channel WTB dashboard can be found here.
2. Select the 'Create New WTB' button in the 'Where To Buy Builder' tab
Navigate to the 'Where To Buy Builder' tab and select the 'Create New WTB' button in the top right hand corner.
3. Insert a name for your Omni-Channel Product Widget
Add the Widget Name that should be assigned. Note, this name will be referenced in the WTB filter within our Reporting dashboards in order to see performance for a particular WTB.
4. Select your Product Widget template type
There are four different Product Widget templates that offer different user experiences. Select which one is preferred.
Dynamic Online Only
Dynamic B&M Only
5. Customize WTB styles
Configure the various styling options to tailor the Product Detail Page Button and Product Widget to match your brand and/or site's styles.
The page loaded in the preview is just an example product detail page to help give you an idea of what your widget button and widget modal will look like on your site. Additionally, by default we are injecting an example UPC into the widget to help you visualize what it will look like when products are loaded. This product will not be loaded in view when you install the widget on your site, and you do have the option to preview the widget with your own product(s), which is explained in step 6 below.
To view what the Button and Widget will look like with your styling selections, click on the 'PREVIEW' button which will reload those elements in the preview pane. Note, you can toggle between the Button and Widget view by selecting those options at the top left of the preview pane.
Product Detail Page Button Preview & Styling
Product Widget Preview & Styling
6. Optional - Preview the Widget with Your Products
If you would like to see what the Product Widget will look like with your own products loaded, you can select the 'UPC Preview' dropdown.
When you expand the dropdown you can select one or more of your own UPCs and then press the PREVIEW button which will dynamically load those selected UPCs in to the widget in the preview pane.
7. Customize Button Labels
Configure the Call-to-Action you want displayed in the redirect button for In Stock and Out of Stock products when consumers are viewing an online retailer.
8. Customize Settings
Configure the various Settings that determine what will display within your Product Widget.
Show Online Retailer Price: In the Online Retailer view, display the product price when available for each product.
Show Online Stock Status: In the Online Retailer view, display the product stock status when available for each product.
Filter Online Stock Statuses: In the Online Retailer view, filter what products will display depending on the online retailer's stock status.
Enable Add to Cart: Allow users to build a bundle of products within your WTB and be redirected to the given retailer's cart with those items in a single 'Checkout' click. Note, this is only supported for a sub-set of Online retailers. Any non-supported retailer will display standard 'Buy Now' buttons that redirect users to the given PDPs.
B&M Store Radius: Configure the maximum radius for B&M results within your WTB given the user’s location.
B&M Store Limit: Configure the maximum number of B&M stores to display within your WTB given the user’s location.
B&M Name/Address Casing: Configure how you want the B&M store names and addresses to render within the store details, given that different data feeds may have inconsistencies.
Show Redirect URL: Optional configuration that allows you embed a custom redirect URL when consumers get a 'No Results' message for either Online or In Store search. The redirect link would most commonly send consumers to your consumer affairs team or support page on your site.
9. Test the Product Widget
After customizing all of your styles and settings, select the 'PREVIEW' button and test the Product Widget in the preview pane and ensure the experience is reflective of what is expected. Note, you can also preview what the Product Widget will look like on a mobile device.
10. Publish the Product Widget
Once tested, and confirmed that the Product Widget is functioning as expected, select the 'SAVE AND PUBLISH' button at the bottom right.
Note About Product Widget Demo
After you publish the Product Widget, a demo link will be available within your Omni-Channel WTB dashboard
Because UPCs need to be called dynamically for Product Widgets, no products are loaded by default in the demo, and the widget will return a no results message.
To preview what the widget will look like with your products loaded, you will need to append the following URL parameter: &APO=[insert UPC values]. Note, multiple UPCs will need to be comma delimited. An example of this could look like the following: https://lets.shop/locators/31/49/?demo=true&APO=999000000021,999000000001,999000000023,999000000025,999000000026,999000000028