🎰Experience Roulette

What it does

Three reels — where, vibe, experience — spin and stop on a random combination like “Late-Night Live Music in Chelsea.” The novelty does the engagement work; the CTA passes the winning combo to the AI as a prompt, with a hint reminding the AI this came from a game.

How it works

Each reel is an array. “Spinning” is just picking a random index per reel and animating to it. The three chosen values are all you need for the hand-off.

Build it in 3 steps

The showFrame() call

The three landed values become one natural-language prompt; the hint tells the AI the context so it plays along.

window.mindtrip.showFrame(null, {
  destination: 'New York City',
  prompt: `I spun the NYC roulette and landed on ${vibe} ${what} in ${where} — let's plan that trip.`,
  hint:   `The visitor used the NYC roulette and landed on: ${vibe} ${what} in ${where}. `
        + `Build an NYC trip centred on this experience.`,
  id: 'nyc-roulette-cta'
});

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 class="reels">
  <div id="reel-0">?</div>
  <div id="reel-1">?</div>
  <div id="reel-2">?</div>
</div>
<button onclick="spin()">🎰 Spin</button>
<div id="result" style="display:none">
  <p id="result-text"></p>
  <button onclick="plan()">Plan This Trip →</button>
</div>

<script>
  const reels = [
    ['Williamsburg', 'The West Village', 'Harlem', 'SoHo', 'Chelsea'],   // where
    ['Foodie', 'Cultural', 'Romantic', 'Late-Night'],                    // vibe
    ['Brunch Run', 'Gallery Crawl', 'Rooftop Night', 'Live Music Night'] // experience
  ];
  let results = [0, 0, 0];

  function spin() {
    results = reels.map(r => Math.floor(Math.random() * r.length));
    reels.forEach((r, i) => document.getElementById('reel-' + i).textContent = r[results[i]]);
    const where = reels[0][results[0]],
          vibe  = reels[1][results[1]],
          what  = reels[2][results[2]];
    document.getElementById('result-text').textContent = `${vibe} ${what} in ${where}`;
    document.getElementById('result').style.display = 'block';
  }

  function plan() {
    const where = reels[0][results[0]],
          vibe  = reels[1][results[1]],
          what  = reels[2][results[2]];
    window.mindtrip.showFrame(null, {
      destination: 'New York City',
      prompt: `I spun the NYC roulette and landed on ${vibe} ${what} in ${where} — let's plan that trip.`,
      hint:   `The visitor used the NYC roulette and landed on: ${vibe} ${what} in ${where}. `
            + `Build an NYC trip centred on this experience.`,
      id: 'nyc-roulette-cta'
    });
  }
</script>

Customize it for your destination

Change the reels

Edit the three arrays. Any combination stays grammatical if you keep the pattern vibe + experience + “in” + where.

Add the spinning animation

The sample sets the result instantly. For the slot-machine feel, render a tall strip per reel and animate translateY so it eases to the chosen index — the hand-off code doesn't change.