Add Chat Button to Next.js
Copy page
Integrate Inkeep's chat button into your Next.js application for real-time user assistance.
What is Next.js
Next.js is a React full-stack app development framework. You can use Inkeep's React component library to Add AI Search & Chat functionality to apps or documentation and marketing sites built with Next.js.
Get an API key
Follow these steps to create an API key for your web assistant.
Copy and add the apiKey
to your environment variables:
Install the component library
Customize your settings
Define your Inkeep settings.
Define the component
Next, create an InkeepChatButton.tsx
file for our Chat Button
component.
For Next.js apps that use App Router, use the "use client"
directive at
the top of the file to load the widget client side.
For a full list of customizations, check out the Chat Button documentation.
Positioning
We support customization of styles via custom css in baseSettings, you can style "Ask AI" button by targetting it's class as so:
You can find more information in the Custom Styles documentation.