7 min read

Install the Client SDK

Add the lightweight client widget to React and Next.js.

Add the package#

Install the package and run initialization exactly once in browser code.

Terminal va client init

npm install @pinwid/client-widget

import { PinWid } from "@pinwid/client-widget";

PinWid.init({
  publicKey: process.env.NEXT_PUBLIC_PINWID_KEY!,
  environment: "production"
});

SetupEnvironmentsTeam

PUBLIC KEYbp_pub_••••••••••••

1 · Copy public key

Environment variable#

Store the public identifier as NEXT_PUBLIC_PINWID_KEY in .env.local. It is not a secret credential.

.env.local

NEXT_PUBLIC_PINWID_KEY=bp_pub_your_project_key

Performance#

Load the widget on the client. It stays out of server components and does not block the first page render.

Use test data and never expose secret keys or personal information.