Ringback message

set({
        text: e.target.value
      })} className={inputCls} />
          </div>
          <div className="grid sm:grid-cols-2 gap-3">
            <div>
              <label className={labelCls}>Voice</label>
              <select value={c.voice} onChange={e => set({
        voice: e.target.value
      })} className={inputCls}>
                <option value="WOMAN">Woman</option>
                <option value="MAN">Man</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Language</label>
              <select value={c.language} onChange={e => set({
        language: e.target.value
      })} className={inputCls}>
                <option value="en-US">English (US)</option>
                <option value="en-IN">English (India)</option>
                <option value="hi-IN">Hindi</option>
              </select>
            </div>
          </div>
        </div>;
    }
    if (id === "speak") {
      return <div className="space-y-3">
          <div>
            <label className={labelCls}>Text to Speak</label>
            <textarea rows={2} value={c.text} onChange={e => set({
        text: e.target.value
      })} className={inputCls} />
          </div>
          <div className="grid sm:grid-cols-3 gap-3">
            <div>
              <label className={labelCls}>Voice</label>
              <select value={c.voice} onChange={e => set({
        voice: e.target.value
      })} className={inputCls}>
                <option value="WOMAN">Woman</option>
                <option value="MAN">Man</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Language</label>
              <select value={c.language} onChange={e => set({
        language: e.target.value
      })} className={inputCls}>
                <option value="en-US">English (US)</option>
                <option value="en-GB">English (UK)</option>
                <option value="en-IN">English (IN)</option>
                <option value="hi-IN">Hindi</option>
                <option value="es-ES">Spanish</option>
                <option value="fr-FR">French</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Loop</label>
              <input type="number" min="1" max="10" value={c.loop} onChange={e => set({
        loop: e.target.value
      })} className={inputCls} />
            </div>
          </div>
        </div>;
    }
    if (id === "play") {
      return <div className="grid sm:grid-cols-4 gap-3">
          <div className="sm:col-span-3">
            <label className={labelCls}>Audio URL (.mp3 / .wav)</label>
            <input value={c.url} onChange={e => set({
        url: e.target.value
      })} className={inputCls} />
          </div>
          <div>
            <label className={labelCls}>Loop</label>
            <input type="number" min="1" max="10" value={c.loop} onChange={e => set({
        loop: e.target.value
      })} className={inputCls} />
          </div>
        </div>;
    }
    if (id === "wait") {
      return <div className="grid sm:grid-cols-2 gap-3">
          <div>
            <label className={labelCls}>Length (sec)</label>
            <input type="number" min="1" max="120" value={c.length} onChange={e => set({
        length: e.target.value
      })} className={inputCls} />
          </div>
          <div>
            <label className={labelCls}>Silence</label>
            <select value={String(c.silence)} onChange={e => set({
        silence: e.target.value === "true"
      })} className={inputCls}>
              <option value="true">true</option>
              <option value="false">false</option>
            </select>
          </div>
        </div>;
    }
    if (id === "stream") {
      return <div className="space-y-3">
          <div>
            <label className={labelCls}>WebSocket URL (wss://)</label>
            <input value={c.url} onChange={e => set({
        url: e.target.value
      })} className={inputCls} />
          </div>
          <div className="grid sm:grid-cols-2 gap-3">
            <div>
              <label className={labelCls}>Bidirectional</label>
              <select value={String(c.bidirectional)} onChange={e => set({
        bidirectional: e.target.value === "true"
      })} className={inputCls}>
                <option value="true">true</option>
                <option value="false">false</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Keep call alive</label>
              <select value={String(c.keepCallAlive)} onChange={e => set({
        keepCallAlive: e.target.value === "true"
      })} className={inputCls}>
                <option value="true">true</option>
                <option value="false">false</option>
              </select>
            </div>
          </div>
        </div>;
    }
    if (id === "gather") {
      return <div className="space-y-3">
          <div>
            <label className={labelCls}>Prompt (nested Speak)</label>
            <textarea rows={2} value={c.promptText} onChange={e => set({
        promptText: e.target.value
      })} className={inputCls} />
          </div>
          <div>
            <label className={labelCls}>Action URL</label>
            <input value={c.actionUrl} onChange={e => set({
        actionUrl: e.target.value
      })} className={inputCls} />
          </div>
          <div className="grid sm:grid-cols-4 gap-3">
            <div>
              <label className={labelCls}>Method</label>
              <select value={c.method} onChange={e => set({
        method: e.target.value
      })} className={inputCls}>
                <option value="POST">POST</option>
                <option value="GET">GET</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Digits</label>
              <input type="number" min="1" max="20" value={c.numDigits} onChange={e => set({
        numDigits: e.target.value
      })} className={inputCls} />
            </div>
            <div>
              <label className={labelCls}>Timeout (s)</label>
              <input type="number" min="1" max="60" value={c.timeout} onChange={e => set({
        timeout: e.target.value
      })} className={inputCls} />
            </div>
            <div>
              <label className={labelCls}>Finish key</label>
              <input value={c.finishOnKey} onChange={e => set({
        finishOnKey: e.target.value
      })} className={inputCls} />
            </div>
          </div>
        </div>;
    }
    if (id === "record") {
      return <div className="space-y-3">
          <div>
            <label className={labelCls}>Action URL (recording webhook)</label>
            <input value={c.actionUrl} onChange={e => set({
        actionUrl: e.target.value
      })} className={inputCls} />
          </div>
          <div className="grid sm:grid-cols-3 gap-3">
            <div>
              <label className={labelCls}>Max length (s)</label>
              <input type="number" min="1" max="3600" value={c.maxLength} onChange={e => set({
        maxLength: e.target.value
      })} className={inputCls} />
            </div>
            <div>
              <label className={labelCls}>Play beep</label>
              <select value={String(c.playBeep)} onChange={e => set({
        playBeep: e.target.value === "true"
      })} className={inputCls}>
                <option value="true">true</option>
                <option value="false">false</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Finish key</label>
              <input value={c.finishOnKey} onChange={e => set({
        finishOnKey: e.target.value
      })} className={inputCls} />
            </div>
          </div>
        </div>;
    }
    if (id === "dial") {
      return <div className="space-y-3">
          <div className="grid sm:grid-cols-2 gap-3">
            <div>
              <label className={labelCls}>Phone Number</label>
              <input value={c.number} onChange={e => set({
        number: e.target.value
      })} className={inputCls} />
            </div>
            <div>
              <label className={labelCls}>Caller ID (owned/authorized)</label>
              <input value={c.callerId} onChange={e => set({
        callerId: e.target.value
      })} className={inputCls} />
            </div>
          </div>
          <div>
            <label className={labelCls}>Action URL (Opt)</label>
            <input value={c.actionUrl} onChange={e => set({
        actionUrl: e.target.value
      })} className={inputCls} />
          </div>
          <div className="grid sm:grid-cols-3 gap-3">
            <div>
              <label className={labelCls}>Method</label>
              <select value={c.method} onChange={e => set({
        method: e.target.value
      })} className={inputCls}>
                <option value="POST">POST</option>
                <option value="GET">GET</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Execute action XML?</label>
              <select value={String(c.redirect)} onChange={e => set({
        redirect: e.target.value === "true"
      })} className={inputCls}>
                <option value="true">True</option>
                <option value="false">False</option>
              </select>
              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">False still sends the final result to the action URL.</p>
            </div>
            <div>
              <label className={labelCls}>Timeout (s)</label>
              <input type="number" min="1" value={c.timeout} onChange={e => set({
        timeout: e.target.value
      })} className={inputCls} />
            </div>
          </div>
        </div>;
    }
    if (id === "conference") {
      return <div className="space-y-3">
          <div>
            <label className={labelCls}>Room name</label>
            <input value={c.name} onChange={e => set({
        name: e.target.value
      })} className={inputCls} />
          </div>
          <div className="grid sm:grid-cols-3 gap-3">
            <div>
              <label className={labelCls}>Start on enter</label>
              <select value={String(c.startOnEnter)} onChange={e => set({
        startOnEnter: e.target.value === "true"
      })} className={inputCls}>
                <option value="true">true</option>
                <option value="false">false</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>End on exit</label>
              <select value={String(c.endOnExit)} onChange={e => set({
        endOnExit: e.target.value === "true"
      })} className={inputCls}>
                <option value="true">true</option>
                <option value="false">false</option>
              </select>
            </div>
            <div>
              <label className={labelCls}>Max members</label>
              <input type="number" min="2" max="100" value={c.maxMembers} onChange={e => set({
        maxMembers: e.target.value
      })} className={inputCls} />
            </div>
          </div>
        </div>;
    }
    if (id === "dtmf") {
      return <div>
          <label className={labelCls}>Tones (digits / # / *)</label>
          <input value={c.digits} onChange={e => set({
        digits: e.target.value
      })} className={inputCls} />
        </div>;
    }
    if (id === "redirect") {
      return <div className="grid sm:grid-cols-4 gap-3">
          <div className="sm:col-span-3">
            <label className={labelCls}>Target URL</label>
            <input value={c.url} onChange={e => set({
        url: e.target.value
      })} className={inputCls} />
          </div>
          <div>
            <label className={labelCls}>Method</label>
            <select value={c.method} onChange={e => set({
        method: e.target.value
      })} className={inputCls}>
              <option value="POST">POST</option>
              <option value="GET">GET</option>
            </select>
          </div>
        </div>;
    }
    if (id === "hangup") {
      return <div>
          <label className={labelCls}>Reason (optional)</label>
          <select value={c.reason} onChange={e => set({
        reason: e.target.value
      })} className={inputCls}>
            <option value="">— none —</option>
            <option value="rejected">rejected</option>
            <option value="busy">busy</option>
          </select>
        </div>;
    }
    return null;
  };
  const cards = [];
  for (let i = 0; i < selected.length; i++) {
    const id = selected[i];
    const isOver = dragOver === i;
    const borderCls = isOver ? "border-primary/60 ring-2 ring-primary/20" : "border-gray-200 dark:border-white/10";
    cards.push(<div key={"card-" + id} draggable onDragStart={onDragStart(i)} onDragOver={onDragOver(i)} onDragLeave={onDragLeave} onDrop={onDrop(i)} className={"rounded-2xl border bg-white dark:bg-zinc-900 transition " + borderCls}>
        <div className="flex items-stretch">
          <div className="flex flex-col items-center justify-center gap-1 px-2 py-3 border-r border-gray-100 dark:border-white/5 text-gray-400">
            <button type="button" onClick={() => move(i, i - 1)} disabled={i === 0} className="w-6 h-6 inline-flex items-center justify-center rounded-md hover:text-primary hover:bg-primary/5 disabled:opacity-30 transition" aria-label="Move up">↑</button>
            <span className="cursor-grab text-base leading-none select-none" title="Drag to reorder">≡</span>
            <button type="button" onClick={() => move(i, i + 1)} disabled={i === selected.length - 1} className="w-6 h-6 inline-flex items-center justify-center rounded-md hover:text-primary hover:bg-primary/5 disabled:opacity-30 transition" aria-label="Move down">↓</button>
          </div>
          <div className="flex-1 p-4 min-w-0">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary dark:text-primary-light text-[10px] font-semibold">{i + 1}</span>
                <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">{nameOf(id)} Configuration</span>
              </div>
              <button type="button" onClick={() => removeAt(id)} className="w-6 h-6 inline-flex items-center justify-center rounded-md text-gray-400 hover:text-red-500 hover:bg-red-500/5 transition" aria-label={"Remove " + nameOf(id)}>×</button>
            </div>
            {renderFields(id)}
          </div>
        </div>
      </div>);
    if (i < selected.length - 1) {
      cards.push(<div key={"conn-" + id} className="flex justify-center py-1 text-primary/50" aria-hidden="true">
          <span className="text-xs leading-none">↓</span>
        </div>);
    }
  }
  return <div className="my-6 not-prose space-y-4">
      <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-5">
        <div className="flex items-center gap-2 mb-4">
          <span className="text-base leading-none">⚙</span>
          <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">Elements to Include</div>
          {selected.length > 0 ? <span className="ml-auto text-xs text-gray-500 dark:text-gray-400">{selected.length} selected</span> : null}
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
          {elements.map(el => {
    const active = selected.indexOf(el.id) >= 0;
    const tileCls = active ? "text-left rounded-xl border px-3 py-2.5 transition select-none border-primary/50 bg-primary/10 ring-1 ring-primary/30" : "text-left rounded-xl border px-3 py-2.5 transition select-none border-gray-200 dark:border-white/10 bg-white dark:bg-zinc-900 hover:border-gray-300 dark:hover:border-white/20";
    const nameCls = active ? "text-sm font-semibold leading-tight text-primary dark:text-primary-light" : "text-sm font-semibold leading-tight text-gray-900 dark:text-gray-100";
    const boxCls = active ? "inline-flex items-center justify-center w-4 h-4 rounded border flex-shrink-0 mt-0.5 transition bg-primary border-primary text-white text-[10px] leading-none" : "inline-flex items-center justify-center w-4 h-4 rounded border flex-shrink-0 mt-0.5 transition border-gray-300 dark:border-white/20 bg-transparent";
    return <button key={el.id} type="button" onClick={() => toggle(el.id)} className={tileCls}>
                <div className="flex items-start gap-2">
                  <span className={boxCls}>{active ? "✓" : ""}</span>
                  <div>
                    <div className={nameCls}>{el.name}</div>
                    <div className="text-[11px] text-gray-500 dark:text-gray-400 mt-0.5 leading-tight">{el.desc}</div>
                  </div>
                </div>
              </button>;
  })}
        </div>
      </div>

<div className="grid lg:grid-cols-2 gap-4 items-start">
        <div className="space-y-1">
          {selected.length === 0 ? <div className="rounded-2xl border border-dashed border-gray-300 dark:border-white/10 bg-white/40 dark:bg-zinc-900/50 p-8 text-center text-sm text-gray-500 dark:text-gray-400">
              Select one or more elements above to configure them here.
            </div> : cards}
        </div>

<div className="lg:sticky lg:top-24">
          <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-gray-900 dark:bg-black/40 overflow-hidden">
            <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/10">
              <div className="flex items-center gap-2 text-xs text-gray-400 font-mono">
                <span className="w-2 h-2 rounded-full bg-red-400/70"></span>
                <span className="w-2 h-2 rounded-full bg-yellow-400/70"></span>
                <span className="w-2 h-2 rounded-full bg-green-400/70"></span>
                <span className="ml-2">response.xml</span>
              </div>
              <button type="button" onClick={onCopy} className="text-xs px-2.5 py-1 rounded-md border border-white/10 hover:border-primary/40 hover:text-primary text-gray-300 transition">
                {copied ? "✓ Copied" : "Copy"}
              </button>
            </div>
            <pre className="text-xs leading-relaxed font-mono text-gray-100 p-4 overflow-auto whitespace-pre min-h-[280px] max-h-[520px]"><code>{xml}</code></pre>
          </div>
          <div className="text-xs text-gray-500 dark:text-gray-400 mt-3">
            Return this XML from your webhook with header{" "}
            <span className="font-mono text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-white/[0.06] px-1.5 py-0.5 rounded">Content-Type: application/xml</span>
          </div>
        </div>
      </div>
    </div>;
};

Select the verbs you need, order them with drag-and-drop or the up/down arrows, configure each one, and copy the generated XML. The output updates live. Use the visual builder to prototype a call flow quickly or to understand element nesting rules. For production apps, export the XML and serve it from your Answer URL. See the [Voice XML overview](/docs/xml/overview) for the full attribute reference.

## What XML does

Vobiz Voice XML controls the flow of a call. When a call comes in, Vobiz hits your webhook (`answer_url`) and expects an XML response describing what to do - speak text, play audio, gather digits, dial out, record, etc. See [How XML Works](/docs/xml/overview/how-it-works).

## When to use this builder

* **Prototyping** - sketch a call flow visually, then drop the XML into your webhook handler.
* **Learning the schema** - see valid attribute combinations for each element.
* **Generating boilerplate** - start from a working IVR / voicemail / dial template instead of from scratch.

## Where to put the XML

Your webhook handler returns this XML in the response body with `Content-Type: application/xml`. Example in Python (Flask):

```python theme={null}
from flask import Flask, Response

app = Flask(__name__)

@app.route("/answer", methods=["POST"])
def answer():
    xml = """<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Speak voice="WOMAN" language="en-US">Welcome to Vobiz.</Speak>
  <Hangup/>
</Response>"""
    return Response(xml, mimetype="application/xml")
```

## Related

<Columns cols={2}>
  <Card title="How XML Works" icon="book-open" href="/docs/xml/overview/how-it-works">
    The request/response flow Vobiz uses to drive call control.
  </Card>

<Card title="Getting Started with XML" icon="rocket" href="/docs/xml/overview/getting-started">
    Set up your first webhook and return your first XML response.
  </Card>

<Card title="XML Best Practices" icon="star" href="/docs/xml/overview/best-practices">
    Patterns for performance, error handling, and maintainability.
  </Card>

<Card title="The Response Element" icon="file-code" href="/docs/xml/response">
    Reference: every XML must be wrapped in `<Response>`.
  </Card>
</Columns>