Marketing sectionPro
Metered pricing
Wire it up
All optional. With none, it plays exactly as it does here and hands over to whoever touches it.
<Pricing
plans={plans}
promises={promises}
compare={compare}
onSelect={(plan, choice, yearly, conversations) => {}}
onContact={() => {}}
/>Your data
plansCheapest first. Each has a name, blurb, price a month, included conversations, a price for each one after (or null to stop at the limit), what it adds to the plan before, and its button.
Plan[]promisesShort promises under the plans. Pass an empty list to leave them out.
string[]compareRows of the full comparison, with one value per plan: true, false or a short value. Pass an empty list to leave it out.
CompareRow[]answersThe questions people ask before they buy. Pass an empty list to leave them out.
Answer[]unitWhat you charge for, like seats, credits or API calls.
string'conversations'periodHow often.
string'a month'rangeThe lowest and highest the number can go.
[number, number][100, 100000]conversationsWhere the number starts.
number6200discountTaken off the base price when billed yearly. The toggle shows it as a percentage.
number0.2hintHelps a person find their number.
stringtitleThe line above the sentence: the model, then what it isn’t, set in two tones.
[string, string]wordsThe sentence, around its number, plan and price. Built from unit and period if left out.
[string, string, string, string]toneFollow the page’s theme, or stay black whatever it is.
'auto' | 'black''auto'What it tells you
onSelectCalled when a person picks a plan, with the billing and volume they set.
(plan: string, choice: { yearly: boolean; conversations: number }) => voidonContactCalled when a person presses Talk to us.
() => voidEvery block also takes accent, the one colour everything in it derives from; autoplay, which plays the demo until someone touches it; and className.