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

Next.js

.env.local
NEXT_PUBLIC_COSSISTANT_API_KEY=pk_live_xxxxxxxxxxxx

React

.env
COSSISTANT_API_KEY=pk_live_xxxxxxxxxxxx

Public vs private keys

TypePrefixPurposeSafe in browser
Publicpk_live_*, pk_test_*Widget integrationYes
Privatesk_live_*, sk_test_*Server-to-server APINo

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_*) work on localhost.

Use full origins, for example:

  • https://example.com
  • https://app.example.com
  • https://staging.example.com

Troubleshooting

Configuration error in the widget

Check:

  • env variable name is correct
  • key is still active
  • app was restarted after env changes

Domain not allowed

Check:

  • domain is listed in Settings → Developers → Allowed domains
  • protocol matches (https://)