How to Install AskHandle on a Next.js Website?

Next.js is a popular React-based framework used to build dynamic web applications. Unlike standard websites, Next.js doesn't have a simple index.html file, so you'll need to adjust the AskHandle widget installation slightly. This article provides clear steps and example code for adding the AskHandle chat widget to your Next.js website.

Where Should You Add the Widget Code in Next.js?

In Next.js, the best place to insert scripts like the AskHandle widget is inside the _app.js file. This ensures the widget loads consistently across every page of your application.

Next.js Script Component

Next.js includes a built-in component called Script to manage external JavaScript. It allows efficient loading and offers several loading strategies:

• afterInteractive (recommended): Loads scripts immediately after the page renders.
• beforeInteractive: Loads scripts before the page renders.
• lazyOnload: Loads scripts after the entire page loads.

We'll use the default and recommended strategy, afterInteractive, for the AskHandle widget.

Step-by-Step Installation Guide

Follow these steps to integrate the AskHandle chat widget into your Next.js website.

Step 1: Locate or Create _app.js

Find your _app.js file inside the pages folder:

1your-nextjs-app/
2├── pages/
3│   ├── _app.js   <-- Modify or create this file
4│   ├── index.js
5├── components/
6├── public/
7└── styles/

If _app.js doesn’t exist, create a new one in the pages directory.

Step 2: Open _app.js in Your Code Editor

Open the _app.js file using your preferred editor (e.g., Visual Studio Code).

Step 3: Import Script Component from Next.js

At the top of _app.js, add the following import statement:

1import Script from 'next/script';

Step 4: Add the AskHandle Widget Installation Code

Copy and paste the following example code inside your _app.js. Replace the token in "token": "YOUR_TOKEN_HERE" with the actual token from your AskHandle dashboard (available under the Installation section):

1export default function App({ Component, pageProps }) {
2  return (
3    <>
4      <Script id="askhandle-config" strategy="afterInteractive">
5        {`
6          window.webchatConfig = {
7            "token": "YOUR_TOKEN_HERE"
8          };
9        `}
10      </Script>
11
12      <Script
13        src="https://handle-chat-widget.s3.amazonaws.com/assets/js/webchat-widget.min.js"
14        strategy="afterInteractive"
15      />
16
17      <Component {...pageProps} />
18    </>
19  );
20}

Make sure to replace "YOUR_TOKEN_HERE" with your unique token. Here's how your final code might look with an example token:

Example:

1export default function App({ Component, pageProps }) {
2  return (
3    <>
4      <Script id="askhandle-config" strategy="afterInteractive">
5        {`
6          window.webchatConfig = {
7            "token": "M7055559-408-649-0406487A"
8          };
9        `}
10      </Script>
11
12      <Script
13        src="https://handle-chat-widget.s3.amazonaws.com/assets/js/webchat-widget.min.js"
14        strategy="afterInteractive"
15      />
16
17      <Component {...pageProps} />
18    </>
19  );
20}

Step 5: Save and Test Your Changes

After saving your changes, restart your Next.js development server:

1npm run dev

Open your website (typically at http://localhost:3000) and verify that the AskHandle chat widget appears correctly at the bottom right corner of all pages.

Troubleshooting Tips

If the widget doesn’t appear:

• Verify your API token is correct.
• Check browser console logs for errors.
• Ensure your Next.js server has been restarted.

You've successfully integrated the AskHandle chat widget into your Next.js website.