To integrate OneChat with a Next.js application, you would have to create a component that loads OneChat script. The below example shows a React component which loads the OneChat script asynchronously.

Copy the following and create a file in your components folder with the name OneChatWidget.js

import React from 'react';

class OneChatWidget extends React.Component {
componentDidMount () {
// Add OneChat Settings
window.OneChatSettings = {
hideMessageBubble: false,
position: 'right', // This can be left or right
locale: 'en', // Language to be set
type: 'standard', // [standard, expanded_bubble]

// Paste the script from inbox settings except the <script> tag
(function(d,t) {
var BASE_URL="<your-installation-url>";
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
websiteToken: '<your-website-token>',
baseUrl: BASE_URL

render () {
return null;

export default OneChatWidget

Import the component in your pages or layout component as shown below.

import React, { Fragment } from 'react'
// ...

import OneChatWidget from '../components/OneChatWidget'

const Page = () => (
<OneChatWidget />
<Component {...}>

export default Page

You would be able to see the OneChat widget on the page now.
Was this article helpful?
Thank you!