📍Guess the Spot

What it does

Three rounds: a photo, four guesses, a score. What makes this one special is the reveal — “Explore it in Mindtrip” opens the actual place entity via the path parameter (a deep link), while “Ask AI about it” fires a normal prompt. It demonstrates two different showFrame modes side by side.

How it works

Each round carries the correct answer, a Mindtrip entity path, and an ask prompt. After a guess, the reveal wires both buttons.

Build it in 3 steps

The showFrame() call

Two modes from one game. Deep-link straight to a place with path; or open a conversation with prompt.

// Deep-link into the real place entity (no chat — opens the place page)
window.mindtrip.showFrame(null, { path: round.entity, id: 'geoguesser-explore-r1' });

// Or start a conversation about it
window.mindtrip.showFrame(null, {
  destination: 'New York City',
  prompt: round.ask,   // "Tell me the best things to do in Central Park most tourists miss..."
  id: 'geoguesser-ask-r1'
});

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="photo-frame"><img id="photo" alt="Mystery location"></div>
<div id="choices"></div>
<div id="reveal" style="display:none">
  <p id="verdict"></p>
  <button id="btn-explore">Explore it in Mindtrip</button>
  <button id="btn-ask">Ask AI about it</button>
</div>

<script>
  const rounds = [
    {
      img: 'https://images.unsplash.com/photo-1568515387631-8b650bbcdb90?w=1200',
      answer: 'Central Park',
      options: ['Prospect Park', 'Central Park', 'Bryant Park', 'Washington Square'],
      entity: '/location/new-york/united-states/at-5tEaBpEE',   // Mindtrip place path
      ask: 'Tell me the best things to do in Central Park that most tourists miss.'
    }
  ];

  let round = 0;

  function load() {
    const r = rounds[round];
    document.getElementById('photo').src = r.img;
    const box = document.getElementById('choices');
    box.innerHTML = '';
    r.options.forEach(opt => {
      const b = document.createElement('button');
      b.textContent = opt;
      b.onclick = () => guess(opt);
      box.appendChild(b);
    });
  }

  function guess(opt) {
    const r = rounds[round];
    document.getElementById('verdict').textContent =
      opt === r.answer ? '✅ Nailed it — ' + r.answer : '❌ It\'s ' + r.answer;
    document.getElementById('reveal').style.display = 'block';

    // Deep-link into the real place entity
    document.getElementById('btn-explore').onclick = () =>
      window.mindtrip.showFrame(null, { path: r.entity, id: 'geoguesser-explore-r' + (round + 1) });

    // Or ask the AI about it
    document.getElementById('btn-ask').onclick = () =>
      window.mindtrip.showFrame(null, {
        destination: 'New York City',
        prompt: r.ask,
        id: 'geoguesser-ask-r' + (round + 1)
      });
  }

  load();
</script>

Customize it for your destination

Use your own places

Each round needs a photo, the answer, an entity path, and an ask prompt. Get the entity paths from your Mindtrip account team for the places you want to feature.