> ## Documentation Index
> Fetch the complete documentation index at: https://developer.dashsocial.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Page Gallery widget setup

> Embed product-linked media on product detail pages using the Product Page Gallery widget.

## 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.

## Embed the widget

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.

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

```javascript theme={null}
<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.

```javascript theme={null}
<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>
```

## Widget parameters

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:

<CardGroup cols={1}>
  <Card title="Widget Customization" href="https://developer.dashsocial.com/guides/social-commerce/shoppable-and-product-page-galleries/widget-customization">
    Customize Dash Social widgets with CSS for fonts, colors, and layout tweaks.
  </Card>
</CardGroup>

| 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

```html theme={null}
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**](https://cdn.dashsocial.com)
  * `application/javascript`
  * `image/jpeg`
  * `video/mp4`
* [**https://likeshop.me**](https://likeshop.me)
  * `text/html`
  * `image/png`
  * `image/gif`
  * `application/json`
* **data:**
  * `application/font-woff`
  * `image/png`
* [**https://dashsocial-static.s3.amazonaws.com**](https://dashsocial-static.s3.amazonaws.com)
  * `image/jpeg`
  * `video/mp4`
* [**https://d1cka1o15bmsqv.cloudfront.net**](https://d1cka1o15bmsqv.cloudfront.net)
  * `image/jpeg`
  * `video/mp4`
* [**https://dashsocial.com**](https://dashsocial.com)
  * `text/html`
* [**https://www.dashsocial.com**](https://www.dashsocial.com)
  * `text/plain`