# Embed the widget

> Add Shoprocket to any site with one script tag and a mount element, configured from the dashboard.

One script tag loads Shoprocket; a mount element decides what renders where. No build step, no framework.

## The snippet

The quickest path: in the dashboard, open **Embeds**, create one, style it, and press **Get code**. You get a comment naming the embed, then two lines: the script loads the widget for your store, and the `div` is where it renders.

The `data-embed-id` links the mount to the embed you configured, so its type, layout, colours and options all come from the dashboard. That is why the mount says only `data-shoprocket="embed"`: switch an embed from a product grid to a single product in the dashboard and every page that carries the snippet follows, with no re-paste. Older snippets that name a type instead (`data-shoprocket="catalog"` with a `data-embed-id`) still work and follow the saved type the same way.

Load the script once per page, however many mounts the page has. It is asynchronous and does not block your page. A floating cart comes with it; add `data-no-cart` to the script to leave it out.

An embed

```
<!-- Shoprocket: Product catalog -->
<script src="https://widget.shoprocket.io/loader.js" data-pk="pk_bCz5dnUr-Mdw6bj0BcoE3CALrGA1vhYq"></script>
<div data-shoprocket="embed" data-embed-id="emb_..."></div>
```

## What you can embed

| Field | Type | Description |
| --- | --- | --- |
| `catalog` | data-shoprocket | Product catalog. Browsable product grid or carousel with cart. |
| `product` | data-shoprocket | Single product. One product's full detail view. |
| `product-view` | data-shoprocket | Product view. Compact single-product display. |
| `buy-button` | data-shoprocket | Buy button. A minimal add-to-cart button for one product. |
| `product-card` | data-shoprocket | Product card. One product as a card: compact, upright or a feature block. |
| `cart` | data-shoprocket | Cart. The floating cart on its own. |
| `categories` | data-shoprocket | Categories. Category navigation grid. |
| `account` | data-shoprocket | Customer account. Shopper login and order history. |
| `search` | data-shoprocket | Search. A search box or icon that opens live product search (#1177). |

## Mounting without the dashboard

A mount without `data-embed-id` works too: it renders with the store's defaults, and any other `data-*` attribute on the element is passed to the widget as an option. Useful for a quick test, or when a page is generated and the options come from your own code.

| Field | Type | Description |
| --- | --- | --- |
| `data-product` | string | For buy-button and product-view: the product's slug or prod\_ id. |
| `data-variant` | string | For buy-button: add this variant directly instead of asking the shopper to choose. |
| `data-quantity` | integer | For buy-button: how many to add. Defaults to 1. |
| `data-action` | "buy" \| "view" | For buy-button: add to cart (default) or open the product. |

Inline mounts

```
<script src="https://widget.shoprocket.io/loader.js" data-pk="pk_bCz5dnUr-Mdw6bj0BcoE3CALrGA1vhYq"></script>

<!-- Your whole catalogue -->
<div data-shoprocket="catalog"></div>

<!-- One add-to-cart button, by product slug or id -->
<div data-shoprocket="buy-button" data-product="everyday-tote-bag"></div>
```

## Script attributes

| Field | Type | Description |
| --- | --- | --- |
| `data-pk`required | string | Your store's publishable key (Settings > General). |
| `data-locale` | string | Render in this language, for example fr. Defaults to the page's own language when the store has it enabled. |
| `data-no-cart` | flag | Leave out the floating cart, for a page that places its own cart mount. |

Checkout stays on your page

The cart and checkout run inside the widget. Card payment happens in the store's gateway (Stripe, PayPal, Mollie...), in a secure form or a short hand-off, so card details never touch your site.

## Platform notes

- **WordPress and page builders**: paste the snippet into a Custom HTML block.
- **Webflow, Framer, Squarespace, Wix**: add an Embed or Code element.
- **Plain HTML**: drop it straight into your markup.

Want your own buttons to open the cart, or purchases sent to your analytics? The [widget JavaScript API](https://v3.shoprocket.io/docs/javascript.md) covers the `window.Shoprocket` methods and the events the widget fires.

Building your own UI instead? Skip the widget and use the storefront API: [API basics](https://v3.shoprocket.io/docs/basics.md) walks through a headless checkout.

---

- HTML version: https://v3.shoprocket.io/docs/embedding
- Language: English (en)