React.js

Load the script once at the app shell — avoid injecting duplicates on every route change.

1. Add to index.html or use useEffect

Prefer adding the snippet to public/index.html (CRA/Vite) so it loads before your bundle. Alternatively, append the script once from a root component.

Option A — Add to public/index.html

<!-- In public/index.html, paste before </body> -->

<script
  src="https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit@sdk-v11/sdk/dist/tourkit.min.js"
  data-key="YOUR_SCRIPT_KEY"
  data-api="https://tourkit-phi.vercel.app"
  async>
</script>

Option B — Load dynamically in useEffect

const TOURKIT_SCRIPT_ID = 'tourkit-sdk'
const TOURKIT_SRC = 'https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit@sdk-v11/sdk/dist/tourkit.min.js'

useEffect(() => {
  if (document.getElementById(TOURKIT_SCRIPT_ID)) return
  const script = document.createElement('script')
  script.id = TOURKIT_SCRIPT_ID
  script.src = TOURKIT_SRC
  script.setAttribute('data-key', 'YOUR_SCRIPT_KEY')
  script.setAttribute('data-api', 'https://tourkit-phi.vercel.app')
  script.async = true
  document.body.appendChild(script)
}, [])

Single Page App Setup

React apps use client-side routing — the page URL changes without a full reload. TourKit needs to know when the route changes to show the correct tour.

Add a TourKitProvider component to your app:

// src/components/TourKitProvider.jsx
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

export default function TourKitProvider() {
  const location = useLocation()

  useEffect(() => {
    const timer = setTimeout(() => {
      window.TourKit?.startFor(location.pathname)
    }, 500)
    return () => clearTimeout(timer)
  }, [location.pathname])

  return null
}

Then add it to your App.js inside your Router:

import { BrowserRouter } from 'react-router-dom'
import TourKitProvider from './components/TourKitProvider'

export default function App() {
  return (
    <BrowserRouter>
      <TourKitProvider />
      {/* rest of your app */}
    </BrowserRouter>
  )
}

The 500ms delay gives the page time to render before the tour starts.

Single-page apps

Vue Router and React Router do not reload the page — ensure you only mount the script once.
Prefer HTML injection when possible so the SDK is available before heavy client hydration.