Next.js Integration
Learn how to integrate the Chatwik live chat widget into your Next.js application.
If you have a Next.js app, you can add the Chatwik live chat widget and talk to your visitors in real time. To integrate Chatwik with your Next.js application, you need a component that loads the Chatwik script.
You can do this in two quick steps using a functional React component.
Installation & Setup
Create the ChatwikWidget Component
Create a new file in your components folder named ChatwikWidget.jsx (or .tsx) and add the following functional component code:
"use client";
import { useEffect } from 'react';
const ChatwikWidget = () => {
useEffect(() => {
// Add Chatwik Settings
window.chatwikSettings = {
hideMessageBubble: false,
position: 'right', // 'left' or 'right'
locale: 'en', // Language code
type: 'standard', // 'standard' or 'expanded_bubble'
};
// Load Chatwik script asynchronously
(function(d, t) {
var BASE_URL = "https://app.chatwik.com";
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = BASE_URL + "/packs/js/sdk.js";
s.parentNode.insertBefore(g, s);
g.async = true;
g.onload = function() {
window.chatwikSDK.run({
websiteToken: '<your-website-token>',
baseUrl: BASE_URL,
});
};
})(document, "script");
}, []);
return null;
};
export default ChatwikWidget;Replace <your-website-token> with your actual website token from your Chatwik inbox configuration (Settings → Inboxes → select website inbox → Configuration tab). If you need to create a website channel first, refer to the Website Live Chat Setup guide.
Import Component in Pages or Layout
Import <ChatwikWidget /> into your root layout (app/layout.jsx for App Router) or global app file (pages/_app.jsx for Pages Router):
import ChatwikWidget from '@/components/ChatwikWidget';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<ChatwikWidget />
</body>
</html>
);
}import ChatwikWidget from '../components/ChatwikWidget';
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<ChatwikWidget />
</>
);
}
export default MyApp;