API Keys

Configure public API keys for Next.js and React support widgets.

Get your public key

Open your dashboard at Settings → Developers and create or copy a Public key.

Configure environment variables

.env.local

NEXT_PUBLIC_COSSISTANT_API_KEY=pk_live_xxxxxxxxxxxx

Auto-detection

The SDK checks VITE_COSSISTANT_API_KEY (Vite), NEXT_PUBLIC_COSSISTANT_API_KEY (Next.js), or COSSISTANT_API_KEY when your bundler explicitly exposes it to browser code. Create React App, Remix, and generic bundlers do not expose arbitrary server environment variables automatically, so pass publicKey from their documented client configuration instead.

Public vs private keys

Type	Prefix	Purpose	Safe in browser
Public	`pk_live_`, `pk_test_`	Widget integration	Yes
Private	`sk_live_`, `sk_test_`	Server-to-server API	No

Only use public keys in frontend widget code.

Allowed domains

Public keys work only on whitelisted domains.

Production keys (pk_live_*) require explicit allowlisting.
Test keys (pk_test_*) can use HTTP on localhost, but localhost must still be present in the key's allowed domains.
Allowlisting an apex domain also allows its subdomains.

Use full origins or bare domains, for example:

example.com
https://staging.example.com
http://localhost:3000

Troubleshooting

Check:

env variable name is correct for your framework
key is still active
app was restarted after env changes

Domain not allowed

Check:

domain is listed in Settings → Developers → Allowed domains
live keys use HTTPS in production

Was this page helpful?

Open a prefilled documentation issue so the team can act on your feedback.

Yes, it helped Needs improvement

React Overview

On this page

Get your public key Configure environment variables Public vs private keys Allowed domains Troubleshooting Configuration error in the widget Domain not allowed