Plan-a-Trip Form — Implementation Guide

Jump to How it works Sample code Customize it

What it does

Instead of a bare “Ask AI” button, this is a proper form: season, trip length, who's coming, budget, interest chips, and a free-text box. On submit, every answer is folded into one hint string and passed to showFrame(). The AI panel opens already knowing everything and starts planning immediately.

This is the canonical pattern for the whole hub — collect on your page, hand off in one call.

How it works

The form is ordinary HTML. The submit button is a plain <button type="button"> with an onclick handler — not a mindtrip-button, because your JavaScript is doing the hand-off, not the embed's click interceptor.

Build it in 3 steps

Build the form

Single-select pill groups for season / duration / group / budget, a multi-select row of interest chips (each a button with a data-vibe attribute), and a free-text <textarea>.

Read the values on submit

In the click handler, read each field and collect the selected chips into an array.

Assemble one hint and call showFrame()

Push each filled-in field onto a hintParts array, join with '. ', and pass it as hint. Skip empty fields so the AI never sees blanks.

The showFrame() call

Everything the visitor selected travels inside hint — duration, season, group, budget and interests all become labeled sentences in one string.

window.mindtrip.showFrame(null, {
  destination: 'New York City',
  prompt:      'Plan me a trip to New York City',
  hint:        'Duration: 4–5 days. Season: Summer. Traveling as: a couple. '
             + 'Budget: mid-range. Interests: Food & Drink, Nightlife. '
             + 'Notes: We love live music',
  id:          'plan-a-trip-form'
});

Parameters used here

Parameter	What it carries in this example
`destination`	The city the trip is for — sets geographic context.
`prompt`	The clean conversational opener the visitor “says”. Kept short on purpose.
`hint`	All the structured form data as labeled sentences. Silent — the visitor never sees it.
`id`	A tracking slug so analytics can attribute the conversation to this form.

💡prompt vs. hint. Think of prompt as what the visitor says out loud and hint as a sticky note you slip the AI. Keep the prompt short and natural; load the hint with structure.

Sample code

A self-contained, working version of this experience. Copy it into an .html file, change the destination and content, and it runs. The Mindtrip embed script must be on the page (shown at the top).

<!-- Required on every page: the Mindtrip embed -->
<script src="https://partner.mindtrip.ai/overlay/embed.js?orgid=your-org-id" defer></script>

<!-- ── FORM (chat-pill style) ── -->
<form onsubmit="return false">
  <!-- Single-select group: one pill active at a time -->
  <div class="field-group" data-field="when" data-single>
    <div class="field-label">When</div>
    <button type="button" class="pill selected" data-val="">Any time</button>
    <button type="button" class="pill" data-val="Spring">Spring</button>
    <button type="button" class="pill" data-val="Summer">Summer</button>
    <button type="button" class="pill" data-val="Fall">Fall</button>
    <button type="button" class="pill" data-val="Winter">Winter</button>
  </div>

  <div class="field-group" data-field="duration" data-single>
    <div class="field-label">How long</div>
    <button type="button" class="pill selected" data-val="">Any length</button>
    <button type="button" class="pill" data-val="A weekend (2–3 days)">Weekend</button>
    <button type="button" class="pill" data-val="4–5 days">4–5 days</button>
    <button type="button" class="pill" data-val="A week">A week</button>
  </div>

  <div class="field-group" data-field="who" data-single>
    <div class="field-label">Who's going</div>
    <button type="button" class="pill selected" data-val="">Anyone</button>
    <button type="button" class="pill" data-val="Solo">Solo</button>
    <button type="button" class="pill" data-val="a couple">Couple</button>
    <button type="button" class="pill" data-val="a family with kids">Family</button>
  </div>

  <div class="field-group" data-field="budget" data-single>
    <div class="field-label">Budget</div>
    <button type="button" class="pill selected" data-val="">Any budget</button>
    <button type="button" class="pill" data-val="budget">Budget</button>
    <button type="button" class="pill" data-val="mid-range">Mid-range</button>
    <button type="button" class="pill" data-val="luxury">Luxury</button>
  </div>

  <!-- Interest chips: multi-select, each toggles a .selected class -->
  <div class="field-group" data-field="vibes">
    <div class="field-label">Interests</div>
    <button type="button" class="pill" data-vibe="Food & Drink">🍕 Food & Drink</button>
    <button type="button" class="pill" data-vibe="Art & Museums">🎨 Art & Museums</button>
    <button type="button" class="pill" data-vibe="Nightlife">🎷 Nightlife</button>
    <button type="button" class="pill" data-vibe="Outdoors">🌳 Outdoors</button>
  </div>

  <textarea id="field-extra" placeholder="Anything to add?"></textarea>

  <!-- Plain button — NOT a mindtrip-button -->
  <button type="button" onclick="launchPlanner()">Start Planning →</button>
</form>

<script>
  // Pill selection: single-select groups keep one active; interests toggle freely
  document.querySelectorAll('.field-group').forEach(group => {
    const single = group.hasAttribute('data-single');
    group.addEventListener('click', e => {
      const b = e.target.closest('.pill'); if (!b) return;
      if (single) {
        const was = b.classList.contains('selected');
        group.querySelectorAll('.pill').forEach(p => p.classList.remove('selected'));
        if (!was) b.classList.add('selected');
      } else {
        b.classList.toggle('selected');
      }
    });
  });

  // value of the selected pill in a single-select group
  const pick = field => {
    const b = document.querySelector(`.field-group[data-field="${field}"] .pill.selected`);
    return b ? b.dataset.val : '';
  };

  function launchPlanner() {
    const when     = pick('when');
    const duration = pick('duration');
    const who      = pick('who');
    const budget   = pick('budget');
    const extra    = document.getElementById('field-extra').value.trim();
    const vibes    = Array.from(document.querySelectorAll('.field-group[data-field="vibes"] .pill.selected'))
                          .map(b => b.dataset.vibe);

    // Fold EVERYTHING into one hint string (skip empty fields)
    const hintParts = [];
    if (duration)     hintParts.push(`Duration: ${duration}`);
    if (when)         hintParts.push(`Season: ${when}`);
    if (who)          hintParts.push(`Traveling as: ${who}`);
    if (budget)       hintParts.push(`Budget: ${budget}`);
    if (vibes.length) hintParts.push(`Interests: ${vibes.join(', ')}`);
    if (extra)        hintParts.push(`Notes: ${extra}`);

    window.mindtrip.showFrame(null, {
      destination: 'New York City',
      prompt:      'Plan me a trip to New York City',
      hint:        hintParts.join('. '),
      id:          'plan-a-trip-form'
    });
  }
</script>

Customize it for your destination

Change the destination

Update the two obvious lines — destination and prompt — to your city.

Add or remove fields

Any new field just needs to be read in launchPlanner() and pushed onto hintParts behind an if guard, so blank answers are skipped automatically.

⚠️Don't add class="mindtrip-button" to the submit button. This form uses the JS API; that class would let the embed intercept the click before your handler runs.

Mindtrip for Business Labs — Plan-a-Trip Form Questions? Contact your Mindtrip account team.

🗽Plan-a-Trip Form

What it does

How it works

Build it in 3 steps

Build the form

Read the values on submit

Assemble one hint and call showFrame()

The showFrame() call

Parameters used here

Sample code

Customize it for your destination

Change the destination

Add or remove fields