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

  • Sebuah React app (using App.jsatau App.tsx)
  • Your MultiLipi API Key
  • The list of target languages(misalnya, Hai , Ar )
  • Your main domain(misalnya, example.com)

Step-by-Step Integration Guide

Step 1: Create a File Named multilipi.tsxatau 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:

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

Step 2: Import It in Your App File

Now open your App.tsxatau 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.

Anda sudah selesai!

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-prefetchdan 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.

Butuh Bantuan?

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.