Content & Media Nodes
Content nodes present rich, non-text content to the user during a conversation -- product listings, images, videos, and structured forms. They complement conversation nodes by adding visual and interactive elements to the flow.
Product Card
Type: product_card
Displays products from a Data Catalog inside the conversation. Products can be shown as a carousel, grid, or list, and each card includes a call-to-action button.
Properties
| Property | Type | Description |
|---|---|---|
catalogId | string | The Data Catalog to pull products from |
filter | object | Filter criteria to narrow which products are shown |
limit | number | Maximum number of products to display |
displayStyle | carousel | grid | list | Layout for the product cards |
ctaText | string | Label for the call-to-action button on each card (e.g., "View Details", "Add to Cart") |
companionMessage | string | Static text message displayed alongside the products |
aiCompanion | boolean | When enabled, the LLM generates a contextual message to accompany the products |
aiCompanionPrompt | string | Instructions for the AI companion message (e.g., "Highlight the best value option") |
Display styles
- Carousel -- Products scroll horizontally. Best for browsing a curated selection.
- Grid -- Products arranged in a 2-column grid. Best for comparison shopping.
- List -- Products stacked vertically with more detail per item. Best for detailed specs.
CTA behavior
When the user clicks a product's CTA button in widget mode, the node fires a postMessage event to the host page with the product data. The host page can handle this to open a product detail page, add the item to a cart, or trigger any custom behavior.
AI companion
When aiCompanion is enabled, the LLM generates a message based on the conversation context and the products being shown. Use aiCompanionPrompt to guide the tone and content -- for example, "Compare the top two options and recommend one based on the user's stated budget."
If aiCompanion is disabled, the node falls back to companionMessage for static text, or shows the products without any accompanying message.
Use cases
- Product recommendations based on conversation context
- Catalog browsing within a shopping assistant
- Upsell and cross-sell suggestions after a purchase intent is detected
Media
Type: media
Displays an image or video with an optional caption. Use this node to show product demos, tutorial videos, promotional banners, or any visual content that supports the conversation.
Properties
| Property | Type | Description |
|---|---|---|
mediaType | image | video | Whether to render an image or a video player |
mediaUrl | string | URL of the image or video file |
caption | string | Optional text displayed below the media |
carouselStyle | horizontal | vertical | grid | Layout when multiple media items are included |
Supported formats
- Images -- JPEG, PNG, WebP, GIF, SVG. Rendered inline with responsive sizing.
- Videos -- MP4, WebM. Rendered with native playback controls. YouTube and Vimeo URLs are also supported and render as embedded players.
Use cases
- Product demo videos after a user asks "how does it work?"
- Promotional banners at the start of a seasonal campaign flow
- Step-by-step tutorial images in a support journey
Lead Capture
Type: lead_capture
Displays a structured form inside the conversation to collect visitor information. The form renders inline and stores submitted values as flow variables.
Properties
| Property | Type | Description |
|---|---|---|
fields | array | List of form fields, each with a label, type (text, email, phone, number, select, textarea), placeholder, required flag, and variableName |
submitText | string | Label for the submit button (e.g., "Submit", "Get My Quote") |
Field types
| Type | Renders as |
|---|---|
text | Single-line text input |
email | Email input with format validation |
phone | Phone number input |
number | Numeric input |
select | Dropdown with predefined options |
textarea | Multi-line text area |
Each field maps to a flow variable via variableName. After the user submits the form, those variables are available to all downstream nodes -- you can reference them in conditions, pass them to API calls, or include them in email nodes.
Validation
Required fields are enforced client-side before submission. Email fields validate format automatically. If validation fails, the form shows inline error messages and the user can correct and resubmit.
Use cases
- Contact forms ("Tell us about your project")
- Newsletter signups with email and name
- Quote request forms with budget range and timeline
- Event registration with attendee details