Adding AI support to your Next.js or React app is straightforward, and we’ve optimized our widget to be lightweight, fast, and easy to integrate.
Quick Setup Steps
1. Get Your Widget Script
First, log in to your dashboard and navigate to the widget settings. Copy the provided script tag—it will include your unique widget ID.
2. Add It to Your App
For Next.js with App Router: Add the script to your root layout.tsx file, right before the closing </body> tag. For Next.js with Pages Router or Create React App, add it to your index.html file.
3. Customize the Widget
Use the widget settings in your dashboard to customize the appearance to match your site—change colors, add your logo, adjust the position, and more.
Performance Tips
- Load the widget asynchronously to avoid blocking the main thread
- Use lazy loading so the widget only loads when needed
- Avoid adding too many custom scripts that could slow down your site
- Test your site’s performance before and after adding the widget
Troubleshooting Common Issues
Widget Not Showing Up
Make sure the script tag is added correctly, and that you’re using the right widget ID. Check the browser console for any error messages.
Widget Loading Slowly
Make sure you’re using the async or defer attribute on the script tag, and consider enabling lazy loading in your widget settings.
If you run into any issues, our support team is here to help. Reach out and we’ll get you up and running in no time.