Install Supportson on Next.js & React
Script tag or React component, SSR-friendly
Integrate Supportson into your Next.js or React application. Use a simple Script component in your layout, or add a useEffect-based component for more control. Fully compatible with both App Router and Pages Router.
Your widget embed code
Replace YOUR_AGENT_ID with your actual Agent ID from the Supportson dashboard.
<script src="https://supportson.com/widget.js" data-agent="YOUR_AGENT_ID" defer></script>Step-by-Step Installation
Copy your Agent ID
Log in to your Supportson dashboard, go to Settings, and copy your Agent ID.
Option A: Next.js Script component (recommended)
Add the Supportson widget to your root layout using the Next.js Script component. This works with both App Router and Pages Router.
// app/layout.tsx (App Router)
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://supportson.com/widget.js"
data-agent="YOUR_AGENT_ID"
strategy="lazyOnload"
/>
</body>
</html>
)
}Option B: React useEffect
If you want more control, load the widget script dynamically via useEffect. This works in any React application (Create React App, Vite, Remix, etc.).
// components/SupportsonWidget.tsx
'use client'
import { useEffect } from 'react'
export function SupportsonWidget({ agentId }: { agentId: string }) {
useEffect(() => {
const script = document.createElement('script')
script.src = 'https://supportson.com/widget.js'
script.defer = true
script.setAttribute('data-agent', agentId)
document.body.appendChild(script)
return () => {
document.body.removeChild(script)
}
}, [agentId])
return null
}
// Usage in your app:
// <SupportsonWidget agentId="YOUR_AGENT_ID" />Option C: Plain script tag in _document.tsx (Pages Router)
If using the Pages Router, you can add the script in _document.tsx.
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<script
src="https://supportson.com/widget.js"
data-agent="YOUR_AGENT_ID"
defer
/>
</body>
</Html>
)
}Verify the installation
Run your development server (npm run dev) and open your app in a browser. The chat bubble should appear in the bottom-right corner.
Verify Your Installation
- Open your website in a browser (use an incognito window to avoid caching issues).
- Look for the Supportson chat bubble in the bottom-right corner of the page.
- Click the bubble to open the chat widget and send a test message.
- Check your Supportson dashboard — the conversation should appear in real time.
Not seeing the widget? Make sure you replaced YOUR_AGENT_ID with your actual Agent ID, and that the script tag is placed before the closing </body> tag.
What You Get With Next.js & React
Add Supportson to Next.js & React today
Set up in 3 minutes. No credit card required.