Product Page Gallery widget setup

Overview

The Product Page Gallery Widget displays product-linked media in a carousel on your product pages. It matches the product’s URL on the page with the URL in your Dash Social library to pull relevant media. Clicking on a post opens a popup with product details and tagged products. You can disable the popup using the data-links-disabled parameter.

Before you start

Get your brand ID .
Make sure your products in the library have URLs that match your product page URLs.

To add the Product Page Gallery Widget, place the script inside any product page template. For e-commerce platforms with a shared PDP template, you only need to add the script once.

Replace <brand id> with your Dash Social brand ID. Keep the value wrapped in double quotes.

<script
  src="https://cdn.dashsocial.com/web/js/product-carousel-embed.js"
  type="text/javascript"
  data-name="dhproduct-carousel"
  data-id="<brand_id>"  <!--Replace <brand_id> with your Brand ID-->
  data-id-type="brand_id"
  data-row-size="3"
  data-mobile-row-size="2"
  data-mobile-gap-size="4"
  data-call-to-action="learn_more"
  data-autoplay="false"
  data-carousel-dots="true"
  data-disable-product-new-tab="false"
></script>

Displaying localized products

To display localized product data, use the data-override parameter. This value must match the override in your localized product feed. When using localized feeds, you must also include the data-product-id parameter, matching the product’s unique identifier (e.g., SKU) from the feed.

<script
  src="https://cdn.dashsocial.com/web/js/product-carousel-embed.js"
  type="text/javascript"
  data-name="dhproduct-carousel"
  data-id="<brand id>" <!--Replace <brand_id> with your Brand ID-->
  data-id-type="brand_id"
  data-product-id="abcdef123"
  data-override="FR"
  data-show-price="true"
></script>

These parameters control the behavior and appearance of the Product Page Gallery widget. If you are interested in more advanced styling and customization, refer to the Widget Customization Guide:

Widget Customization

Customize Dash Social widgets with CSS for fonts, colors, and layout tweaks.

Parameter	Required	Description
`data-id`	Yes	Your brand ID. Wrap it in double quotes.
`data-id-type`	Yes	Specifies the type of ID used. Must be `"brand_id"`.
`data-row-size`	No	Number of images per row. Defaults to `3` if not specified.
`data-gap-size`	No	Space between images in pixels. Default is `2`.
`data-mobile-row-size`	No	Number of images per row on mobile. Defaults to `data-row-size`.
`data-mobile-gap-size`	No	Space between images on mobile. Defaults to `data-gap-size`.
`data-call-to-action`	No	Hover label text. Default is `"learn_more"`. Examples: `"shop_now"`, `"book_now"`.
`data-lazy`	No	Lazy-loads images when they enter view.
`data-links-disabled`	No	Disables the product detail popup when media is clicked.
`data-hide-popup-footer`	No	Hides the Dash Social logo in the popup footer.
`data-high-res`	No	Show high-resolution images (`1`, default) or low-resolution (`0`).
`data-media-format`	No	Controls image resolution and format. Options: `optimized` (recommended for crisp images with smaller file size), `original` (raw source files, can be 10MB+), `ratio` (smaller aspect-preserving images for page speed). Overrides `data-high-res`.
`data-scroll-disabled`	No	Hides the carousel scroll buttons.
`data-autoplay`	No	Automatically scroll the carousel. Default is `false`.
`data-autoplay-speed`	No	Time in milliseconds between automatic carousel scrolls. Only applies when `data-autoplay` is `true`. Default is `5000`.
`data-infinite`	No	Loop carousel back to start. Default is `false`.
`data-carousel-dots`	No	Show carousel navigation dots. Default is `false`. Set to `true` to display them.
`data-disable-product-new-tab`	No	Default is `"false"`. When set to `"true"`, clicking a product link opens in the same tab instead of a new tab.
`data-show-price`	No	Show product price from the product feed in the popup. Default is `false`.
`data-override`	No	Required to display localized product feed data. Must match the `override` value on the feed.
`data-product-id`	No	Required for localized feeds. Matches the product’s SKU or unique identifier.
`data-use-product-group`	No	Requires `data-product-id`. When `true`, matches products by group ID from the product feed instead of URL. If no group ID exists, no media is returned.
`data-minimum-media`	No	Minimum number of media items required for the gallery to display.
`data-media-types`	No	Filter media by source. Accepts comma-separated values like `"INSTAGRAM_UGC,TIKTOK_UGC"`. Supported values: `TIKTOK_OWNED`, `INSTAGRAM_OWNED`, `INSTAGRAM_STORY`, `FACEBOOK_OWNED`, `PINTEREST_OWNED`, `TWITTER_OWNED`, `THREADS_OWNED`, `LINKEDIN_OWNED`, `TIKTOK_UGC`, `INSTAGRAM_UGC`, `INSTAGRAM_STORY_UGC`, `UPLOADED`.

Content Security Policy

If your site uses a Content Security Policy (CSP), you’ll need to allow the domains and MIME types used by the Product Page Gallery Widget. This ensures scripts, images, and network calls load correctly.

Why this matters

Ensures the widget script can load safely.
Allows image and video assets from approved Dash Social domains.
Prevents CSP errors that block network calls or media loading.

Required CSP directives

script-src https://cdn.dashsocial.com;
connect-src https://likeshop.me;
img-src 'self'
  data:
  https://cdn.dashsocial.com
  https://likeshop.me
  https://dashsocial-static.s3.amazonaws.com
  https://d1cka1o15bmsqv.cloudfront.net
  https://dashsocial.com
  https://www.dashsocial.com

Approved domains and MIME types

https://cdn.dashsocial.com
- application/javascript
- image/jpeg
- video/mp4
https://likeshop.me
- text/html
- image/png
- image/gif
- application/json
data:
- application/font-woff
- image/png
https://dashsocial-static.s3.amazonaws.com
- image/jpeg
- video/mp4
https://d1cka1o15bmsqv.cloudfront.net
- image/jpeg
- video/mp4
https://dashsocial.com
- text/html
https://www.dashsocial.com
- text/plain

Get Started

Reporting

Campaigns

Scheduler

Social Commerce

Social Listening

Community

Integration

MCP Server

Product Page Gallery widget setup

Overview

Before you start

Embed the widget

Displaying localized products

Widget parameters

Widget Customization

Content Security Policy

Why this matters

Required CSP directives

Approved domains and MIME types

​Overview

​Before you start

​Embed the widget

​Displaying localized products

​Widget parameters

Widget Customization

​Content Security Policy

​Why this matters

​Required CSP directives

​Approved domains and MIME types

Overview

Before you start

Embed the widget

Displaying localized products

Widget parameters

Content Security Policy

Why this matters

Required CSP directives

Approved domains and MIME types