01 — How it works

The Mindtrip Partner Embed adds a slide-out AI travel assistant to any page on your site. Visitors can chat with it to get recommendations, build itineraries, and search flights — all without leaving your site.

You control what the AI opens, what question it asks, and where it navigates. Everything is triggered by ordinary HTML elements (links, buttons, forms) decorated with special Mindtrip classes or attributes.

🔗 Open a place or guide

Deep-link to a specific attraction, restaurant, neighborhood, or curated guide inside Mindtrip.

💬 Send an AI prompt

Pre-fill the chat with a question so the AI is already answering when the panel opens.

🗺️ Navigate to a page

Open a specific Mindtrip section — flights, a trip builder, or an inspiration guide.

📋 Trip planning form

Collect traveler preferences on your site and pass them to the AI via the JavaScript API.

02 — Add the embed script

Paste this single <script> tag into the <head> of every page where you want the assistant to appear. Replace your-org-id with the ID Mindtrip provides.

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

✅ The defer attribute is required. It tells the browser to load the script after the page HTML is parsed, which prevents the embed from blocking page render.

ℹ️ One script tag covers all four patterns below. You don't need to add anything else globally — each button or link just needs the right class or attribute.

Google Tag Manager

If your site uses GTM, add it at the very top of <head> before the Mindtrip script. Mindtrip fires standard events that GTM can pick up automatically.

<!-- GTM snippet (top of <head>) -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

03 — Pattern 1: AI chat button

The most common pattern. Clicking the button opens the slide-out panel with a pre-filled AI question. Use this on attraction pages, blog articles, or anywhere you want to invite a conversation.

Required pieces

A <form> with class="mindtrip-form"
A hidden <input> with class="mindtrip-prompt" — this is the question
A <button> with class="mindtrip-button"

<!-- Minimal example -->
<form class="mindtrip-form">
  <input type="hidden"
         class="mindtrip-prompt"
         value="What's the best time of year to visit New York City?">
  <button class="mindtrip-button">Ask AI</button>
</form>

⚠️ The button must have class="mindtrip-button". The embed script intercepts clicks on this class. Without it, clicking the button does nothing. You can combine it with your own CSS classes: class="mindtrip-button btn btn-primary".

Real example — Times Square attraction card

On the Things To Do page, each attraction has an "Ask AI" button pre-loaded with a relevant question about that specific place.

<!-- From things-to-do.html — Times Square Ask AI -->
<form class="mindtrip-form">
  <input type="hidden"
         class="mindtrip-prompt"
         value="What's worth knowing about Times Square — best time to visit,
                what to do there, and what to skip?">
  <button id="place-times-square-ask"
          class="mindtrip-button btn-outline btn-sm">
    Ask AI
  </button>
</form>

Real example — Flights search

For a text area where the visitor types their own query, swap the hidden <input> for a visible <textarea>. The embed reads whatever the visitor typed.

<!-- From flights.html — free-text flight search -->
<form class="mindtrip-form">
  <textarea class="mindtrip-prompt"
             placeholder="Flying from London in late October, open to JFK or Newark…"
             rows="4"></textarea>
  <button class="mindtrip-button">Search Flights</button>
</form>

💡 Write the prompt the way a real traveler would say it — casual and specific beats formal and generic. "What's the best pizza in Brooklyn?" outperforms "Please provide restaurant recommendations for the Brooklyn borough of New York City."

04 — Pattern 2: Open a place or guide

Use an inline hash link to deep-link directly to a specific attraction, restaurant, neighborhood, or curated guide. This opens the Mindtrip panel to that entity's detail page — no chat, no prompt, just the place.

Syntax

<a href="#mindtrip.ai/location/city/country/entity-id?id=tracking-id">
  Place name
</a>

Example — linking a place name in body text

<!-- From blog.html — clickable place names in article body -->
<a href="#mindtrip.ai/location/new-york/united-states/at-GhbwGq3N?id=blog-place-met"
   class="place-link">
  The Metropolitan Museum of Art
</a>

Example — linking an inspiration guide (itinerary)

<!-- From itineraries.html — View Guide button -->
<a href="#mindtrip.ai/inspiration/trip-new-york-city-april-2026/in-7KKgM5g1?id=guide-apr-view"
   class="mindtrip-button btn-sm">
  View Guide
</a>

ℹ️ Entity IDs are provided by Mindtrip and look like at-GhbwGq3N (attraction), re-XXXXXX (restaurant), or lo-XXXXXX (neighborhood). See Section 07 for the full breakdown.

⚠️ Do not use this pattern for navigation. The hash link is specifically for opening a place entity or guide detail page. To navigate to a Mindtrip section (like flights or a trip builder), use Pattern 3 below.

05 — Pattern 3: Navigate to a Mindtrip page

Use a mindtrip-path input inside a form to navigate the slide-out panel to a specific Mindtrip internal route — for example, the flights page, a trip builder, or a specific inspiration guide.

Syntax

<form class="mindtrip-form">
  <input type="hidden"
         class="mindtrip-path"
         value="/internal/path/here">
  <button class="mindtrip-button">Open</button>
</form>

Common paths

Destination	Path value
New trip builder	`/chat/new/trip`
A specific inspiration guide	`/inspiration/guide-slug/in-XXXXXXXX`
A specific city guide	`/inspiration/city-guide-new-york-city-new-york/in-b3EoCdla`

⚠️ Do not add a mindtrip-path to the flights page. The flights embed handles its own routing. Adding a path input there causes an error in the slide-out panel. Use only mindtrip-prompt + mindtrip-button on flight search forms.

Real example — View Guide button

<!-- From itineraries.html — opens the guide directly -->
<form class="mindtrip-form">
  <input type="hidden"
         class="mindtrip-path"
         value="/inspiration/city-guide-new-york-city-new-york/in-b3EoCdla">
  <button id="itinerary-featured-view"
          class="mindtrip-button btn-lg">View This Guide</button>
</form>

<!-- Separate form — customize/plan from the same guide -->
<form class="mindtrip-form">
  <input type="hidden"
         class="mindtrip-prompt"
         value="I want to plan a New York City trip based on the City Guide: New York
                City, New York itinerary. Help me customize it for my travel style,
                dates, and preferences.">
  <button id="itinerary-featured-customize"
          class="mindtrip-button btn-outline btn-lg">Plan from This Guide</button>
</form>

💡 When a guide has two actions — "View" and "Customize" — always put them in separate forms. A single form can only carry one action (either a path or a prompt, not both).

06 — Pattern 4: Trip planning form

The most powerful pattern. Build a form on your site that collects traveler preferences — dates, group type, budget, interests — then call the Mindtrip JavaScript API to open the panel with all that context already loaded.

This uses window.mindtrip.showFrame() directly, giving you full control over what the AI receives.

The showFrame() call

window.mindtrip.showFrame(event, {
  destination: 'New York City',       // Sets the destination context
  prompt:      'Plan me a trip to New York City', // The visible opener
  hint:        'Duration: 5 days. Season: Summer. Traveling as: Couple. ' +
               'Budget: mid-range. Interests: food, art, nightlife.',
                                                // ↑ ALL structured data goes here
  id:          'plan-a-trip-form'          // Tracking ID
});

Parameter reference

Parameter	Type	Description
`destination`	string	The destination city or region name.
`prompt`	string	The clean, conversational opening message the AI responds to. Keep this simple — it's what the visitor effectively "says."
`hint`	string	Background context the AI receives silently. Put all your structured form data here as labeled sentences — duration, season, group type, budget, interests, and notes. The visitor doesn't see this. (Best practice: fold everything into this one string rather than passing separate parameters.)
`id`	string	A unique tracking ID for analytics. Use a descriptive slug: `homepage-hero-btn`, `plan-a-trip-form`.

Complete example — NYC trip planning form

This is the full implementation from plan-a-trip.html. Copy and adapt it for your destination.

<!-- 1. The form collects traveler preferences -->
<form onsubmit="return false">

  <!-- When? -->
  <select id="field-when">
    <option value="">When are you going?</option>
    <option value="Spring">Spring</option>
    <option value="Summer">Summer</option>
    <option value="Fall">Fall</option>
    <option value="Winter">Winter</option>
  </select>

  <!-- How long? -->
  <select id="field-duration">
    <option value="">How long?</option>
    <option value="A weekend (2–3 days)">Weekend</option>
    <option value="4–5 days">4–5 days</option>
    <option value="A week">A week</option>
    <option value="10+ days">10+ days</option>
  </select>

  <!-- Vibe chips — each button toggles a .selected class -->
  <div class="vibe-chips">
    <button type="button" class="vibe-btn" data-vibe="food">🍕 Food & Drink</button>
    <button type="button" class="vibe-btn" data-vibe="art">🎨 Art & Museums</button>
    <button type="button" class="vibe-btn" data-vibe="nightlife">🎷 Nightlife</button>
    <button type="button" class="vibe-btn" data-vibe="outdoors">🌳 Parks & Outdoors</button>
    <button type="button" class="vibe-btn" data-vibe="shopping">🛍️ Shopping</button>
  </div>

  <!-- Free text -->
  <textarea id="field-extra"
             placeholder="Anything to add? e.g. We love walking, staying in Brooklyn…"
  ></textarea>

  <!-- Submit — plain button, no mindtrip-button class needed here -->
  <button type="button" onclick="launchPlanner()">
    Start Planning →
  </button>

</form>

<!-- 2. The JavaScript reads the form and opens the panel -->
<script>
  // Vibe chip toggle
  document.querySelectorAll('.vibe-btn').forEach(btn => {
    btn.addEventListener('click', () => btn.classList.toggle('selected'));
  });

  function launchPlanner() {
    const when     = document.getElementById('field-when').value;
    const duration = document.getElementById('field-duration').value;
    const extra    = document.getElementById('field-extra').value.trim();
    const vibes    = Array.from(document.querySelectorAll('.vibe-btn.selected'))
                          .map(b => b.dataset.vibe);

    // Build the silent hint from ALL structured form data — including interests
    const hintParts = [];
    if (duration)     hintParts.push(`Duration: ${duration}`);
    if (when)         hintParts.push(`Season: ${when}`);
    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>

💡 prompt vs. hint — Think of prompt as what the visitor "says" and hint as a sticky note you hand the AI behind the scenes. Keep prompt short and natural. Load hint with all the structured context (duration, season, group size, extra notes). This keeps the conversation opening clean while ensuring the AI has everything it needs.

07 — Entity IDs explained

Every place in Mindtrip — attraction, restaurant, neighborhood, guide — has a unique entity ID. You need these IDs to build inline hash links (Pattern 2). Mindtrip provides them; you don't generate them yourself.

Type	ID prefix	Example	Used for
Attraction / landmark	`at-`	`at-GhbwGq3N`	The Met, Central Park, High Line, Brooklyn Bridge
Restaurant / bar	`re-`	`re-4WElfDso`	Specific restaurant pages
Neighborhood	`lo-`	`lo-oXvFk79O`	SoHo, Williamsburg, Harlem
Inspiration guide	`in-`	`in-7KKgM5g1`	Curated itineraries and city guides

NYC reference — entity IDs used on this site

Place	Entity ID
The Metropolitan Museum of Art	`at-GhbwGq3N`
Central Park	`at-5tEaBpEE`
The High Line	`at-i2iexvzk`
Brooklyn Bridge	`at-XXXXXXXX`
Williamsburg Bridge	`at-OMpilkb2`
One World Observatory	`at-GBzFvTDW`
Times Square	`at-Gbg5HGPC`
Chelsea Market	`at-A0fHUTfE`
Di Fara Pizza	`re-4WElfDso`
Peter Luger Steakhouse	`re-XXXXXXXX`
SoHo neighborhood	`lo-oXvFk79O`
Williamsburg neighborhood	`lo-IKbQxEHk`
Harlem neighborhood	`lo-q0YzPRAa`
City Guide: New York City	`in-b3EoCdla`
Trip to NYC — April 2026	`in-7KKgM5g1`
Trip to NYC — December 2026	`in-RIy5GN3V`
NYC Highlights guide	`in-ZOUDz0af`
10 Day Deep Dive guide	`in-VctdSPgA`

ℹ️ Contact your Mindtrip account team to get entity IDs for places on your destination site. IDs marked XXXXXXXX above are placeholders to be filled in.

08 — Tracking & analytics

Every button and link should carry a unique id attribute (for forms) or ?id= query parameter (for inline links). Mindtrip uses these to report which CTAs drive the most engagement.

Naming convention

Use lowercase kebab-case. Start with the page, then the element, optionally the action:

page-element-action

✓ homepage-hero-plan-trip
✓ things-to-do-central-park-ask
✓ itineraries-city-guide-view
✓ blog-place-brooklyn-bridge
✓ flights-main-search
✗ btn1
✗ test
✗ click-here

Form buttons — use id attribute

<button id="things-to-do-central-park-ask"
        class="mindtrip-button btn-sm">Ask AI</button>

Inline links — use ?id= query param

<a href="#mindtrip.ai/location/new-york/united-states/at-5tEaBpEE?id=blog-place-central-park">
  Central Park
</a>

09 — Common mistakes

Mistake	What happens	Fix
Button missing `class="mindtrip-button"`	Clicking the button does nothing. The embed never sees it.	Add `mindtrip-button` to the button's class list.
Two actions in one form (both `mindtrip-path` and `mindtrip-prompt`)	Unpredictable — one overrides the other.	Split into two separate `<form>` elements, each with its own button.
`mindtrip-path` on the flights page	Non-fatal error appears in the slide-out panel.	Remove the path input. Flights handles its own routing automatically.
Using a hash link (`#mindtrip.ai/...`) to navigate to a guide instead of `mindtrip-path`	The guide opens but as an "Open Media Link" — the AI treats the URL as context to read, not a destination to navigate to.	Use `mindtrip-path` inside a form for guide navigation. Reserve hash links for opening entity detail pages.
Calling `showFrame()` before the embed has loaded	`window.mindtrip is undefined` error.	The embed loads via `defer`, so it's ready by the time any user interaction fires. If you call it programmatically on load, wrap in `setTimeout` or wait for a `mindtrip:ready` event.
Omitting the `defer` attribute on the script tag	Script blocks page render; slower perceived load time.	Always use `<script src="..." defer></script>`.

10 — Complete page example

A minimal but fully functional page showing all four patterns together. Adapt the content, styles, and IDs for your destination.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Visit My Destination</title>

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

  <!-- ── PATTERN 1: Chat button with pre-filled question ── -->
  <section>
    <h2>Plan your trip</h2>
    <form class="mindtrip-form">
      <input type="hidden" class="mindtrip-prompt"
             value="Help me plan a trip to New York City.">
      <button id="homepage-hero-plan" class="mindtrip-button">
        Start Planning
      </button>
    </form>
  </section>

  <!-- ── PATTERN 2: Inline place link ── -->
  <p>
    Don't miss
    <a href="#mindtrip.ai/location/new-york/united-states/at-5tEaBpEE?id=article-central-park">
      Central Park
    </a>
    on a sunny afternoon.
  </p>

  <!-- ── PATTERN 3: Navigate to an itinerary guide ── -->
  <section>
    <h3>Featured Guide</h3>
    <form class="mindtrip-form">
      <input type="hidden" class="mindtrip-path"
             value="/inspiration/city-guide-new-york-city-new-york/in-b3EoCdla">
      <button id="itinerary-city-guide-view" class="mindtrip-button">
        View Guide
      </button>
    </form>
  </section>

  <!-- ── PATTERN 4: Trip planning form via JS API ── -->
  <section>
    <h3>Build your itinerary</h3>

    <select id="field-duration">
      <option value="">How long?</option>
      <option value="A weekend">Weekend</option>
      <option value="4–5 days">4–5 days</option>
      <option value="A week">A week</option>
    </select>

    <button type="button" onclick="launchPlanner()">Start Planning</button>
  </section>

  <script>
    function launchPlanner() {
      const duration = document.getElementById('field-duration').value;

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

</body>
</html>

Mindtrip Embed
Implementation Guide

Contents

01 — How it works

🔗 Open a place or guide

💬 Send an AI prompt

🗺️ Navigate to a page

📋 Trip planning form

02 — Add the embed script

Google Tag Manager

03 — Pattern 1: AI chat button

Required pieces

Real example — Times Square attraction card

Real example — Flights search

04 — Pattern 2: Open a place or guide

Syntax

Example — linking a place name in body text

Example — linking an inspiration guide (itinerary)

05 — Pattern 3: Navigate to a Mindtrip page

Syntax

Common paths

Real example — View Guide button

06 — Pattern 4: Trip planning form

The showFrame() call

Parameter reference

Complete example — NYC trip planning form

07 — Entity IDs explained

NYC reference — entity IDs used on this site

08 — Tracking & analytics

Naming convention

Form buttons — use id attribute

Inline links — use ?id= query param

09 — Common mistakes

10 — Complete page example

Mindtrip EmbedImplementation Guide

Contents

01 — How it works

🔗 Open a place or guide

💬 Send an AI prompt

🗺️ Navigate to a page

📋 Trip planning form

02 — Add the embed script

Google Tag Manager

03 — Pattern 1: AI chat button

Required pieces

Real example — Times Square attraction card

Real example — Flights search

04 — Pattern 2: Open a place or guide

Syntax

Example — linking a place name in body text

Example — linking an inspiration guide (itinerary)

05 — Pattern 3: Navigate to a Mindtrip page

Syntax

Common paths

Real example — View Guide button

06 — Pattern 4: Trip planning form

The showFrame() call

Parameter reference

Complete example — NYC trip planning form

07 — Entity IDs explained

NYC reference — entity IDs used on this site

08 — Tracking & analytics

Naming convention

Form buttons — use id attribute

Inline links — use ?id= query param

09 — Common mistakes

10 — Complete page example

Mindtrip Embed
Implementation Guide