Summary

• Widget Integration in Storefront

• Videowise Back-Office - Content Configuration

Components Overview

Supported Features

• Widget for Shoppable Videos

• Videowise Back-Office - Content Configuration

Functional Overview

• A user enters the site and accesses a page.

• Goes to the Videowise section.

• Click on the video to play it.

• Access the product/products associated with the video.

• Add products to the cart.

• Goes to Cart → Checkout and finalizes the order.

Use Cases

• Widget integration in Homepage

• Widget integration in PDP

• Widget integration in Articles(Content pages)

• Widget integration in Page Designer

• Videowise Back-Office: Accessible only for the business team required to configure the shoppable videos content.

Headings & Constraints

• Product Bundles

• Product Sets

• Standalone Product

• Master Product

• Variation Product

Compatibility

Implementation Guide

SFCC Setup

Cartridge Installation

• Upload int_videowise to your CI or development sandbox. Apply the standard flow used to upload cartridges to your environment.

• Upload and import metadata from the metadata folder. To do so, go to Business Manager → Administration → Site Development → Site Import & Export. Then apply the standard procedure for uploading metadata into the Commerce Cloud site. You can compress the Site Template folder to a .zip archive or upload it via XML files and import it separately.

• Insert int_videowise into the cartridge path of a target site. To do so, go to Business Manager → Administration → Sites → Manage Sites → <Your Target Site> → Settings and insert int_videowise before your cartridges record.

• Insert bm_videowise into the Business Manager cartridge path. To do so, go to Business Manager → Administration → Sites → Manage Business Site -> Cartridges and insert bm_videowise before your cartridges record

Site Preference Configuration

• Videowise Enabled: flag to enable/disable the Videowise functionality

• VideoWise external stylesheet URL: the CSS style sheet for Videowise widget
• This value should be https://assets.videowise.com/style.css.gz unless requested differently by the Videowise customer support team.

• VideoWise external vendors script URL: the JS external script for vendors
• This value should be https://assets.videowise.com/vendors.js.gz unless requested differently by the Videowise customer support team.

• VideoWise external client script URL: the JS external script for client side
• This value should be https://assets.videowise.com/client.js.gz unless requested differently by the Videowise customer support team.

• Images View Type: the image type that will be used for Videowise products. By default it is configured for medium.

• Videowise Tracking API URL: the tracking pixel API URL.
• This value should be https://api.videowise.com/tracking/pixel unless requested differently by the Videowise customer support team.

• VideoWise Encryption Authentication Key: the encryption key that is used to generate the header signature for endpoints request/response validation between SFCC and Videowise.

Encryption Authentication Key Generation

64ffedaf9fa6892a872fb94ed35babf01b376c06f02bc178cdc02003cb0f5fcd5f3a9a746f3beb74adb738bbbf25f9c45e8e8beb1ca2a08c37fa16e108b8fb94

Page Designer Configuration

Tracking Pixel Configuration

Integration endpoints

• Videowise - GetDetails
• This endpoint is used to get product information directly from the client side, in the widget.

• Videowise - BackOfficeProducts
• This endpoint is used to get product information for Videowise Back-Office. It supports the following:
• Retrieve product information based on a list of SKUs.
• Retrieve product information based on search query.
• This will be added and configured when a new site is installed in Videowise Back-Office.

• Add single product to basket

• Add multiple products to basket

• Cart - AddProduct

Videowise Back-Office Configuration

• Site Domain

• Site ID

• Access in Videowise dashboard to the site products.

• Possibility to choose and configure shoppable videos with the site products. The IDs generated for the content will be in SFCC Business Manager to configure the container for the content.

• Possibility to search for products taking into consideration the following options:
• Search by SKU
• Search by Product Name
• Search by Product Brand

Site Domain

Encryption Key

Customising Code

Building the client side code

Updating your application

Changes to templates

• To add the application scripts, go to your \common\scripts.isml template and add the following line at the end of the file (last line):

<isinclude template="videowise/scripts"/>

• To add the tracking pixel JavaScript helpers, go to your checkout/confirmation/confirmation.isml and add the following line at the top of the page, inside the <isscript> tag, right before it closes:

var shouldTrackPurchase = dw.system.Site.getCurrent().getCustomPreferenceValue('videoWiseEnabled');

var trackingAPIUrl = dw.system.Site.getCurrent().getCustomPreferenceValue('videowiseTrackingApiUrl');

if (shouldTrackPurchase) {

assets.addJs('/js/videowisePurchaseTracking.js');

}

• To add the tracking pixel data container, go to your checkout/confirmation/confirmation.isml and add the following line at the end of the file, right before the closing of </isdecorate> tag:

<isinclude template="videowise/trackingPixelDataContainer"/>

Testing

Operations and Maintenance

Logs

Support

• Read our FAQ to verify if your question is already answered,

• Visit our help center,

• If your question or concern is not among the available answers, you can email the Videowise Customer Support team at support@videowise.com.

Known Issues