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:
Markup
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:
Jsx
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):
Jsx
Make sure to replace "YOUR_TOKEN_HERE"
with your unique token. Here's how your final code might look with an example token:
Example:
Jsx
Step 5: Save and Test Your Changes
After saving your changes, restart your Next.js development server:
Sh
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.