Skip to main content
Magic Canvas lets a PAL show interactive cards, such as multiple-choice questions, calendars, charts, and text, during a live video conversation. User responses flow back to the PAL and your backend. The PAL decides when to show a card; there is no per-card API call. 
PAL invokes a Canvas action  →  card renders in the call
User responds to the card    →  PAL reacts to the response
                             →  your webhook receives the interaction

​
Conversation Flow

1

Attach the Magic Canvas skill

Attach via PUT /v2/pals/{pal_id}/skills/magic_canvas; remove with DELETE on the same path:
{
  "config": {}
}
Attaching enables every component with default settings, including components Tavus ships later. The exception is scheduling_embed, which stays inactive until you set its scheduling_url.config.components is a sparse overlay: add an entry only to configure or disable a component ({"enabled": false}); unlisted components stay on. Unknown keys are rejected. See Configuring your PAL.
2

Create a conversation

Video conversations get Canvas actions automatically. Audio-only, text-chat, and external-meeting (meeting_url, e.g. Zoom/Teams/Meet) conversations never get them.
3

PAL shows a card

The PAL invokes a Canvas action; the card renders in a left or right side rail beside the face video (inline), and the PAL can update or clear it mid-conversation.
4

Interaction flows back

When the user submits, skips, or dismisses a card:
  • The PAL responds to it, as it does to speech.
  • Tavus records it and delivers a canvas.interaction event to your conversation webhook, once per interaction.
Fetch a conversation’s full interaction history with your API key; see Interactions.

​
Hosted vs SDK

Both use the same PALs, components, and webhook; the difference is how much of the UI you own.
Hosted embed / widget@tavus/cvi-ui SDK
What it isA <tavus-embed> or <tavus-widget> tag you drop on any pageA <MagicCanvas> React component you add next to your conversation UI
Rendering & interaction postingAutomaticAutomatic, with onInteraction / onError callbacks for your app
Custom lookTavus-designed cardsCards by default, or bring your own React renderers per component
Best forFastest path; any site, no framework neededApps that own their conversation UI

​
Components

Seven components ship today, all at version v1: four interactive (submit an answer or skip) and three display (dismiss only).
ComponentWhat the PAL can do with itUser can answer?
questionAsk a multiple-choice question, optionally with a free-text “Other”Yes
inputAsk for a single typed value: text, email, number, or phone (tel)Yes
calendarLet the user pick a date, a time slot, or a date rangeYes
scheduling_embedEmbed your real scheduling page (e.g. Calendly) for live bookingYes
textShow a card of formatted textDismiss only
chartShow a chart of data from the conversationDismiss only
alertShow a dismissible noticeDismiss only

​
Rendering

Components render in a sandboxed iframe that isolates styles and scripts in both directions, served from Tavus infrastructure. To render cards in your own React tree, register a renderer per component in the SDK; interactions flow back identically. See Custom rendering.
The PAL drives card timing. Influence when cards appear through its system prompt and context.

​
Next Steps