# Web SDK: install and configure

The Web SDK turns a container on your page into a Genuin embed or placement. It is one versioned script plus one `init` call; the embed's feed and layout are configured in Brand Control Center (BCC) and fetched by ID, so a change saved in BCC reaches every page at its next load. Current version: 2.0.6. The full technical reference is [Embed the Genuin Web SDK on your website](https://begenuin.com/developers/developer-resources/sdk/how-do-you-embed-and-configure-the-genuin-web-sdk-on-your-website) (embeds) and [Add a Genuin placement to your website](https://begenuin.com/developers/developer-resources/sdk/how-do-you-configure-the-genuin-web-sdk-placement-on-your-website) (placements).

## Install

```html
<div id="gen-sdk" class="gen-sdk-class" style="width: 100%; height: 600px;"></div>
<script src="https://media.begenuin.com/sdk/2.0.6/gen_sdk.min.js"></script>
<script>
  window.genuin.init({ embed_id: "{{EMBED_ID}}", api_key: "<<YOUR_API_KEY>>" });
</script>
```

Pin the version in the URL: the unversioned `https://media.begenuin.com/sdk/gen_sdk.min.js` serves the 1.2 line, which has a different API.

## Key options

| Option (init) | Attribute (container) | Purpose |
| --- | --- | --- |
| embed_id | data-embed-id | The embed to render (BCC › Grow › On Site › Embed) |
| api_key | data-api-key | Your brand's browser key |
| token, params | — | Auto Login for the signed-in member (see [Auto login and token exchange](https://begenuin.com/developers/get-started/any-business/auto-login-and-token-exchange) and [How Auto Login works](https://begenuin.com/developers/developer-resources/guides/genuin-auto-login)) |
| contextualParams.page_context | data-page-context | Comma-separated keywords for a contextual feed (see [Deliver contextual feeds with page, user, and location context](https://begenuin.com/developers/developer-resources/sdk/contextual-embeds-how-they-work-and-how-to-configure-them)) |
| contextualParams.geo | data-lat, data-long | Location for a location-based feed |
| video | data-video-id | Open one video directly |

**Several embeds** – give each container a unique `id` starting `gen-sdk-`, put its `data-embed-id` on the element, and call `init` once.

**Update context without reloading** – `window.genuin.update({ id: "gen-sdk-1", contextualParams: { … } })`.

**Override sign-in** – define `window.genuinAuth = (data) => { … }` to send viewers to your own login; `data.returnQueryParams` carries the action to resume.

**Requirements** – an ES2020 browser with Shadow DOM and IntersectionObserver, HTTPS, a container with non-zero width and height, one brand per page, and a Content Security Policy that allows `media.begenuin.com` and `api.begenuin.com` (see [Embed the Genuin Web SDK on your website](https://begenuin.com/developers/developer-resources/sdk/how-do-you-embed-and-configure-the-genuin-web-sdk-on-your-website)).

## API & SDK

Access: the calls in the table are the proposed Business Account API (see [Business Account API: provisioning, OAuth, and the resource map](https://begenuin.com/developers/get-started/any-business/business-account-api-provisioning-oauth-and-the-resource-map)), authenticated with a key scoped to the account and a role or an OAuth client acting for it; every confirmation in this article becomes a proposal you can approve by API (`POST /proposals/{proposalId}:approve`). Live today, the server API under `/api/thirdparty` authenticates with a `gn-access-token` (see [Generate an access token](https://begenuin.com/developers/developer-resources/api/generate-access-token-using-authentication-api)), and [Live API today and the Business Account API roadmap](https://begenuin.com/developers/developer-resources/guides/live-api-today-and-the-business-account-api-roadmap) maps what is live to what is proposed.

| Call | Purpose |
| --- | --- |
| GET /sdk/config | Runtime configuration the Web and mobile SDKs fetch on init (placements, experiences, kit) |
| GET /placements/{placementId}/embed | Embed snippet for the placement (Web SDK attributes pre-filled) |
| GET /placements/{placementId}/feed | Server-side render of the ranked feed for a page context (SSR and native apps) |

```js
// proposed server SDK (Business Account API)
import { Genuin } from '@genuin/sdk';
const genuin = new Genuin({ apiKey: process.env.GENUIN_KEY });
await genuin.placements.embed(placementId);
await genuin.placements.feed(placementId, { context });
```

Live today: [Embed the Genuin Web SDK on your website](https://begenuin.com/developers/developer-resources/sdk/how-do-you-embed-and-configure-the-genuin-web-sdk-on-your-website) · [Integrate the Genuin iOS SDK](https://begenuin.com/developers/developer-resources/sdk/developer/genuin-sdk/native-compatibility/ios/how-to-integrate-and-power-your-brand-community-in-ios-apps) · [Receive engagement events in your own analytics](https://begenuin.com/developers/developer-resources/sdk/receive-engagement-events-in-your-own-analytics) · [Add a Genuin placement to your website](https://begenuin.com/developers/developer-resources/sdk/how-do-you-configure-the-genuin-web-sdk-placement-on-your-website).

SDKs: Web SDK (see [Embed the Genuin Web SDK on your website](https://begenuin.com/developers/developer-resources/sdk/how-do-you-embed-and-configure-the-genuin-web-sdk-on-your-website)), iOS SDK (see [Integrate the Genuin iOS SDK](https://begenuin.com/developers/developer-resources/sdk/developer/genuin-sdk/native-compatibility/ios/how-to-integrate-and-power-your-brand-community-in-ios-apps)), Android SDK (see [Integrate the Genuin Android SDK](https://begenuin.com/developers/developer-resources/sdk/how-to-integrate-and-power-your-brand-community-in-android-apps)), React Native (see [Integrate the Genuin SDK with React Native apps](https://begenuin.com/developers/developer-resources/sdk/how-do-you-integrate-the-genuin-react-native-sdk-into-your-application)), and Flutter (see [Integrate the Genuin SDK with Flutter apps](https://begenuin.com/developers/developer-resources/sdk/how-do-you-integrate-the-genuin-flutter-sdk-into-your-application)) render Genuin and sign members in; the Node (`@genuin/sdk`) and Python (`genuin`) server SDKs are proposed with [Business Account API: provisioning, OAuth, and the resource map](https://begenuin.com/developers/get-started/any-business/business-account-api-provisioning-oauth-and-the-resource-map).