⚖️Settle the Debate

What it does

A set of head-to-head debates (fold vs. fork, JFK vs. Newark). The visitor votes, sees a running tally animate in, and can hit “Let the AI settle it.” That fires a debate-specific prompt; the visitor's vote rides along in the hint so the AI can agree or playfully overrule them.

This shows the embed as more than a trip planner — it's a conversational endpoint that's inherently shareable.

How it works

Each debate carries its own settle-prompt. Voting reveals the tally and wires the settle button to showFrame() with that prompt plus the chosen side.

Build it in 3 steps

The showFrame() call

The debate's own prompt asks for a verdict; the hint carries which side the visitor picked.

window.mindtrip.showFrame(null, {
  destination: 'New York City',
  prompt: bout.prompt,   // e.g. "Settle the great NYC pizza debate: fold or fork? ..."
  hint:   `The visitor voted for "${chosen}" in this debate. Feel free to agree or lovingly overrule them.`,
  id: 'nyc-debate-bout-1'
});

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="arena"></div>

<script>
  const bouts = [
    {
      q: 'How do you eat a New York slice?',
      a: 'Fold it', b: 'Fork & knife',
      prompt: 'Settle the great NYC pizza debate: fold your slice or use a fork and knife? '
            + 'Give a definitive verdict, then name the 3 best slice joints to test it.'
    },
    {
      q: 'Flying into NYC — which airport?',
      a: 'JFK', b: 'Newark',
      prompt: 'Settle the NYC airport debate: JFK or Newark? Compare price, transit time, '
            + 'and misery level, and give a final verdict.'
    }
  ];

  const arena = document.getElementById('arena');
  bouts.forEach((bout, i) => {
    const div = document.createElement('div');
    div.innerHTML = `<h3>${bout.q}</h3>
      <button data-side="a">${bout.a}</button>
      <button data-side="b">${bout.b}</button>
      <button class="settle" style="display:none">⚖️ Let the AI settle it</button>`;
    div.querySelectorAll('[data-side]').forEach(btn =>
      btn.addEventListener('click', () => vote(i, btn.dataset.side, div)));
    arena.appendChild(div);
  });

  function vote(i, side, div) {
    const bout = bouts[i];
    const chosen = side === 'a' ? bout.a : bout.b;
    const settle = div.querySelector('.settle');
    settle.style.display = 'inline-block';   // reveal after voting
    settle.onclick = () => {
      window.mindtrip.showFrame(null, {
        destination: 'New York City',
        prompt: bout.prompt,
        hint: `The visitor voted for "${chosen}" in this debate. `
            + `Feel free to agree or lovingly overrule them.`,
        id: 'nyc-debate-bout-' + (i + 1)
      });
    };
  }
</script>

Customize it for your destination

Write your own debates

Add objects to bouts. The most important field is prompt — make it explicitly ask for a verdict and concrete recommendations, so the answer is useful, not just an opinion.

Add a real tally

Seed each side with a starting percentage and animate a bar on vote. It's purely cosmetic — the Mindtrip hand-off is the settle button.