MotaWord Active JS Integration with Next.js

This guide explains how to integrate MotaWord's translation widget into a Next.js application.

Overview

MotaWord Active JS is a translation widget that allows your website visitors to translate your content into their preferred language. This integration adds the necessary scripts and configurations to make it work with Next.js App Router.

🔥 Quick Integration (Copy & Paste)

Add these lines to your <head> tag in src/app/layout.tsx:

<!-- MotaWord Integration -->
<link rel="preconnect" href="https://serve.motaword.com" />
<link rel="preload" href="https://serve.motaword.com/js/45-313.js" as="script" crossOrigin="anonymous" referrerPolicy="unsafe-url" />
<link rel="preconnect" href="https://api.motaword.com" />
<script suppressHydrationWarning src="https://serve.motaword.com/js/45-313.js" data-token="YOUR_TOKEN_HERE" crossOrigin="anonymous" async referrerPolicy="unsafe-url" />

⚠️ Don't forget to replace YOUR_TOKEN_HERE with your actual MotaWord token!

Integration Steps

1. Modify the Root Layout

Add the MotaWord script and related tags to your root layout file (src/app/layout.tsx):

import type { Metadata } from "next";
import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        {/* ========== MOTAWORD INTEGRATION START ========== */}
        
        {/* Preconnect for better performance */}
        <link rel="preconnect" href="https://serve.motaword.com" />
        <link rel="preconnect" href="https://api.motaword.com" />
        
        {/* Preload the script */}
        <link 
          rel="preload" 
          href="https://serve.motaword.com/js/45-313.js" 
          as="script" 
          crossOrigin="anonymous"
          referrerPolicy="unsafe-url"
        />
        
        {/* Load the MotaWord script - IMPORTANT: Replace YOUR_TOKEN_HERE */}
        <script
          suppressHydrationWarning
          src="https://serve.motaword.com/js/45-313.js"
          data-token="YOUR_TOKEN_HERE"
          crossOrigin="anonymous"
          async
          referrerPolicy="unsafe-url"
        />
        
        {/* ========== MOTAWORD INTEGRATION END ========== */}
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

2. Important Configuration Details

⚠️ CRITICAL: MotaWord Script Requirements

Token: Replace YOUR_TOKEN_HERE with your actual MotaWord token
suppressHydrationWarning: This attribute prevents Next.js hydration warnings for the script tag
async: Ensures the script loads asynchronously without blocking page rendering
crossOrigin & referrerPolicy: Required for proper CORS handling

The complete MotaWord script tag must include:

<script
  suppressHydrationWarning
  src="https://serve.motaword.com/js/45-313.js"
  data-token="YOUR_TOKEN_HERE"
  crossOrigin="anonymous"
  async
  referrerPolicy="unsafe-url"
/>

3. Why This Approach?

Head Placement: The script is placed in the <head> tag to ensure it loads early
Preconnect: Establishes early connections to MotaWord servers for better performance
Preload: Hints the browser to fetch the script early in the page load process
Hydration Warning: Using suppressHydrationWarning prevents React hydration mismatches

Troubleshooting

Hydration Errors

If you encounter hydration errors, ensure:

The suppressHydrationWarning attribute is present on the script tag
You're not using Next.js Script component in the head (use regular <script> tag instead)

Script Not Loading

Check:

Your token is correct
The script URL is accessible
Browser console for any CORS or network errors

Alternative Approach (Using Script Component)

If you prefer using Next.js Script component, place it in the body:

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        
        {/* ========== MOTAWORD SCRIPT ========== */}
        <Script 
          src="https://serve.motaword.com/js/45-313.js"
          data-token="YOUR_TOKEN_HERE"
          strategy="afterInteractive"
          crossOrigin="anonymous"
          referrerPolicy="unsafe-url"
        />
        {/* =================================== */}
        
      </body>
    </html>
  );
}

However, this loads the script after the page becomes interactive, which might delay the translation widget availability.

Verification

After integration, you should:

See the MotaWord translation widget appear on your site
Be able to switch languages using the widget
Check browser console for any errors

Support

For MotaWord-specific issues, contact MotaWord support. For Next.js integration issues, refer to the Next.js documentation on script loading.