How to install live-chat on a Next.js app?

This guide explains how to integrate VowChat live chat widget into your Next.js application in two simple steps.

Step 1: Create VowChatWidget Component

Create a new file VowChatWidget.js in your components folder with the following code:

import React from 'react';

class VowChatWidget extends React.Component {
  componentDidMount () {
    window.vowchatSettings = {
      hideMessageBubble: false,
      position: 'right',
      locale: 'en',
      type: 'standard',
    };

    (function(d,t) {
      var BASE_URL="https://app.vowchat.ai";
      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.vowchatSDK.run({
          websiteToken: 'your-website-token',
          baseUrl: BASE_URL
        })
      }
    })(document,"script");
  }

  render () {
    return null;
  }
}

export default VowChatWidget

Important: Replace your-website-token with your actual website token from Settings → Channels → Your Website Channel → Configuration.

Step 2: Import VowChatWidget

Import the component in your pages or layout component:

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

const Page = () => (
  <Fragment>
    <VowChatWidget />
    <Component {...pageProps} />
  </Fragment>
)

export default Page

That's it! The VowChat widget will now appear on your Next.js application.