Widget embed code
To place a widget previously created in the Widget editor (See Widget Editor) of the Photoslurp control panel, you only have to insert the code shown below into the page where you would like to display the widget.
<!-- 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 the data-config value with the Widget ID of the widget as explained in the following section.
Widget ID
Both the embed and the additional parameters configuration JS codes require you to enter the widget identifier (Widget ID). You will find the widget identifiers in the widgets list that is displayed in the "Widgets" section of the Photoslurp dashboard as shown in the following image:
Additional Parameters
It is possible to specify additional configuration parameters when a widget is initialized to adapt its behaviour to the page type where it is displayed (e.g. a product page) or to filter the content displayed using the advanced feature Product Types (e.g category pages):
- lang (language code for this store view)
This parameter informs our widget about the language it has to retrieve products. Its value must match the corresponding language code for this language in your Photoslurp catalog. - productId (identifier/SKU of the product in your Photoslurp catalog).
This parameter is used to display only those images to which the specified product SKU has been assigned in your campaign. This value must be dynamically set using your e-commerce platform templating engine to match the product being currently browsed. - productType (values stated in the product_types field of the product feed).
Photoslurp Product types feature enables you to show only content related to specific categories in a Photoslurp widget. This parameter takes as it's input a comma separated list of categories, or a list with angular brackets to show hierarchy: Men > Shoes. For more information on the product types feature you can check this guide.
Additional configuration parameters code
In order to specify additional configuration parameters like the ones mentioned in the preceding section this script should be inserted in your page before the Widget embed code:
<!-- Start Photoslurp Additional Parameters Code -->
<script>
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings["INSERT THE WIDGETID FOR THIS WIDGET"] = {
// UNCOMMENT AND FILL ANY OF THESE FIELDS IF NEEDED
// lang: 'INSERT LANGUAGE CODE HERE',
// productId: ['INSERT PRODUCT SKU HERE'],
// productType: ['PRODUCT TYPE 1', 'PRODUCT TYPE 2', '...']
};
</script>
<!-- End Photoslurp Additional Parameters Code -->
Widget Analytics Per Country
With the configuration described above, the Photoslurp analytics dashboard will provide metrics on a per widget basis (eg: product page widget, gallery widget, etc..). If more granular metrics are required, it is possible to change the configuration to be able to measure the performance of widgets on a per country/locale level. To do so, we recommend appending the language code to the widgetId as shown below:
<!-- Start Photoslurp Additional Parameters 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 Additional Parameters Code -->
An example of what the widgetId parameter should look like:
widgetId: 'Yy0_wVw|en_US'
Using this configuration, the Photoslurp analytics dashboard will now show metrics for the same widget across different locales and countries without having to create a new widget for each one.