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

# LikeShop widget setup

> Embed a shoppable LikeShop gallery or carousel on your site to link Instagram and TikTok content to products.

## Overview

Use the LikeShop widget to embed a clickable gallery or carousel of posts from your LikeShop directly on your site.
Posts are displayed with the most recent first, and additional content loads as users scroll.

* Single-product posts open the product page in a new tab.
* Multi-product posts open a pop-up with product anchors overlaid on the image.

<Image border={false} src="https://files.readme.io/aacecbb-Perelel_Health_LikeShop.gif" />

<Image border={false} src="https://files.readme.io/de481ba-Screen_Shot_2022-11-18_at_4.26.39_PM.png" />

For inspiration:

* [Perelel Health](https://likeshop.me/perelelhealth)
* [Birdies](https://likeshop.me/birdies)
* [Barefaced](https://likeshop.me/barefaced)
* [Kevin Murphy](https://likeshop.me/kevin.murphy)

## Embed the widget

### Gallery layout

Paste this inside the element where you want the gallery to appear. Replace `<brand id>` in the examples below with your value. Keep it inside double quotes.

```javascript theme={null}
<script
  src="https://cdn.dashsocial.com/web/js/embed.js"
  type="text/javascript"
  data-name="likeshop"
  data-id="<brand_id>" <!--Replace <brand_id> with your Brand ID-->
  data-id-type="brand_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-lazy="true"
  data-disable-product-new-tab="false"
></script>
```

<Image border={false} src="https://files.readme.io/a50ae53375e11dee8227f6fcb19269a3d55cf514c5ae1b8de3b3ca7bb67802e3-image.png" />

### Carousel layout

Use this script to create a scrolling carousel:

```javascript theme={null}
<script
  src="https://cdn.dashsocial.com/web/js/carousel-embed.js"
  type="text/javascript"
  data-name="likeshop-carousel"
  data-id="<brand_id>" <!--Replace <brand_id> with your Brand ID-->
  data-id-type="brand_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-autoplay="false"
  data-carousel-dots="true"
  data-disable-product-new-tab="false"
></script>

```

<Image border={false} src="https://files.readme.io/d1c0f49319a9fab0e08e99bb42259dc67a1fdc0c428b58c44409a39daef2c04b-image.png" />

## Widget parameters

These parameters control the behavior and appearance of the LikeShop 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 | Format           | Description                                                                   |
| :----------------------------- | :------- | :--------------- | :---------------------------------------------------------------------------- |
| `data-id`                      | Yes      | Gallery/Carousel | Replace `<brand id>` with your Brand ID. Wrap in double quotes.               |
| `data-id-type`                 | Yes      | Gallery/Carousel | Type of ID used in `data-id`. Use `"brand_id"`.                               |
| `data-row-size`                | No       | Gallery/Carousel | Images per row. Default is 3.                                                 |
| `data-gap-size`                | No       | Gallery/Carousel | Spacing between images in pixels. Default is 2.                               |
| `data-mobile-row-size`         | No       | Gallery/Carousel | Images per row on mobile. Defaults to `data-row-size`.                        |
| `data-mobile-gap-size`         | No       | Gallery/Carousel | Spacing between images on mobile. Defaults to `data-gap-size`.                |
| `data-call-to-action`          | No       | Gallery/Carousel | Add a hover overlay message (e.g. `"shop_now"`, `"learn_more"`).              |
| `data-lazy`                    | No       | Gallery/Carousel | Load images only when they are in view.                                       |
| `data-disable-product-new-tab` | No       | Gallery/Carousel | Default is `"false"`. If set to `"true"`, product links open in the same tab. |
| `data-carousel-dots`           | No       | Carousel         | Show or hide navigation dots below the carousel. Default is `true`.           |
| `data-autoplay`                | No       | Carousel         | Enable automatic scrolling. Default is `"false"`.                             |
| `data-infinite`                | No       | Carousel         | Enable infinite looping. Default is `"false"`.                                |
| `data-show-price`              | No       | Gallery/Carousel | Show product prices in the pop-up if available in your product 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 LikeShop 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`