MultiLipi makes it easy to translate and optimize your website for multilingual SEO. If you're running a React-based site, here’s how you can integrate MultiLipi in under 5 minutes — no complicated setup, no backend changes.

What You’ll Need

  • Un React app (using App.jsou App.tsx)
  • Your MultiLipi API Key
  • The list of target languages(p. ex., hi, ar)
  • Your main domain(p. ex., example.com)

Step-by-Step Integration Guide

Step 1: Create a File Named multilipi.tsxou multilipi.js

Inside your src/ folder (or any component folder), create a file to store the MultiLipi script logic.

Paste the following code inside:

// 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;

}

Customize Before Proceeding:

  • Remplacer LANGUAGES with the languages you want to add (e.g., "fr", « de » )
  • Update DOMAIN with your actual domain (no subdomains)
  • Add your MultiLipi keydans MULTILIPI_KEY

Step 2: Import It in Your App File

Now open your App.tsxou App.js file and import the script you just created.

// 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;

Place <AddScriptToHead /> at the top of your return block so it loads before your actual content — this ensures the translated elements appear correctly and smoothly.

Vous avez terminé !

Once you've followed the above steps:

  • Your site will now be multilingual-enabled.
  • Users will see a floating language switcher.
  • Pages will render the translated version based on user-selected language or auto-detection.

Additional Notes

  • 🔐 Secure Integration
    The MultiLipi script is securely delivered via CDN and requires a unique API key tied to your account.

  • ⚡ Performance Optimized
    Uses dns-prefetchet preconnect techniques to reduce latency and speed up the loading time of your translation widget.
  • 🌎 SEO Friendly by Design
    Automatically injects hreflang alternate language tags in the page <head> to ensure proper indexing and visibility on multilingual search results.
  • 🖥️ Frontend-Only Implementation
    No backend changes required — works seamlessly with static React builds and Jamstack sites too.

Besoin d’aide ?

Still stuck or want to verify your integration?
Reach out to our support team or check out our Visual Editor for real-time translation customization.