React

Install tokwork in React and React Router applications.

Install tokwork in React

Compatible with Create React App, Vite, and React Router.

React with Vite

Add to index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    
    <!-- tokwork Widget -->
    <script async src="https://js.tokwork.com/loader.js" 
      data-website-id="YOUR_WEBSITE_ID" 
      data-website-domain="yourdomain.com">
    </script>
  </body>
</html>

Create React App

Add to public/index.html

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    
    <!-- tokwork Widget -->
    <script async src="https://js.tokwork.com/loader.js" 
      data-website-id="YOUR_WEBSITE_ID" 
      data-website-domain="yourdomain.com">
    </script>
  </body>
</html>

Dynamic Loading (Recommended)

Create a custom hook for more control:

src/hooks/useTokwork.ts

import { useEffect } from 'react'

export function useTokwork(websiteId: string, domain: string) {
  useEffect(() => {
    // Check if script already loaded
    if (document.querySelector('[data-tokwork-script]')) {
      return
    }

    const script = document.createElement('script')
    script.src = 'https://js.tokwork.com/loader.js'
    script.async = true
    script.setAttribute('data-website-id', websiteId)
    script.setAttribute('data-website-domain', domain)
    script.setAttribute('data-tokwork-script', 'true')
    
    document.body.appendChild(script)

    return () => {
      // Cleanup if needed
      const existingScript = document.querySelector('[data-tokwork-script]')
      if (existingScript) {
        existingScript.remove()
      }
    }
  }, [websiteId, domain])
}

Use in your App component:

src/App.tsx

import { useTokwork } from './hooks/useTokwork'

function App() {
  useTokwork('YOUR_WEBSITE_ID', 'yourdomain.com')

  return (
    <div className="App">
      {/* Your app content */}
    </div>
  )
}

export default App

Environment Variables

Use .env files for configuration:

.env

REACT_APP_TOKWORK_WEBSITE_ID=your-website-id
REACT_APP_TOKWORK_DOMAIN=yourdomain.com

Then use them:

useTokwork(
  process.env.REACT_APP_TOKWORK_WEBSITE_ID!,
  process.env.REACT_APP_TOKWORK_DOMAIN!
)

React Router

Works seamlessly with React Router. Add to your root component:

src/main.tsx

import { BrowserRouter } from 'react-router-dom'
import { useTokwork } from './hooks/useTokwork'

function App() {
  useTokwork('YOUR_WEBSITE_ID', 'yourdomain.com')

  return (
    <BrowserRouter>
      {/* Your routes */}
    </BrowserRouter>
  )
}

TypeScript Support

Add type definitions:

src/types/tokwork.d.ts

declare global {
  interface Window {
    WOM_WIDGET_CONFIG?: Array<{
      websiteId: string
      backendUrl?: string
    }>
  }
}

export {}

Verify Installation

Start dev server: npm start or npm run dev
Open http://localhost:3000
Check console for: ✅ tokwork Widget loaded successfully
Look for widget popup

Common Issues

Next Steps

Vue.js & Nuxt

Install tokwork in Vue.js and Nuxt applications.

WordPress

Install tokwork in WordPress using plugin or custom code.