React & Next.js

Embedding the LookIA widget in a React or Next.js project is straightforward. Since the widget is a plain JavaScript snippet, you simply need to inject the <script> tag once into your application's HTML shell.

Option 1: Using a Custom `_document` (Next.js Pages Router)

If you are using the Pages Router (pages/ directory), add the script tag to your custom _document.tsx file. This ensures the script loads globally across all pages.

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        {/* LookIA Widget */}
        <script
          src="https://cdn.lookia.io/lookia-widget.min.js"
          data-site-id="YOUR-UNIQUE-SITE-ID"
          defer
        />
      </body>
    </Html>
  )
}

Tip: Replace YOUR-UNIQUE-SITE-ID with the Site ID found in your LookIA dashboard under Sites > [Your Site] > Embed Code.

Option 2: Using the Root Layout (Next.js App Router)

If you are using the App Router (app/ directory), add the script to your root layout.tsx. Use Next.js's built-in <Script> component for optimal loading strategy.

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* LookIA Widget */}
        <Script
          src="https://cdn.lookia.io/lookia-widget.min.js"
          data-site-id="YOUR-UNIQUE-SITE-ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

The strategy="lazyOnload" option defers the script until after the page is fully interactive, which is ideal for a non-critical UI enhancement like a search widget.

Option 3: React (Vite / CRA) — Editing `index.html`

For standard React projects using Vite or Create React App, simply add the <script> tag to your public index.html file.

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- LookIA Widget -->
    <script
      src="https://cdn.lookia.io/lookia-widget.min.js"
      data-site-id="YOUR-UNIQUE-SITE-ID"
      defer
    ></script>
  </body>
</html>

Triggering the Widget Programmatically

If you want to open the LookIA search modal from a custom React button or component (e.g., a search icon in your navbar), use the Custom Selector option in your dashboard to point to a CSS selector, or use the global JavaScript API after the script has loaded:

// components/SearchButton.tsx
export default function SearchButton() {
  const handleClick = () => {
    // LookIA exposes a global API once the widget script has loaded
    if (typeof window !== 'undefined' && window.LookIA) {
      window.LookIA.open()
    }
  }

  return (
    <button onClick={handleClick} aria-label="Open search">
      Search
    </button>
  )
}

For TypeScript users, you can extend the Window interface in a global.d.ts file:
interface Window {
  LookIA?: { open: () => void; close: () => void }
}

Verifying the Integration

Run your development server (npm run dev).
Navigate to any page of your application.
The LookIA floating search button should appear in the bottom-right corner of the screen.
Open the browser console — you should see no errors related to LookIA.

React & Next.js

React & Next.js

Option 1: Using a Custom _document (Next.js Pages Router)

Option 2: Using the Root Layout (Next.js App Router)

Option 3: React (Vite / CRA) — Editing index.html

Triggering the Widget Programmatically

Verifying the Integration

Option 1: Using a Custom `_document` (Next.js Pages Router)

Option 3: React (Vite / CRA) — Editing `index.html`