Install the packages
Let's start by adding Cossistant to your NextJS project:
pnpm add @cossistant/next @cossistant/react
Add your public API key
Add your public API key to the NEXT_PUBLIC_COSSISTANT_API_KEY environment variable.
NEXT_PUBLIC_COSSISTANT_API_KEY=pk_test_xxxxYou can find your public API key at the end of your onboarding or can access it anytime from the settings page.
Add Cossistant provider
Add the Cossistant SupportProvider to the root layout of your app:
import { SupportProvider } from "@cossistant/next";
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<SupportProvider>{children}</SupportProvider>
</body>
</html>
);
}Import support widget styling
Cossistant support widget provides two CSS options depending on your setup:
If you're using Tailwind CSS v4, import the source file in your CSS to enable full theme customization:
@import "tailwindcss";
@import "@cossistant/react/tailwind.css";
This allows you to override variables like --co-theme-primary in your own CSS for theming.
Tailwind v3 is not supported. Please use the plain CSS import instead (see "Plain CSS" tab).
Use support widget
Add the Cossistant <Support /> widget to your app:
import { Support } from "@cossistant/next";
export default function Page() {
return (
<div>
<h1>You're ready to go!</h1>
{/* Support widget can be placed anywhere in your app */}
<Support />
</div>
);
}Done!
You're ready to go! You can now start using Cossistant <Support /> widget in your app.
Simple isn't it? You can stop here or move on to the basic usage guide to learn how to use and customize your support widget, to make it truly yours.