💚Neighborhood Matchmaker

What it does

A stack of neighborhood cards. Swipe right (or tap ♥) to like, left (or tap ✕) to pass. When the deck is empty, the liked neighborhoods drive the hand-off: they go into the prompt (“plan around Williamsburg and the West Village”) and the full like/pass record goes into the hint.

How it works

The swipe animation is just presentation. The only state that matters for Mindtrip is the liked array. Everything the AI needs is derived from it at the end.

Build it in 3 steps

The showFrame() call

The liked neighborhoods shape the prompt; the complete like/pass record and derived vibes go into the hint as one string.

window.mindtrip.showFrame(null, {
  destination: 'New York City',
  prompt: `I love the vibe of ${liked.join(' and ')} — plan me a NYC trip based around those neighborhoods.`,
  hint:   `Liked neighborhoods: ${liked.join(', ')}. `
        + `Disliked or skipped: ${skipped.join(', ')}. `
        + `Vibes they gravitate toward: ${vibes.join(', ')}`,
  id: 'nyc-swipe-result'
});

Parameters used here

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>

<div id="deck"></div>
<div class="controls">
  <button onclick="swipe(false)">✕ Pass</button>
  <button onclick="swipe(true)">♥ Like</button>
</div>
<div id="result" style="display:none">
  <h2 id="result-title"></h2>
  <button onclick="plan()">Plan My Trip →</button>
</div>

<script>
  const neighborhoods = [
    { name: 'Williamsburg',    vibe: 'nightlife' },
    { name: 'The West Village',vibe: 'romance'   },
    { name: 'Harlem',          vibe: 'music'     },
    { name: 'SoHo',            vibe: 'shopping'  },
    { name: 'Chelsea',         vibe: 'art'       }
  ];

  let current = 0;
  let liked = [];

  function render() {
    const n = neighborhoods[current];
    document.getElementById('deck').textContent = n ? n.name : '';
  }

  function swipe(isLike) {
    const n = neighborhoods[current];
    if (!n) return;
    if (isLike) liked.push(n.name);
    current++;
    if (current >= neighborhoods.length) showResult();
    else render();
  }

  function showResult() {
    document.getElementById('deck').style.display = 'none';
    document.getElementById('result').style.display = 'block';
    document.getElementById('result-title').textContent =
      liked.length ? 'Your NYC is ' + liked.join(', ') : 'Let\'s find your fit';
  }

  function plan() {
    const skipped = neighborhoods.map(n => n.name).filter(n => !liked.includes(n));
    const vibes   = [...new Set(liked.map(name =>
      neighborhoods.find(n => n.name === name).vibe))];

    const hintParts = [];
    if (liked.length) {
      hintParts.push(`Liked neighborhoods: ${liked.join(', ')}`);
      hintParts.push(`Disliked or skipped: ${skipped.join(', ')}`);
      if (vibes.length) hintParts.push(`Vibes they gravitate toward: ${vibes.join(', ')}`);
    } else {
      hintParts.push('Visitor was very selective — help them find their fit');
    }

    window.mindtrip.showFrame(null, {
      destination: 'New York City',
      prompt: liked.length
        ? `I love the vibe of ${liked.join(' and ')} — plan me a NYC trip based around those neighborhoods.`
        : 'Help me find the perfect New York City neighborhood for my travel style.',
      hint: hintParts.join('. '),
      id: 'nyc-swipe-result'
    });
  }

  render();
</script>

Customize it for your destination

Swap the content

Replace the neighborhoods array with your own places and vibe tags. Everything downstream is derived from that array.

Add real swipe gestures

The sample uses Pass/Like buttons for clarity. To add drag-to-swipe, attach pointerdown/move/up listeners to the top card and call swipe(true/false) past a horizontal threshold — the Mindtrip hand-off is unchanged.