If you're seeing the MISSING_FOOTER_IN_SWITCH_BRANCHES error, here's the quick fix:
Make sure every Switch case includes a Footer if at least one of the cases has it.
What’s Going Wrong?
When you're using a Switch component inside a flow and add a Footer in one of the cases, all other cases must also include a Footer. The error occurs because the rendering engine expects consistent layout structure across all cases for smoother user experience and predictable behavior.
Example That Breaks
{
"type": "Switch",
"value": "${data.ti}",
"cases": {
"case1": [],
"case2": [
{
"type": "Footer",
"label": "PASS_CUSTOM_VALUE",
"on-click-action": {
"name": "complete",
"payload": {}
}
}
],
"case3": [
{
"type": "TextInput",
"label": "PASS_CUSTOM_VALUE",
"name": "PASS_CUSTOM_VALUE"
}
]
}
}In this case, only case2 has a Footer, which triggers the error.
How to Fix It
Add a Footer to every case, even if it's just a simple one or a placeholder.
"cases": {
"case1": [
{
"type": "Footer",
"label": "Next",
"on-click-action": {
"name": "complete",
"payload": {}
}
}
],
"case2": [
{
"type": "Footer",
"label": "PASS_CUSTOM_VALUE",
"on-click-action": {
"name": "complete",
"payload": {}
}
}
],
"case3": [
{
"type": "TextInput",
"label": "PASS_CUSTOM_VALUE",
"name": "PASS_CUSTOM_VALUE"
},
{
"type": "Footer",
"label": "Submit",
"on-click-action": {
"name": "complete",
"payload": {}
}
}
]
}Why It Matters
Uniformity in UI logic helps ensure your flow renders consistently and avoids unpredictable user interactions. By keeping Footer components present in all branches, you align with best practices for building stable, maintainable flows.
For more troubleshooting insights related to WhatsApp Business API, check out heltar.com/blogs.