Bubbles
=======

Bubble blocks display content to the user — text, images, video, audio, embedded iframes, and structured cards. They have no user inputs; they only produce output in the conversation.

----

.. _chatbot-ref-text:

Text
----

Displays a text message to the user. Supports rich text formatting, including bold, italic, lists, and links via the inline editor.

**How to use**

Drag **Text** onto the canvas, type your message in the content field, and connect it to the previous block in the group.

**Configuration**

The content field supports plain text and rich text (HTML and markdown-style formatting via the toolbar). Use ``{{variable}}`` syntax to insert variable values inline.

----

.. _chatbot-ref-image:

Image
-----

Displays an image in the conversation.

**How to use**

Drag **Image** onto the canvas and provide an image URL or upload a file. Optionally configure a click-through link.

**Configuration**

.. list-table::
   :widths: 30 70
   :header-rows: 1

   * - Field
     - Description
   * - URL
     - Direct URL to the image file.
   * - Click Link URL
     - Optional URL the user is taken to when they click the image.
   * - Alt text
     - Accessibility label for the image.

----

.. _chatbot-ref-video:

Video
-----

Embeds a video player in the conversation. Supports YouTube, Vimeo, and direct video file URLs.

**How to use**

Drag **Video** onto the canvas and provide the video URL.

**Configuration**

.. list-table::
   :widths: 30 70
   :header-rows: 1

   * - Field
     - Description
   * - URL
     - Video URL (YouTube, Vimeo, or direct file URL).
   * - Height
     - Player height in pixels.
   * - Aspect Ratio
     - Aspect ratio for responsive sizing.
   * - Max Width
     - Maximum player width.
   * - Query Params
     - Additional query parameters appended to the video URL (e.g., autoplay settings).

----

.. _chatbot-ref-embed:

Embed
-----

Embeds an iframe (PDF, website, or other HTML-embeddable content) in the conversation.

**How to use**

Drag **Embed** onto the canvas and provide the embed URL or HTML snippet.

**Configuration**

.. list-table::
   :widths: 30 70
   :header-rows: 1

   * - Field
     - Description
   * - URL
     - URL or embed code to display in the iframe.
   * - Height
     - Frame height in pixels.
   * - Wait for Event
     - When enabled, the flow pauses until the embedded content fires a specific browser event.
   * - Event Name
     - The event name to listen for (used when **Wait for Event** is enabled).
   * - Save Data in Variable
     - Variable to store the event payload when **Wait for Event** fires.

----

.. _chatbot-ref-audio:

Audio
-----

Plays an audio file in the conversation.

**How to use**

Drag **Audio** onto the canvas and provide the audio URL.

**Configuration**

.. list-table::
   :widths: 30 70
   :header-rows: 1

   * - Field
     - Description
   * - URL
     - Direct URL to the audio file.
   * - Autoplay
     - When enabled, the audio starts playing automatically when the block is reached.

----

.. _chatbot-ref-adaptive-card:

Adaptive Card
-------------

Renders a structured Adaptive Card layout (Microsoft Adaptive Cards format) in the conversation.

**How to use**

Drag **Adaptive Card** onto the canvas and paste or write the card JSON in the content field.

**Configuration**

.. list-table::
   :widths: 30 70
   :header-rows: 1

   * - Field
     - Description
   * - Card JSON
     - The Adaptive Card JSON schema defining the card layout.
   * - Card Title
     - Optional title displayed above the card.
   * - Card Version
     - Adaptive Card schema version (e.g., ``1.5``).
   * - Fallback Text
     - Text shown in clients that do not support Adaptive Cards.
   * - Variable
     - Variable to store the user's response if the card contains interactive elements.