Next.js / React guide
App Router: load the widget from a client component in your root layout so it runs in the browser.
'use client';
import Script from 'next/script';
export function GlobalizationOSWidget() {
return (
<Script
src="https://app.globalizationos.com/widget/v1/loader.js"
strategy="afterInteractive"
data-gos-project={process.env.NEXT_PUBLIC_GOS_PROJECT_ID}
data-integration-id={process.env.NEXT_PUBLIC_GOS_PROJECT_ID}
data-key-id={process.env.NEXT_PUBLIC_GOS_KEY_ID}
data-default-locale="en"
data-target-locales="en,de,fr"
data-gos-selector="auto"
/>
);
}- Only expose NEXT_PUBLIC project/key IDs — never private API secrets.
- Visible text is localized automatically; no wrapper or data-gos-translate attribute is required in the default mode.
- Client-side DOM changes are observed automatically. You may still call window.GOSWidget?.refresh() after unusual render flows.