> 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 Code Elements

***

## og-frequency-status

This element is aware of the frequency associated with a given opt-in. It contains three slots — one displayed when subscribed, one when not subscribed, and one when subscribed but the frequency does not match the default frequency.

### Attributes

| Attribute           | Type      |
| ------------------- | --------- |
| `default-frequency` | Frequency |
| `disabled`          | Boolean   |
| `frequency`         | Frequency |
| `product`           | String    |
| `subscribed`        | Boolean   |

### Slots

| Slot                 | Default                                                                             |
| -------------------- | ----------------------------------------------------------------------------------- |
| `frequency-mismatch` | By default this slot is empty                                                       |
| `not-subscribed`     | By default this slot is empty                                                       |
| `subscribed`         | By default displays a formatted version of the frequency associated with the opt-in |

***

## og-incentive-text

This element displays information from dynamic incentives. By default, the component searches for an ongoing discount class. The `initial` attribute can be specified to force a search in initial incentives.

### Attributes

| Attribute                 | Description                                                       | Example                                                                  |
| ------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `DiscountAmount`          | Shows discount amount in dollars                                  | `<og-incentive-text from="DiscountAmount"></og-incentive-text>`          |
| `DiscountPercent`         | Shows discount amount in percent                                  | `<og-incentive-text from="DiscountPercent"></og-incentive-text>`         |
| `ShippingDiscountPercent` | Shows whether or not shipping is free                             | `<og-incentive-text from="ShippingDiscountPercent"></og-incentive-text>` |
| `initial`                 | Can be applied to discounts to force showing the initial discount | `<og-incentive-text from="DiscountPercent" initial></og-incentive-text>` |

***

## og-next-upcoming-order

This element displays the placement date of the customer's next upcoming order.

***

## og-offer

This element displays a complete offer, allowing one to opt in, opt out, and change the frequency of an opt-in. The `product` attribute is required except when `preview-standard-offer` or `preview-upsell-offer` are `true`.

If the product is upsell-eligible, the element displays an upsell offer. If the product is not upsell-eligible but is subscription-eligible, it displays an offer for the specified `type`, or a radio-type offer if `type` is not specified. Upsell eligibility and subscription eligibility are determined at runtime based on response data for the specified product. If a product is neither upsell-eligible nor subscription-eligible, nothing is displayed.

This element contains two slots. The `iu-template` slot is displayed when the product is upsell-eligible. The `standard-template` slot is displayed when the product is subscription-eligible but not upsell-eligible.

### Attributes

| Attribute                | Type                       |
| ------------------------ | -------------------------- |
| `default-frequency`      | Frequency                  |
| `first-order-place-date` | String (YYYY-MM-DD)        |
| `location`               | String                     |
| `preview-standard-offer` | Boolean                    |
| `preview-upsell-offer`   | Boolean                    |
| `product`                | String                     |
| `product-components`     | List of Product Components |
| `product-to-subscribe`   | String                     |
| `show-tooltip`           | Boolean                    |
| `type`                   | Offer Type                 |

### Slots

| Slot                | Default                                                                                                              |
| ------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `upsell`            | By default displays an upsell offer comprising a button which, when clicked, shows a modal with the option to opt in |
| `standard-template` | By default displays a radio, select, or toggle offer based on the value of the `type` attribute                      |

***

## og-optin-button

This element allows a customer to opt in to an offer. It is typically used alongside `og-optout-button` to enable toggling opt-in status. This element contains two slots — a default slot and a `label` slot nested within the default slot (displayed only if the default slot has not been overridden).

### Attributes

| Attribute                  | Type      |
| -------------------------- | --------- |
| `default-frequency`        | Frequency |
| `frequency`                | Frequency |
| `optin-button-label`       | String    |
| `product`                  | String    |
| `subscribed` *(read-only)* | —         |

### Slots

| Slot        | Default                                                                                                 |
| ----------- | ------------------------------------------------------------------------------------------------------- |
| *(unnamed)* | By default displays a radio button to opt in, along with a label showing the value of `offerOptInLabel` |
| `label`     | By default displays the value of `offerOptInLabel`                                                      |

***

## og-optin-status

This element is aware of a customer's opt-in status for a given product. The customer may either be subscribed or not subscribed, corresponding to the `subscribed` and `not-subscribed` slots. Two additional slots — `frequency-match` and `frequency-mismatch` — can be used when the opt-in frequency either matches or does not match the default frequency.

### Attributes

| Attribute    | Type    |
| ------------ | ------- |
| `product`    | String  |
| `subscribed` | Boolean |

### Slots

| Slot                 | Default                                                     |
| -------------------- | ----------------------------------------------------------- |
| `frequency-match`    | By default this slot is empty                               |
| `frequency-mismatch` | By default this slot is empty                               |
| `not-subscribed`     | By default displays the value of `optinStatusOptedOutLabel` |
| `subscribed`         | By default displays the value of `optinStatusOptedInLabel`  |

***

## og-optin-toggle

This element allows a customer to toggle their opt-in status between subscribed and not subscribed. This element contains one unnamed slot.

### Attributes

| Attribute                  | Type      |
| -------------------------- | --------- |
| `frequency`                | Frequency |
| `product`                  | String    |
| `subscribed` *(read-only)* | —         |

### Slots

| Slot        | Default                                                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------------------------------- |
| *(unnamed)* | By default displays a checkbox to toggle opt-in status, along with a label showing the value of `optinStatusOptedInLabel` |

***

## og-optout-button

This element allows a customer to opt out of an offer. It is typically used alongside `og-optin-button` to enable toggling opt-in status. This element contains two slots — a default slot and a `label` slot nested within the default slot (displayed only if the default slot has not been overridden).

### Attributes

| Attribute                  | Type      |
| -------------------------- | --------- |
| `default-frequency`        | Frequency |
| `frequency`                | Frequency |
| `optin-button-label`       | String    |
| `product`                  | String    |
| `subscribed` *(read-only)* | —         |

### Slots

| Slot        | Default                                                                                                   |
| ----------- | --------------------------------------------------------------------------------------------------------- |
| *(unnamed)* | By default displays a radio button to opt out, along with a label showing the value of `offerOptOutLabel` |
| `label`     | By default displays the value of `offerOptOutLabel`                                                       |

***

## og-select-frequency

This element displays a select control that allows a customer to view and modify the frequency of their opt-in.

### Attributes

| Attribute                  | Type                |
| -------------------------- | ------------------- |
| `default-frequency`        | Frequency           |
| `disabled`                 | Boolean             |
| `frequencies`              | List of Frequencies |
| `frequency` *(read-only)*  | Frequency           |
| `subscribed` *(read-only)* | —                   |

### Slots

| Slot        | Default                                                                                                                                                                                           |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| *(unnamed)* | By default contains the configured frequency as a select option. You can substitute it with your own `<option>` tags with values such as `2w`, `3m`, or `10d` to represent different frequencies. |

***

## og-tooltip

This element displays a tooltip trigger. When a customer hovers over the trigger, a tooltip is displayed.

### Slots

| Slot      | Default                                                |
| --------- | ------------------------------------------------------ |
| `trigger` | By default displays the value of `offerTooltipTrigger` |
| `content` | By default displays the value of `offerTooltipContent` |