Skip to main content

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.

​
Overview

Use the Shoppable Gallery widget to embed your gallery on any page of your site without coding. It pulls in the media you’ve added to the gallery and displays it in either a grid or carousel layout.

​
Before you start

Make sure you have the following:
  • Code access to the page where you want to embed the script
  • Gallery ID: Retrieved from the URL in the Dash Social platform.
    • Once your gallery is created in Dash Social, you can find its ID in the URL. Example URL: 
    • https://app.dashsocial.com/{brand_name}/library/galleries?sort=CREATED&sort_order=DESC&tags_filter_type=OR&graph_start_date=2025-05-29&graph_end_date=2025-06-04&graph_scale=DAILY&graph_reporting_period_mode=LAST_7_DAYS&d=boardDetail%7CboardId%3A5448990%26galleryType%3ALIBRARY%26isCompetitors%3Afalse
      • %3A is a URL-encoded colon (:)
      • Look for the number after boardId:
      • In this case, the Gallery ID is 5448990

​
Embed the widget

Choose between Gallery Layout and Carousel Layout based on your design preferences.
  • Use Gallery Layout to show rows of media
  • Use Carousel Layout for a scrollable horizontal strip
Place the following code inside an element on the page you would like it to appear on, replace <gallery id> in line 5 with your Gallery ID: 
<script
  src="https://cdn.dashsocial.com/web/js/board-embed.js"
  type="text/javascript"
  data-name="dhboard"
  data-gallery-id="<gallery_id>" <!--Replace <gallery_id> with your Gallery ID-->
  data-row-size="3"
  data-gap-size="2"
  data-mobile-row-size="2"
  data-mobile-gap-size="4"
  data-call-to-action="learn_more"
  data-disable-product-new-tab="false"
></script>
Place the following code inside an element on the page you would like it to appear on, replace <gallery id> in line 5 with your Gallery ID: 
<script
  src="https://cdn.dashsocial.com/web/js/board-carousel-embed.js"
  type="text/javascript"
  data-name="dhboard-carousel"
  data-gallery-id="<gallery id>" <!--Replace <gallery_id> with your Gallery ID-->
  data-row-size="5"
></script>

​
Widget parameters

These parameters control the behavior and appearance of the Shoppable 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.
ParameterRequiredApplies ToDescription
data-gallery-idYesGallery / CarouselGallery ID to load.
data-row-sizeNoGallery / CarouselNumber of images per row. Default: 3.
data-row-limitNoGalleryLimits the number of rows displayed. No limit by default.
data-gap-sizeNoGallery / CarouselSpacing between images (pixels). Default: 2.
data-mobile-row-sizeNoGallery / CarouselImages per row on mobile. Defaults to data-row-size.
data-mobile-gap-sizeNoGallery / CarouselSpacing between images on mobile. Defaults to data-gap-size.
data-call-to-actionNoGallery / CarouselAdds a hover CTA. Options: learn_more, shop_now, book_now.
data-lazyNoGallery / CarouselLoads images with loading="lazy" for performance.
data-links-disabledNoGallery / CarouselDisables the media popup when clicking an image.
data-hide-popup-footerNoGallery / CarouselRemoves the Dash Social footer from the popup.
data-high-resNoGallery / CarouselControls image resolution. 1 = high-res (default), 0 = low-res.
data-media-formatNoGallery / CarouselDisplays images in original aspect ratio/resolution. Overrides data-high-res.
data-disable-product-new-tabNoGallery / CarouselDefault false. Set true to open product links in the same tab.
data-scroll-disabledNoCarouselHides scroll buttons.
data-autoplayNoCarouselAuto-scrolls the carousel. true / false (default).
data-infiniteNoCarouselWraps carousel to start/end. true / false (default).
data-carousel-dotsNoCarouselShows navigation dots. true / false (default).
data-show-priceNoGallery / CarouselShows tagged product prices in the popup. Requires price + currency_code in your product feed.
data-overrideNoGallery / CarouselRequired for localized product feeds. Matches the override value in your feed.

​
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 Shoppable 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