Block Types
===========

Blocks are the building units of a chatbot flow. Every block belongs to one of four categories, visible in the block sidebar on the right of the canvas.

.. image:: ../images/chatbot-block-sidebar.png
   :alt: Chatbot block sidebar showing all four categories
   :align: center
   :width: 100%

|

Bubbles
-------

Bubble blocks send messages from the agent to the user. They render as chat messages in the conversation.

.. list-table::
   :widths: 20 80
   :header-rows: 1

   * - Block
     - Description
   * - :ref:`Text <chatbot-ref-text>`
     - Sends a text message. Supports rich formatting and variable references using ``{{variableName}}`` syntax.
   * - :ref:`Image <chatbot-ref-image>`
     - Sends an image file by URL.
   * - :ref:`Video <chatbot-ref-video>`
     - Embeds a video in the conversation.
   * - :ref:`Embed <chatbot-ref-embed>`
     - Embeds an iframe or external content.
   * - :ref:`Audio <chatbot-ref-audio>`
     - Sends an audio file by URL.
   * - :ref:`Adaptive Card <chatbot-ref-adaptive-card>`
     - Sends a structured interactive card using the Adaptive Card schema. Supports form fields that save values into variables.

Inputs
------

Input blocks prompt the user for a response and capture it into a variable.

.. list-table::
   :widths: 20 80
   :header-rows: 1

   * - Block
     - Description
   * - :ref:`Text <chatbot-ref-text-input>`
     - Free-text input field.
   * - :ref:`Number <chatbot-ref-number-input>`
     - Numeric input with optional validation.
   * - :ref:`Email <chatbot-ref-email-input>`
     - Email address input with format validation.
   * - :ref:`Website <chatbot-ref-website-input>`
     - URL input.
   * - :ref:`Date <chatbot-ref-date-input>`
     - Date picker.
   * - :ref:`Phone <chatbot-ref-phone-input>`
     - Phone number input.
   * - :ref:`Buttons <chatbot-ref-buttons-input>`
     - Presents a set of button choices. The selected option is captured as a variable value.
   * - :ref:`Pic choice <chatbot-ref-picture-choice>`
     - Image-based choice selection.
   * - **Payment**
     - Payment collection input.
   * - :ref:`Rating <chatbot-ref-rating-input>`
     - Star or numeric rating input.
   * - :ref:`File <chatbot-ref-file-input>`
     - File upload input.

Logic
-----

Logic blocks control the flow of the conversation — branching, redirecting, waiting, and manipulating variables.

.. list-table::
   :widths: 20 80
   :header-rows: 1

   * - Block
     - Description
   * - :ref:`Condition <chatbot-ref-condition>`
     - Branches the flow based on a condition. Evaluates a variable or expression and routes to different groups for true and false outcomes.
   * - :ref:`Set Variable <chatbot-ref-set-variable>`
     - Assigns a value to a variable. The value can be a static string, a formula, or the output of a code expression.
   * - :ref:`Script <chatbot-ref-script>`
     - Executes a JavaScript snippet. Use to transform data, compute values, or call logic that cannot be expressed with other blocks.
   * - :ref:`Redirect <chatbot-ref-redirect>`
     - Redirects the user's browser to a URL.
   * - :ref:`Wait <chatbot-ref-wait>`
     - Pauses the flow for a specified duration before continuing.
   * - :ref:`Jump <chatbot-ref-jump>`
     - Jumps to a specific group in the current flow without drawing an edge.
   * - :ref:`AB Test <chatbot-ref-ab-test>`
     - Splits traffic between two paths at a configurable ratio for A/B testing.

Integrations
------------

Integration blocks connect the chatbot to external services and AI models.

.. list-table::
   :widths: 20 80
   :header-rows: 1

   * - Block
     - Description
   * - :ref:`Webhook <chatbot-ref-webhook>`
     - Makes an HTTP request to an external URL and optionally saves the response into a variable.
   * - :ref:`Flow Agent <chatbot-ref-flow-agent-block>`
     - Hands off to an Agentic Flow agent and returns the result into the chatbot flow.
   * - :ref:`Voice Agent <chatbot-ref-voice-agent-block>`
     - Triggers a Voice Agent call.
   * - **DifyAI**
     - Calls a GenAI flow (Dify) workflow or chatbot.
   * - **QR Code**
     - Generates a QR code image from a URL or text value.