Embed Options

TourKit offers multiple ways to embed and display your tours on websites, in apps, and across platforms.

Embed Methods

Inline Embed

Display the tour directly in your page:

<div id="tourkit-container"></div>
<script src="https://tourkit.software/embed.js"></script>
<script>
  TourKit.embed({
    tourId: 'YOUR_TOUR_ID',
    container: '#tourkit-container'
  });
</script>

Modal Embed

Open the tour in a modal overlay:

<button onclick="TourKit.openModal('YOUR_TOUR_ID')">
  Watch Tour
</button>
<script src="https://tourkit.software/embed.js"></script>

Iframe

Simple iframe embedding:

<iframe
  src="https://tourkit.software/embed/YOUR_TOUR_ID"
  width="800"
  height="600"
  frameborder="0"
/>

Configuration Options

Appearance

TourKit.embed({
  tourId: 'YOUR_TOUR_ID',
  container: '#container',
  theme: 'light', // or 'dark'
  showProgress: true,
  showNavigation: true,
  showBranding: false // paid plans only
});

Behavior

TourKit.embed({
  tourId: 'YOUR_TOUR_ID',
  container: '#container',
  autoplay: false,
  loop: false,
  startStep: 0,
  onComplete: () => console.log('Tour finished!')
});

Responsive

TourKit.embed({
  tourId: 'YOUR_TOUR_ID',
  container: '#container',
  responsive: true,
  maxWidth: '100%',
  aspectRatio: '16:9'
});

Events & Callbacks

Available Events

TourKit.embed({
  tourId: 'YOUR_TOUR_ID',
  container: '#container',
  onReady: () => console.log('Ready'),
  onStart: () => console.log('Started'),
  onStepChange: (step) => console.log('Step:', step),
  onComplete: () => console.log('Complete'),
  onError: (err) => console.error(err)
});

JavaScript API

Control the tour programmatically:

const tour = TourKit.embed({...});

// Navigation
tour.next();
tour.previous();
tour.goToStep(3);

// Playback
tour.play();
tour.pause();
tour.restart();

// State
tour.getCurrentStep();
tour.isPlaying();
tour.destroy();

Platform Integration

React

import { TourKitEmbed } from '@tourkit/react';

function App() {
  return (
    <TourKitEmbed
      tourId="YOUR_TOUR_ID"
      onComplete={() => console.log('Done!')}
    />
  );
}

Vue

<template>
  <TourKitEmbed
    :tour-id="tourId"
    @complete="onComplete"
  />
</template>

<script setup>
import { TourKitEmbed } from '@tourkit/vue';
</script>

WordPress

Use our WordPress plugin or paste the iframe code into any page/post.

Styling

Custom CSS

Override default styles:

.tourkit-container {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.tourkit-tooltip {
  font-family: 'Your Font', sans-serif;
}

Theming

Create consistent branding across embeds:

TourKit.setTheme({
  primaryColor: '#10B981',
  fontFamily: 'Inter, sans-serif',
  borderRadius: '8px'
});

Security

Domain Restrictions

Limit where embeds can appear:

1. Go to tour settings
2. Add allowed domains
3. Save

Content Security Policy

If using CSP, add TourKit to your policy:

frame-src https://tourkit.software;
script-src https://tourkit.software;

Troubleshooting

Tour not loading?

• Check the tour ID is correct
• Verify the tour is published
• Check domain restrictions
• Look for console errors

Styling issues?

• Check for CSS conflicts
• Use the iframe method for isolation
• Try the responsive option