Next.js

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

1. 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];  
g.src=BASE_URL+"/packs/js/sdk.js";  
s.parentNode.insertBefore(g,s);  
g.async=!0;  
g.onload=function(){  
window.OneChatSDK.run({  
websiteToken: '<your-website-token>',  
baseUrl: BASE_URL  
})  
}  
})(document,"script");  
}  
  
render () {  
return null;  
}  
}  
  
export default OneChatWidget  

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

import React, { Fragment } from 'react'  
// ...  
  
import OneChatWidget from '../components/OneChatWidget'  
  
const Page = () => (  
<Fragment>  
<OneChatWidget />  
<Component {...}>  
</Fragment>  
)  
  
export default Page  

You would be able to see the OneHash Chat widget on the page now.