I'm building a WhatsApp Flow with multilingual support. My idea is: Let the user choose their preferred language via RadioButtonsGroup. On selection, my backend receives the selected language via data_exchange. The server responds with a translated layout (i.e., updated screen, with localized labels in the same structure). This replaces the next screen entirely. Here’s what I return from the server after language selection:
{
"version": "3.0",
"screen": {
"id": "BIRTH_DETAILS",
"title": "Detalles de nacimiento",
"data": {},
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "DatePicker",
"name": "birth_date",
"label": "Fecha de nacimiento"
},
{
"type": "TextInput",
"name": "birth_time",
"label": "Hora de nacimiento"
},
{
"type": "TextInput",
"name": "birth_location",
"label": "Ciudad de nacimiento"
},
{
"type": "Footer",
"label": "Continuar",
"on-click-action": {
"name": "data_exchange",
"payload": {
"birth_date": "${form.birth_date}",
"birth_time": "${form.birth_time}",
"birth_location": "${form.birth_location}"
}
}
}
]
}
}
}
Question:
I'm not sure what you mean by "server responds with a translated layout"? The layout of a flow is not dynamic.
However, you can make the labels and values of components dynamic and translate them.