Integrate CarbonChat with Next.js

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

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

   import React from 'react';
   
   class CarbonchatWidget extends React.Component {
     componentDidMount () {
       // Add Carbonchat Settings
       window.carbonchatSettings = {
         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.carbonchatSDK.run({
             websiteToken: '<your-website-token>',
             baseUrl: BASE_URL
           })
         }
       })(document,"script");
     }
   
     render () {
       return null;
     }
   }
   
   export default CarbonchatWidget
   

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

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

You’ll be able to see the widget on your website now.