Add Custom Modal Trigger to Next.js
Integrate Inkeep's custom modal trigger into your Next.js application for flexible user interactions.
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 integration.
Copy and add the apiKey
to your environment variables:
Install the component library
Customize your settings
Define your Inkeep settings.
Define the component
We'll use the Modal Search and Chat
component to create a custom trigger.
Create a ModalSearchAndChat.tsx
file for our Custom Modal Trigger
component. <button>
represents whatever UI element you'd like to use to trigger the Inkeep Modal.
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 Custom Modal Trigger documentation.