How to Install the Live Chat in a Next.js Application

f you're using Next.js in your application, you can add the Akece live chat widget and talk to your visitors in real time. Just follow two simple steps to load the widget script asynchronously.

1. Create the AkeceWidget Component

Create a new file called AkeceWidget.js inside your project’s components folder and add the following content:

import React from 'react';

class AkeceWidget extends React.Component {
  componentDidMount () {
    // Widget settings
    window.akeceSettings = {
      hideMessageBubble: false,
      position: 'right', // Can be 'left' or 'right'
      locale: 'en',      // Language: pt_BR, en, es
      type: 'standard',  // 'standard' or 'expanded_bubble'
    };

    // Widget script loader
    (function(d, t) {
      var BASE_URL = "https://dash.akece.com";
      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 = true;
      g.onload = function() {
        window.akeceSDK.run({
          websiteToken: '<your-website-token>',
          baseUrl: BASE_URL
        });
      };
    })(document, "script");
  }

  render () {
    return null;
  }
}

export default AkeceWidget;

Replace '<your-website-token>' with the token from your Website inbox, available in your Akece dashboard under Settings → Inboxes.

2. Import the Component into Your App

You can import the widget into your main layout or a specific page. For example:

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

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

export default Page;

Once the page is loaded, the Akece widget will appear automatically.

Need help setting up the widget in your Next.js application?
Reach out to us anytime:
📩 [email protected]
📱 @akece.ai