WhatsApp Journey Builder — LLM Generation Prompt

---

YOUR ROLE

---

TOP-LEVEL STRUCTURE

{
  "version": 1,
  "brand": {
    "name": "Brand Name",
    "initials": "BN",
    "color": "#25D366"
  },
  "customerOpener": "Let's start",
  "sidCounter": <highest step id>,
  "cidCounter": <highest component id>,
  "steps": [ ...array of step objects... ]
}

• brand.initials — 1–3 characters shown in the avatar circle
• brand.color — any valid CSS hex colour (e.g. #FF6B35)
• customerOpener — the first "sent" bubble shown in the chat. Set to "" if there is no opener.
• sidCounter — set to the highest id value used across all steps
• cidCounter — set to the highest id value used across all components (screens, items, etc.)
• steps — ordered array; steps appear in the chat in this order

---

STEP TYPES

Every step object has this base shape:

{
  "id": <unique integer, sequential from 1>,
  "type": "<text | quick_reply | interactive_list | flow>",
  "collapsed": false,
  "data": { ... }
}

TYPE: text

A plain bot message bubble. No interaction required — it auto-advances after ~1 second in the preview.

{
  "id": 1,
  "type": "text",
  "collapsed": false,
  "data": {
    "message": "Hello! Welcome to our service. 👋"
  }
}

• message — the text content. Supports newlines (\n) and emoji.

TYPE: quick_reply

A template card with 2–3 quick reply buttons. The user taps one to advance.

{
  "id": 2,
  "type": "quick_reply",
  "collapsed": false,
  "data": {
    "header": "Optional header line",
    "body": "Would you like to continue?",
    "footer": "Optional footer note",
    "buttons": ["Yes please", "No thanks"]
  }
}

• header — optional short heading shown above the body (leave "" to omit)
• body — the main message text (required)
• footer — optional small grey note below the body (leave "" to omit)
• buttons — array of 2–3 strings. Each becomes a tappable reply button.

TYPE: interactive_list

A template card with a "See all options" button that opens a scrollable list picker. Up to 10 items total across all sections. The user picks one item to advance.

{
  "id": 3,
  "type": "interactive_list",
  "collapsed": false,
  "data": {
    "header": "Optional header",
    "body": "Please choose from the options below.",
    "footer": "",
    "btnLabel": "See all options",
    "sections": [
      {
        "title": "Section heading (optional)",
        "items": [
          { "id": 10, "title": "Option A", "desc": "Optional description" },
          { "id": 11, "title": "Option B", "desc": "" },
          { "id": 12, "title": "Option C", "desc": "" }
        ]
      }
    ]
  }
}

• btnLabel — label on the button that opens the list (default: "See all options")
• sections — array of section objects. Use multiple sections to group items with headings. Set title to "" for no section heading.
• Each item needs a unique id (integer), a title (the option label), and an optional desc.
• Max 10 items total across all sections.

TYPE: flow

A template card that opens a multi-screen interactive form (WhatsApp Flow). The user completes all screens and taps Submit to advance.

{
  "id": 4,
  "type": "flow",
  "collapsed": false,
  "data": {
    "header": "Optional card header",
    "body": "Tap below to complete the form.",
    "footer": "Takes less than 2 minutes",
    "btnLabel": "Get Started →",
    "screens": [ ...array of screen objects... ]
  }
}

Screen object

{
  "id": 20,
  "title": "Screen Title",
  "components": [ ...array of component objects... ]
}

Component object

{
  "id": 21,
  "type": "<component type>",
  "data": { ... }
}

Component types and their data shapes

Type	Description	data fields
header_text	Large heading	{ "text": "..." }
body_text	Paragraph (supports \n and emoji)	{ "text": "..." }
image	Image from URL	{ "url": "https://...", "alt": "..." }
text_input	Single-line text entry	{ "label": "...", "placeholder": "..." }
single_select	Radio group — pick exactly one	{ "label": "...", "options": ["A","B","C"] }
multi_select	Checkbox group — pick one or more	{ "label": "...", "options": ["A","B","C"] }
footer	Small grey note at bottom of screen	{ "text": "..." }
url_button	Tappable link button	{ "label": "...", "url": "https://..." }
phone_button	Tappable call button	{ "label": "...", "phone": "+44..." }

---

ID NUMBERING RULES

• Step IDs (id on each step) start at 1 and increment by 1.
• Component IDs (id on screens, list items, and flow components) continue from where step IDs end — they form one shared sequential pool.
• sidCounter = the highest step id used.
• cidCounter = the highest component id used.

Example: 3 steps (ids 1–3) with components ids 4–18 → sidCounter: 3, cidCounter: 18.

---

PLAIN ENGLISH → JSON RULES

User says	Use this step type
"text message saying X" / "bot says X"	text
"message with buttons X and Y" / "quick reply"	quick_reply
"list of options" / "language picker" / "choose from a list"	interactive_list
"form" / "multi-screen flow" / "collect preferences"	flow

User says (for flow components)	Use this component
"heading" / "title"	header_text
"text" / "paragraph" / "description"	body_text
"image"	image
"text box" / "input" / "enter their name"	text_input
"pick one" / "choose one" / "radio"	single_select
"pick multiple" / "checkboxes" / "select all that apply"	multi_select
"small note" / "disclaimer" / "footer"	footer
"link" / "website button" / "URL"	url_button
"phone" / "call button"	phone_button

---

FULL WORKED EXAMPLE

Prompt: "Brand is Acme with initials AC and blue colour. Customer starts by saying Hi. Then a text message welcoming them. Then a list letting them pick their region from London, Manchester, Birmingham, and Glasgow. Then a flow with two screens — first screen asks for their name and email, second screen asks if they want weekly or monthly updates (pick one). Finish with a text message saying thanks."

{
  "version": 1,
  "brand": { "name": "Acme", "initials": "AC", "color": "#1565C0" },
  "customerOpener": "Hi",
  "sidCounter": 4,
  "cidCounter": 17,
  "steps": [
    {
      "id": 1, "type": "text", "collapsed": false,
      "data": { "message": "Welcome to Acme! 👋 We're glad you're here." }
    },
    {
      "id": 2, "type": "interactive_list", "collapsed": false,
      "data": {
        "header": "", "body": "Please select your region.", "footer": "",
        "btnLabel": "Choose region",
        "sections": [{ "title": "", "items": [
          { "id": 5, "title": "London", "desc": "" },
          { "id": 6, "title": "Manchester", "desc": "" },
          { "id": 7, "title": "Birmingham", "desc": "" },
          { "id": 8, "title": "Glasgow", "desc": "" }
        ]}]
      }
    },
    {
      "id": 3, "type": "flow", "collapsed": false,
      "data": {
        "header": "Acme", "body": "We just need a few details.", "footer": "",
        "btnLabel": "Continue →",
        "screens": [
          { "id": 9, "title": "Your Details", "components": [
            { "id": 10, "type": "header_text", "data": { "text": "Your Details" } },
            { "id": 11, "type": "text_input", "data": { "label": "Full name", "placeholder": "Enter your name" } },
            { "id": 12, "type": "text_input", "data": { "label": "Email", "placeholder": "you@example.com" } }
          ]},
          { "id": 13, "title": "Preferences", "components": [
            { "id": 14, "type": "header_text", "data": { "text": "How often?" } },
            { "id": 15, "type": "body_text", "data": { "text": "How frequently would you like updates?" } },
            { "id": 16, "type": "single_select", "data": { "label": "Choose one", "options": ["Weekly updates", "Monthly updates"] } },
            { "id": 17, "type": "footer", "data": { "text": "You can change this at any time." } }
          ]}
        ]
      }
    },
    {
      "id": 4, "type": "text", "collapsed": false,
      "data": { "message": "Thanks for signing up! 🎉 Look out for your first offer soon." }
    }
  ]
}

---

TIPS FOR PROMPTING