Invite Preview Card
Shows the rendered invite email teammates will receive above an editable personal message field, with recipient chips and a send button.
Shows the rendered invite email teammates will receive above an editable personal message field, with recipient chips and a send button.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Invite Preview Card shows the sender what their teammates will see before the invites go out. The card renders the email as a preview pane: Avery Stone invited you to Acme in the header, the personal message in a muted block, an Accept invitation CTA with the 7-day expiry note below it, and the recipient chips at the bottom (jordan@northwind.co as Member, riley@northwind.co as Viewer). Below the preview a Textarea holds the same message text so it can be edited before sending.
Invitees are a small array of email and role pairs. Showing the rendered email above the editable field is the see-before-you-send pattern; it removes the I did not know it would look like that support ticket.
Reach for this block as the final review step before invites dispatch, wired to your pending invitees list and send endpoint. Pair it with a step indicator so users know they are almost done.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the onboarding invite review step. Other preview card variants:
Tip: the 7-day expiry note next to the CTA belongs in the preview, not just the fine print; it sets expectations for the recipient before they arrive.