Integrating third-party scripts into a Single Page Application (SPA) like React requires careful handling of the DOM. You cannot simply paste a script tag into an HTML file if you want dynamic control. This guide demonstrates how to create a dedicated "Injector Component"—a modular, clean, and React-friendly way to load the MultiLipi engine.

This method ensures no blocking of the main thread, optimal SEO tag injection, and proper cleanup upon unmounting.

Prerequisites

Before proceeding, ensure you have the following from your MultiLipi Dashboard:

Project API Key: Your unique identifier (Found in Settings).

Target Languages: The list of ISO codes enabled for your project (e.g., 'hi', 'es', 'fr').

Domain: Your production domain (e.g., yoursite.com).

Step 1: Create the Injector Component

Building the bridge.

We will create a specialized component whose only job is to manage the injection of SEO tags and the translation script into the <head> of your document.

Action: Create a file named multilipi.tsx (or .js) in your src/ folder and paste the code below.

TypeScript

// multilipi.tsx
import { useEffect } from "react";

const LANGUAGES = ["hi", "ar"] as const; // Replace with your languages
const DOMAIN = "example.com";           // Replace with your actual domain
const MULTILIPI_KEY = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"; // Replace with your actual key

export default function AddScriptToHead() {
  useEffect(() => {
    const head = document.head;
    const added: HTMLElement[] = [];

    const add = <T extends HTMLElement>(el: T) => {
      head.appendChild(el);
      added.push(el);
      return el;
    };

    // Alternate hreflang links
    LANGUAGES.forEach((lang) => {
      const link = document.createElement("link");
      link.rel = "alternate";
      link.hreflang = lang;
      link.href = `https://${lang}.${DOMAIN}/`;
      add(link);
    });

    // DNS prefetch & preconnect
    const dns = document.createElement("link");
    dns.rel = "dns-prefetch";
    dns.href = "//multilipiseo.multilipi.com";
    add(dns);

    const preconnect = document.createElement("link");
    preconnect.rel = "preconnect";
    preconnect.href = "https://multilipiseo.multilipi.com";
    preconnect.crossOrigin = "anonymous";
    add(preconnect);

    // Add MultiLipi translation script
    const script = document.createElement("script");
    script.src = "https://script-cdn.multilipi.com/static/JS/page_translations.js";
    script.crossOrigin = "anonymous";
    script.dataset.posX = "50";
    script.dataset.posY = "50";
    script.setAttribute("multilipi-key", MULTILIPI_KEY);
    script.setAttribute("mode", "auto");
    add(script);

    // Cleanup on component unmount
    return () => {
      added.forEach((el) => el.parentNode?.removeChild(el));
    };
  }, []);

  return null;
}

Code Deep Dive: Why this works

useEffect Hook: This ensures the code runs only after the component mounts, preventing blocking during the initial hydration phase.

SEO Automation (Hreflang): The code iterates through your LANGUAGES array and dynamically injects <link rel="alternate"> tags. This is critical for telling Google that hi.example.com is the Hindi version of your site.

Performance (Preconnect): The dns-prefetch and preconnect lines tell the browser to resolve the MultiLipi server IP address before the script is even requested. This significantly reduces the time it takes for the translation widget to appear.

Cleanup Function (return () => ...): In React, components can re-render. This logic tracks every element we added (added.push(el)) and removes them if the component unmounts. This prevents duplicate script tags and memory leaks.

Step 2: Initialize in Root App

Activating the layer.

Now that the logic is encapsulated, we need to place it at the highest level of your application tree, typically App.tsx or App.js.

Action: Import and mount the component.

TypeScript

// App.tsx
import AddScriptToHead from './multilipi'; // adjust the path as needed

function App() {
  return (
    <>
      {/* Load the MultiLipi script */}
      <AddScriptToHead />

      {/* Rest of your App UI */}
    </>
  );
}

export default App;

Why place it here?

Global Scope: Placing <AddScriptToHead /> in App.tsx guarantees that the translation engine remains active regardless of which route (page) the user navigates to.

Non-Visual: Since the component returns null, it does not affect your UI layout or spacing. It works silently in the background.

Verification Checklist

How to confirm successful integration.

Once you save and run your React app (npm start or yarn dev), perform these checks:

The Visual Check: Do you see the Language Switcher widget floating in the position defined by posX and posY?

The DOM Check: Open Chrome DevTools (F12) → Elements Tab → Expand <head>.

Verify you see the <link rel="alternate" hreflang="hi"...> tags.

Verify the page_translations.js script is present at the bottom of the head.

The Network Check: Open the Network Tab and filter by "JS". Ensure page_translations.js is loading with status 200 OK.

Additional Configuration Options

In the code provided, you will see script.dataset properties. You can tweak these values to customize behavior:

script.dataset.posX / posY: Adjust these numbers (0-100) to move the floating widget's default position on the screen.

script.setAttribute("mode", "auto"):

"auto": Automatically attempts to translate based on browser language.

"manual": Waits for user interaction before translating.

How to Integrate MultiLipi into Your React Website