Install Wayhint in React (Next.js or Vite)

1. Next.js (App Router)

   Load the script once in the root layout. lazyOnload keeps it off the critical path.

   import Script from 'next/script';
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <body>
           {children}
           <Script
             src="https://YOUR-GUIDE-HOST/widget/guide.js"
             data-site-key="YOUR_SITE_KEY"
             strategy="lazyOnload"
           />
         </body>
       </html>
     );
   }

2. Vite (or Create React App)

   Add the script tag to index.html, before </body>.

       <div id="root"></div>
       <script type="module" src="/src/main.tsx"></script>
       <script src="https://YOUR-GUIDE-HOST/widget/guide.js" data-site-key="YOUR_SITE_KEY" async></script>
     </body>

3. Optional: start a guide from your own button

   Once ready, the widget exposes window.Wayhint with ask(goal), stop(), open() and destroy(), and fires wayhint:ready on window. Check it exists before calling it.

   declare global {
     interface Window {
       Wayhint?: { ask(goal: string): void; stop(): void; open(): void };
     }
   }
   
   export function HelpButton() {
     return (
       <button onClick={() => window.Wayhint?.ask('export my invoices')}>
         Show me how to export
       </button>
     );
   }

4. Or: the @wayhint/loader package

   Instead of the script tag, @wayhint/loader adds it for you and gives you a component and a hook. It resolves when the guide is ready, reports why it did not start, and removes the guide when the last component unmounts (StrictMode-safe). It is in the source repository under integrations/npm, not on npm yet.

   'use client';
   import { Wayhint, useWayhint } from '@wayhint/loader/react';
   
   export function Guide() {
     return <Wayhint siteKey="YOUR_SITE_KEY" widgetUrl="https://YOUR-GUIDE-HOST/widget/guide.js" />;
   }
   
   export function HelpButton() {
     const { api, ready } = useWayhint({ siteKey: 'YOUR_SITE_KEY', widgetUrl: 'https://YOUR-GUIDE-HOST/widget/guide.js' });
     return <button disabled={!ready} onClick={() => api?.ask('export my invoices')}>Show me how</button>;
   }

Check it works

Open the page. An Ask Pepper button appears in the bottom corner and Pepper waves. In the browser console, window.Wayhint should be defined. If nothing appears, check the console for [web-assistant] messages: an unknown site key or a domain missing from the allowlist are the usual causes.

Next

• Hide sensitive areas with data-guide-private and data-guide-ignore (overview).
• Add your own “Show me” buttons with Wayhint.ask() (example).
• Read what the guide sees, or pick a plan.