> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ordergroove.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ordergroove.com/_mcp/server.

# Offer Tagging

Offer Tagging is how developers place Ordergroove subscription offers on a merchant's storefront. You add `<og-offer>` HTML elements to product detail pages, carts, and anywhere else you want offers to appear. Paired with Ordergroove's `main.js` script, those tags render the enrollment UI that lets shoppers turn a one-time purchase into a subscription — all managed from the Ordergroove Admin tool.

***

## Defining the Offer Element

The following code will present the default offer for the given product ID:

```html
<og-offer product="your-product-id"></og-offer>
```

#### Closing Tags

Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (`</og-offer>`).

Alternatively you can set the product ID using JavaScript:

```html title="HTML"
<og-offer id="my-dynamic-offer"></og-offer>
```

```javascript title="JS"
document.querySelector('#my-dynamic-offer').setAttribute('product', 'your-product-id')
```

***

## Location

The `location` attribute allows different offers to display in different locations (e.g. PDP vs. Cart). The value can be any string.

Note: development work will be required to add the location attribute to the element (i.e. `location="X"`).

Recommended location naming conventions:

* `PDP` — Product Detail Page
* `Cart` — Shopping Cart Page
* `OR` — Order Review Page

```html
<og-offer product="your-product-id" location="X"></og-offer>
```

***

## Buy X Subscribe Y

If you want Ordergroove to create a subscription for a product that differs from the one tagged in the `product` attribute, you can define the alternative product directly in the offer:

```html
<og-offer product="x" product-to-subscribe="y"></og-offer>
```

***

## Product Components

To offer subscriptions for a bundle product with defined components, tag those components directly in the offer as they are added by the customer. Bundle components do not have a quantity attribute — if a customer wants more than one of a single component product, pass that product ID multiple times in the array:

```html
<og-offer product="bundle_product_id" product-components='["39458782806076","39458782806076","39406418165820"]'></og-offer>
```

***

## First Order Place Date

To define when a customer's first recurring order will place, set the `first-order-place-date` attribute directly in the offer:

```html
<og-offer product="your-product-id" first-order-place-date="2022-09-04"></og-offer>
```

***

## Main.js

Ordergroove's `main.js` must be tagged on every page where an `<og-offer>` element lives. It loads your offer content and styling. The script should only be tagged **once per page** and can render multiple offers on the same page.

The script URL is made up of two parts: the frontend static domain and your Merchant ID. Use the correct domain for your environment:

* **Staging:** `https://staging.static.ordergroove.com`
* **Production:** `https://static.ordergroove.com`

```html
<script type="text/javascript" src="<STATIC_DOMAIN>/<MERCHANT_ID>/main.js"></script>
```

If you need to request your Merchant ID, please open a [Zendesk ticket](https://help.ordergroove.com/).

***

## Additional Resources

See [How to configure and style your subscription enrollment](https://help.ordergroove.com/hc/en-us/articles/360026386794-How-To-Configure-and-Style-Your-Subscription-Enrollment) in the Knowledge Center for additional help styling and customizing your offers.

***

## Frequently Asked Questions

#### Why isn't my og-offer rendering on the page?

The most common cause is a missing or misconfigured `main.js` script. Ordergroove's `main.js` must be loaded on every page where an `<og-offer>` element appears, and the script URL must include the correct static domain (`https://static.ordergroove.com` for production, `https://staging.static.ordergroove.com` for staging) and your Merchant ID. Also confirm the element has a proper closing tag — `<og-offer>` cannot be self-closed because HTML only permits self-closing on a handful of native elements.

#### Can I use the same offer tag on the PDP and the cart?

You can reuse the same `<og-offer>` element, but you should add a `location` attribute (e.g., `location="PDP"` or `location="Cart"`) so Ordergroove can render different offer presentations in each place. The `location` value accepts any string, with `PDP`, `Cart`, and `OR` (Order Review) being the recommended conventions. Note that custom location handling requires development work to wire into your storefront.

#### How do I set the product ID dynamically with JavaScript instead of hardcoding it?

Render the element without a `product` attribute, give it an `id`, then set the attribute at runtime: `document.querySelector('#my-offer').setAttribute('product', 'your-product-id')`. This is useful for SPAs, quickview modals, or any page where the product context isn't known at HTML render time. Make sure Ordergroove's `main.js` has loaded before you set the attribute so the element can hydrate properly.

#### What's the difference between product and product-to-subscribe?

The `product` attribute is the SKU the customer is currently viewing or adding to cart, while `product-to-subscribe` tells Ordergroove to create the subscription against a different SKU. This "Buy X, Subscribe Y" pattern is common when the one-time purchase and the recurring SKU are configured separately — for example, a trial-size product on the PDP that converts into a full-size subscription. If both products are the same, you only need the `product` attribute.

#### How do I tag a bundle subscription with multiple components?

Use the `product-components` attribute and pass a JSON-style array of product IDs, like `product-components='["39458782806076","39458782806076","39406418165820"]'`. Bundle components don't support a quantity attribute, so if a customer wants two of the same component, include that product ID twice in the array. This lets Ordergroove track exactly which child products are part of the bundle subscription as the customer builds it.

#### Can I control when the customer's first recurring order ships?

Yes — add the `first-order-place-date` attribute to the `<og-offer>` element with an ISO date string, for example `first-order-place-date="2022-09-04"`. This overrides Ordergroove's default first-order scheduling and is helpful for prelaunch programs, delayed-shipment offers, or aligning a customer's first order with a specific billing cycle.

#### Do I need a separate main.js for each offer on a page?

No. The `main.js` script should only be tagged once per page regardless of how many `<og-offer>` elements you place — a single script load discovers and renders every offer element in the DOM. Loading it multiple times can cause duplicate rendering and unexpected behavior.