whatsapp-flows

How to implement multilingual forms in WhatsApp Flows (dynamic labels based on language selection)?


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:


Solution

  • 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.