If you're running into the MORE_THAN_ONE_FOOTER error in your Flow JSON, it's because the screen layout includes more than one Footer, either directly or through branching logic like Switch or If components.

TL;DR

Only one Footer component is allowed per screen, even if it's placed conditionally inside Switch or If blocks. To fix this, ensure that only one Footer exists across all branches.

What's Going Wrong?

Here’s what’s happening behind the scenes:
The Flow engine flattens the layout tree and evaluates all possible execution paths. If any combination leads to more than one Footer on the screen, it throws this error.

Example of the Problem:

{
  "type": "Switch",
  "value": "${data.ti}",
  "cases": {
    "case1": [{ "type": "Footer", ... }],
    "case2": [{ "type": "Footer", ... }]
  }
},
{
  "type": "Footer", ...
}

In this example, both case1 and case2 have their own Footer, and then there’s another Footer outside the switch. If any of the cases get selected, it results in two footers being rendered.

How to Fix It:

You have two options:

  1. Move the Footer Outside the Conditional:
    If all cases result in the same footer, just move the single Footer outside the Switch and delete the inner ones.

  2. Unify Logic and Use One Footer:
    If footers differ across cases, try to unify their logic via dynamic values (like dynamic labels or payloads) and use a single Footer with conditional values.

Cleaned Up Example:

{
  "type": "Footer",
  "label": "${data.ti === 'case1' ? 'Label A' : 'Label B'}",
  "on-click-action": {
    "name": "complete",
    "payload": {}
  }
}

This avoids branching and keeps the layout compliant.

For more troubleshooting insights related to WhatsApp Business API, check out heltar.com/blogs.