Widget ID
To be able to embed the widget’s JavaScript code in your page, you’ll need a widget identifier (widget ID). This widgetId is assigned automatically when creating a widget in the Widget Editor. It is located in the "Widgets" section of the Photoslurp dashboard as shown in the following image:
Widget Configuration Code
This code is used to adapt the widget’s behaviour to the page where it is displayed. Every page displaying a widget must have the Widget Configuration Code inserted anywhere before the Widget Embed Code.
The “lang” parameter is required for every widget otherwise translations set in the widget editor won't be applied. The “productId” and “productType” parameters have their specific use cases.
<!-- Start Photoslurp Widget Configuration Code -->
<script>
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings["INSERT THE WIDGETID FOR THIS WIDGET"] = {
lang: 'INSERT LANGUAGE CODE HERE',
// UNCOMMENT AND FILL ANY OF THESE FIELDS IF NEEDED
// productId: ['INSERT PRODUCT SKU HERE'],
// productType: ['PRODUCT TYPE 1', 'PRODUCT TYPE 2', '...']
};
</script>
<!-- End Photoslurp Widget Configuration Code -->- lang - (language code of the store).
This parameter sets in what language the widget’s texts will be displayed. Its value must match one the language codes of the product feeds exported by your store. If your store’s <html> “lang” attributes match the language codes in your product feeds (and subsequently in your Photoslurp catalogs), the “lang” parameter value can be set to “document.documentElement.lang”. - productId - (identifier/SKU of the product in your Photoslurp catalog).
This parameter is meant to be used in PDPs, forcing the widget to first display those images whose assigned product SKU matches its value.
Note: If the widget has the Strict Products setting enabled in the Widget Editor, no additional images will be displayed. Otherwise the remaining approved images in the campaign will be displayed after the images related to the product. - productType - (values specified in the product_types field of the product feed).
This parameter is best used in Category pages and PDPs, filtering the content displayed. Its value is a comma separated list of categories (Men, Shoes) or a list with angular brackets to show hierarchy (Men > Shoes).
For more information regarding Product Types and how to populate, or backfill, the widget, please visit these guides:
Widget embed code
To place a widget in a page, all you have to do is insert the code below into the page where you would like the widget displayed. You can find the embed code for each widget created in the Widget Editor’s “Script” tab.
<!-- Start Photoslurp Embed Code -->
<div class="ps-container">
<ps-widget data-config="COPY HERE THE WIDGET ID FOR THIS WIDGET"></ps-widget>
<script src="https://static.photoslurp.com/widget/v3/loader.js" async></script>
</div>
<!-- End Photoslurp Embed Code -->Please note that you must fill in the data-config value with the widget ID
Widget Analytics by Country
With the configuration described above, the Photoslurp "Analytics" dashboard will provide metrics per widget (e.g. product page widget, gallery widget, etc.). If more specific metrics are needed, it is possible to measure widget performance by country or location. To do so, we recommend adding the language code in the widgetId, as done below:
<!-- Start Photoslurp Widget Configuration Code -->
<script>
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings["INSERT THE WIDGETID FOR THIS WIDGET"] = {
lang: 'INSERT LANGUAGE CODE HERE',
widgetId: 'INSERT WIDGETID HERE|INSERT LANGUAGE CODE HERE',
};
</script>
<!-- End Photoslurp Widget Configuration Code -->
Example of how the widgetId parameter would look like:
widgetId: 'Yy0_wVw|en_US'
With this configuration, Photoslurp's “Analytics” dashboard will be able to display metrics for the same widget differentiating between locations or countries without the need to use a different widget for each one.