# Condition & Navigation Components

{% embed url="<https://app.supademo.com/demo/cmlvsal2y00jjz20ixfd9p4oy?utm_source=link>" %}

**Opt-In** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9vgiop02idv50j6nyldobl?utm_source=link>" %}

Captures user consent or agreement.\
Used for compliance and confirmation purposes.

**Embedded Link**&#x20;

{% embed url="<https://app.supademo.com/demo/cmo9vtm6301v2xv0jmo31afe2?utm_source=link>" %}

Displays a clickable hyperlink within text.\
Used to redirect users to external or policy pages.

#### **Conditional Component** &#x20;

**IF Condition** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9wl8ig02iqz40jah9bej86?utm_source=link>" %}

Displays components dynamically based on defined logic.\
Used to personalize flow behavior based on user input.

#### **Footer** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9xa28q02rvv50j4m2uc3ez?utm_source=link>" %}

Displays the primary action buttons of a screen.\
Required to move the user to the next step in the flow.

### Example Use Case &#x20;

**Lead Collection Flow**

Scenario:\
A business wants to collect customer details via WhatsApp.

Workflow:

* Screen 1: Heading + Name input + Phone input
* Screen 2: Product selection (Image Radio Button)
* Screen 3: Confirmation screen with Rich Text
* Footer: Submit

Outcome:\
User details are collected and stored in Variables.

#### Common Mistakes to Avoid &#x20;

* Adding components on Rich Text screen
* Not saving before testing
* Not mapping Variables properly
* Publishing without testing

#### Troubleshooting &#x20;

**Flow not publishing**

* Check required fields
* Ensure Footer is configured

**Components not showing**

* Check IF conditions
* Verify screen structure

**Rich Text not allowed**

* Remove other components from that screen

**Inputs not saving**

* Confirm variable mapping


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ownchat.app/whatsapp-channel/flow-builder/condition-and-navigation-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.