External Offers
ConvertExternal — link to payment pages, booking tools, and other external destinations.
Basic Usage
Link to an external payment or booking page:
::convert-external{to="https://buy.stripe.com/your-link" type="payment" location="pricing"}
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
to | string | required | External URL |
type | OfferId | required | 'payment', 'booking', 'service', 'social', or 'apply' |
location | string | required | Location identifier for tracking |
label | string | Auto from type | Button/CTA text |
icon | string | Auto from type | Trailing icon |
variant | 'button' | 'card' | 'button' | Display mode |
Button Variant Props
| Prop | Type | Default |
|---|---|---|
buttonSize | ButtonProps['size'] | 'xl' |
buttonVariant | ButtonProps['variant'] | 'solid' |
buttonColor | ButtonProps['color'] | 'primary' |
block | boolean | — |
Card Variant Props
| Prop | Type | Default |
|---|---|---|
title | string | — |
description | string | — |
price | string | — |
originalPrice | string | — |
priceNote | string | — |
badge | string | — |
highlighted | boolean | false |
Type-Based Defaults
The type prop sets the default label and icon:
| Type | Default Label | Default Icon |
|---|---|---|
payment | Purchase Now | i-lucide-credit-card |
booking | Book Session | i-lucide-calendar |
apply | Apply Now | i-lucide-send |
Override these by passing label and icon explicitly.
Button Variant
A simple CTA button that opens an external URL:
::convert-external
---
to: https://cal.com/yourname/30min
type: booking
location: hero
label: Book a Free Call
icon: i-lucide-calendar
---
::
Card Variant
A rich pricing card with price, description, and CTA:
::convert-external
---
to: https://buy.stripe.com/your-link
type: payment
location: pricing
variant: card
title: Pro Plan
description: Everything you need to validate your idea.
price: "$49"
originalPrice: "$99"
priceNote: one-time payment
badge: Most Popular
highlighted: true
---
::
Event Tracking
Every click fires an offer_click event with {type}_external as the target:
{
"type": "offer_click",
"target": "payment_external",
"location": "pricing"
}
This lets you measure how many visitors reach the payment/booking step.