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 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 (embeds) and Add a Genuin placement to your website (placements).
Install
<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 and How Auto Login works) |
| contextualParams.page_context | data-page-context | Comma-separated keywords for a contextual feed (see Deliver contextual feeds with page, user, and location context) |
| 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).
API & SDK
Access: the calls in the table are the proposed Business Account API (see 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), and 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) |
// 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 · Integrate the Genuin iOS SDK · Receive engagement events in your own analytics · Add a Genuin placement to your website.
SDKs: Web SDK 2.0.6 (see Embed the Genuin Web SDK on your website), iOS SDK 2.1.5 (see Integrate the Genuin iOS SDK), Android SDK 2.1.5 (see Integrate the Genuin Android SDK), React Native 3.0.3 (see Integrate the Genuin SDK with React Native apps), and Flutter (see Integrate the Genuin SDK with Flutter apps) 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.
