Integrate UniLink with Next.js

To integrate UniLink with your Next.js application, you would need a component that loads the UniLink script.

You can do this in two quick steps. Let us illustrate this with the help of an example below. This example shows a React component which loads the UniLink script asynchronously.

1. Copy and Create!

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

import React from "react";

class ChatwootWidget extends React.Component {
  componentDidMount() {
    // Add Chatwoot Settings
    window.chatwootSettings = {
      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.chatwootSDK.run({
          websiteToken: "<your-website-token>",
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  }

  render() {
    return null;
  }
}

export default ChatwootWidget;

2. Import

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

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

import ChatwootWidget from '../components/ChatwootWidget'

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

export default Page

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