Internal Offers
ConvertInternal — link to offer detail pages within your site.
Basic Usage
Link to an offer page within your site:
::convert-internal{offer-slug="mentorship" location="hero"}
::
This queries the pages collection for a page at /offers/mentorship and uses its title, description, and icon for the button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
offerSlug | string | — | Slug to resolve from the pages collection |
to | string | — | Explicit path (overrides slug resolution) |
label | string | — | Explicit label (overrides content query) |
icon | string | — | Explicit icon (overrides content query) |
location | string | required | Location identifier for tracking |
variant | 'button' | 'card' | 'button' | Display mode |
size | ButtonProps['size'] | 'md' | Button size |
block | boolean | — | Full-width button |
color | ButtonProps['color'] | 'primary' | Button color |
buttonVariant | ButtonProps['variant'] | 'solid' | Button variant |
description | string | — | Card description |
How Slug Resolution Works
When you pass offerSlug="mentorship":
- The component queries the
pagescollection at path{routing.offers}/mentorship(e.g.,/offers/mentorship) - It extracts
title,description, andiconfrom the page frontmatter - These become the button label and card content (unless overridden by explicit props)
The query is lazy and client-only, so it doesn't block initial page render.
Button Variant
::convert-internal{offer-slug="mentorship" location="sidebar" size="lg"}
::
Card Variant
::convert-internal
---
offerSlug: mentorship
location: offers-section
variant: card
description: Weekly 1-on-1 sessions with an experienced founder.
---
::
Explicit Path
Skip the content query entirely by passing to directly:
::convert-internal{to="/offers/mentorship" label="Learn About Mentorship" location="footer"}
::
Event Tracking
Every click fires an offer_click event with {offerSlug}_internal as the target:
{
"type": "offer_click",
"target": "mentorship_internal",
"location": "hero"
}