> ## Documentation Index
> Fetch the complete documentation index at: https://resources.begenuin.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Web SDK
> Genuin Web SDK comprises features such as brand feed, communities, and groups.
# Prerequisites
Genuin will provide you with the established community under the subdomain URL - website.begenuin.com which you can manage under your brand control center login.
## Steps to embed Brand Community:
To embed your Brand community into your website, follow the steps below:
1. Identify the location on your website where you want to embed the community widget.
2. Paste the provided code block into the desired location in your website's HTML markup.
3. Adjust the height and width of the embed container as per your design requirements.
You can specify these dimensions within the code block itself.
## Implementation
### HTML Structure
#### Single Embeds (html)
```html Embed_Without_AutoLogin theme={null}
```
```html Embed_With_AutoLogin theme={null}
```
#### Embed With Multi Embeds (html)
##### Prerequisites
Before implementing the multi-embed setup, ensure you have:
1. Valid Genuin API credentials
2. Unique embed IDs for each widget instance
3. Access to the Genuin SDK
The multi-embed approach requires separate containers for each widget instance. Each container
must have unique identifiers and proper data attributes.
**Note:**
1. Ensure each container has a unique `id` attribute
2. The multi-embed approach also works for single embeds, so you can use it for both cases if you prefer a unified setup.
```html Embed_With_Multi_Embeds theme={null}
```
#### Embed With Contextual Feed (html)
Only include the parameters necessary to retrieve a contextual feed.
```html Embed_With_Multiple_Embeds theme={null}
```
```html Embed_With_Single_Embeds theme={null}
```
### Angular Structure
**Note** : If you prefer not to inject the script dynamically using JavaScript, you can also include it directly in your HTML using a script tag.
However, before initializing or interacting with the embedded element, ensure the
following:
1. The script has finished loading successfully.
2. The target DOM element is present on the page.
#### Single Embeds (Angular)
The following code snippet has been developed using Angular version 16.
```typescript Embed_Without_AutoLogin theme={null}
// src/app/genuin-sdk.component.ts
import {
Component,
AfterViewInit,
OnDestroy,
ViewEncapsulation,
} from "@angular/core";
@Component({
selector: "genuin-sdk",
standalone: true,
template: `
`,
encapsulation: ViewEncapsulation.None,
})
export class GenuinSdkComponent implements AfterViewInit, OnDestroy {
private scriptElement: HTMLScriptElement | null = null;
private genuinInitialized = false;
ngAfterViewInit() {
(window as any).onGenuinReady = (genuin: any) => {
if (!this.genuinInitialized) {
genuin.initialize({
embed_id: "Your Embed ID",
api_key: "Your API Key",
});
this.genuinInitialized = true;
}
};
this.scriptElement = document.createElement("script");
this.scriptElement.src = "https://media.begenuin.com/sdk/gen_sdk.min.js";
this.scriptElement.async = true;
document.body.appendChild(this.scriptElement);
}
ngOnDestroy() {
if (this.scriptElement) {
document.body.removeChild(this.scriptElement);
}
delete (window as any).onGenuinReady;
}
}
// src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { GenuinSdkComponent } from "./genuin-sdk.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, GenuinSdkComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
```typescript Embed_With_AutoLogin theme={null}
// src/app/genuin-sdk.component.ts
import {
Component,
AfterViewInit,
OnDestroy,
ViewEncapsulation,
} from "@angular/core";
@Component({
selector: "genuin-sdk",
standalone: true,
template: `
`,
encapsulation: ViewEncapsulation.None,
})
export class GenuinSdkComponent implements AfterViewInit, OnDestroy {
private scriptElement: HTMLScriptElement | null = null;
private genuinInitialized = false;
ngAfterViewInit() {
(window as any).onGenuinReady = (genuin: any) => {
if (!this.genuinInitialized) {
genuin.initialize({
embed_id: "Your Embed ID",
api_key: "Your API Key",
token: "Your Authentication Token",
params: {
name: "Name",
mobile: "Contact Number",
email: "Email ID",
nickname: "Nickname",
profileImage: "Profile Image URL",
},
// Pass the token only if you want to enable autologin functionality.
// The token value can be a unique identifier (such as a session token) or an email address, depending on your authentication flow.
// To bypass autologin, provide the token along with any additional required parameters.
// Include only the parameters necessary for your use case.
});
this.genuinInitialized = true;
}
};
this.scriptElement = document.createElement("script");
this.scriptElement.src = "https://media.begenuin.com/sdk/gen_sdk.min.js";
this.scriptElement.async = true;
document.body.appendChild(this.scriptElement);
}
ngOnDestroy() {
if (this.scriptElement) {
document.body.removeChild(this.scriptElement);
}
delete (window as any).onGenuinReady;
}
}
// src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { GenuinSdkComponent } from "./genuin-sdk.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, GenuinSdkComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
#### Embed With Multi Embeds (Angular)
##### Prerequisites
Before implementing the multi-embed setup, ensure you have:
1. Valid Genuin API credentials
2. Unique embed IDs for each widget instance
3. Access to the Genuin SDK
The multi-embed approach requires separate containers for each widget instance. Each container
must have unique identifiers and proper data attributes.
**Note:**
1. Ensure each container has a unique `id` attribute
2. The multi-embed approach also works for single embeds, so you can use it for both cases if you prefer a unified setup.
```typescript Embed_With_Multi_Embeds theme={null}
// src/app/genuin-sdk.component.ts
import {
Component,
AfterViewInit,
OnDestroy,
ViewEncapsulation,
} from "@angular/core";
@Component({
selector: "genuin-sdk",
standalone: true,
template: `
`,
encapsulation: ViewEncapsulation.None,
})
export class GenuinSdkComponent implements AfterViewInit, OnDestroy {
private scriptElement: HTMLScriptElement | null = null;
private genuinInitialized = false;
ngAfterViewInit() {
(window as any).onGenuinReady = (genuin: any) => {
if (!this.genuinInitialized) {
genuin.initialize({});
this.genuinInitialized = true;
}
};
this.scriptElement = document.createElement("script");
this.scriptElement.src = "https://media.begenuin.com/sdk/gen_sdk.min.js";
this.scriptElement.async = true;
document.body.appendChild(this.scriptElement);
}
ngOnDestroy() {
if (this.scriptElement) {
document.body.removeChild(this.scriptElement);
}
delete (window as any).onGenuinReady;
}
}
// src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { GenuinSdkComponent } from "./genuin-sdk.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, GenuinSdkComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
#### Embed With Contextual Feed (Angular)
Only include the parameters necessary to retrieve a contextual feed.
```typescript Contextual_Feed theme={null}
// src/app/genuin-sdk.component.ts
import {
Component,
AfterViewInit,
OnDestroy,
ViewEncapsulation,
} from "@angular/core";
@Component({
selector: "genuin-sdk",
standalone: true,
template: `
`,
encapsulation: ViewEncapsulation.None,
})
export class GenuinSdkComponent implements AfterViewInit, OnDestroy {
private scriptElement: HTMLScriptElement | null = null;
private genuinInitialized = false;
ngAfterViewInit() {
(window as any).onGenuinReady = (genuin: any) => {
if (!this.genuinInitialized) {
genuin.initialize({});
this.genuinInitialized = true;
}
};
this.scriptElement = document.createElement("script");
this.scriptElement.src = "https://media.begenuin.com/sdk/gen_sdk.min.js";
this.scriptElement.async = true;
document.body.appendChild(this.scriptElement);
}
ngOnDestroy() {
if (this.scriptElement) {
document.body.removeChild(this.scriptElement);
}
delete (window as any).onGenuinReady;
}
}
// src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { GenuinSdkComponent } from "./genuin-sdk.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, GenuinSdkComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
```typescript Single_Embeds theme={null}
// src/app/genuin-sdk.component.ts
import {
Component,
AfterViewInit,
OnDestroy,
ViewEncapsulation,
} from "@angular/core";
@Component({
selector: "genuin-sdk",
standalone: true,
template: `
`,
encapsulation: ViewEncapsulation.None,
})
export class GenuinSdkComponent implements AfterViewInit, OnDestroy {
private scriptElement: HTMLScriptElement | null = null;
private genuinInitialized = false;
ngAfterViewInit() {
(window as any).onGenuinReady = (genuin: any) => {
if (!this.genuinInitialized) {
genuin.initialize({
embed_id: "Your Embed Id",
api_key: "Your Api key",
contextualParams: {
page_context: "e.g AI, LLM, Machine Learning, MLOPS, Robotics",
geo: {
lat: 50.432, // latitude of location in number , e.g. 50.432,
long: 122.4194, // longitude of location in number , e.g. 122.4194,
},
},
});
this.genuinInitialized = true;
}
};
this.scriptElement = document.createElement("script");
this.scriptElement.src = "https://media.begenuin.com/sdk/gen_sdk.min.js";
this.scriptElement.async = true;
document.body.appendChild(this.scriptElement);
}
ngOnDestroy() {
if (this.scriptElement) {
document.body.removeChild(this.scriptElement);
}
delete (window as any).onGenuinReady;
}
}
// src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { GenuinSdkComponent } from "./genuin-sdk.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, GenuinSdkComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
### React Structure
**Note** : If you prefer not to inject the script dynamically using JavaScript, you can also include it directly in your HTML using a script tag.
However, before initializing or interacting with the embedded element, ensure the
following:
1. The script has finished loading successfully.
2. The target DOM element is present on the page.
#### Single embeds (React)
```jsx Embed_Without_AutoLogin theme={null}
// src/App.tsx
import { useEffect, useRef } from "react";
export default function App() {
const initializedRef = useRef(false);
useEffect(() => {
if (initializedRef.current) return;
initializedRef.current = true;
const scriptSrc = "https://media.begenuin.com/sdk/gen_sdk.min.js";
const script = document.createElement("script");
script.src = scriptSrc;
script.async = true;
script.onload = () => {
if (window.genuin) {
window.genuin.init({});
}
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
);
}
```
```jsx Embed_With_AutoLogin theme={null}
// src/App.tsx
import { useEffect, useRef } from "react";
export default function App() {
const initializedRef = useRef(false);
useEffect(() => {
if (initializedRef.current) return;
initializedRef.current = true;
const scriptSrc = "https://media.begenuin.com/sdk/gen_sdk.min.js";
const script = document.createElement("script");
script.src = scriptSrc;
script.async = true;
script.onload = () => {
if (window.genuin) {
window.genuin.init({
token: "Your Authentication Token",
params: {
name: "Name",
mobile: "Contact Number",
email: "Email ID",
nickname: "Nickname",
profileImage: "Profile Image URL",
},
// Pass the token only if you want to enable autologin functionality.
// The token value can be a unique identifier (such as a session token) or an email address, depending on your authentication flow.
// To bypass autologin, provide the token along with any additional required parameters.
// Include only the parameters necessary for your use case.
});
}
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
);
}
```
#### Embed With Multi Embeds (React)
##### Prerequisites
Before implementing the multi-embed setup, ensure you have:
1. Valid Genuin API credentials
2. Unique embed IDs for each widget instance
3. Access to the Genuin SDK
The multi-embed approach requires separate containers for each widget instance. Each container
must have unique identifiers and proper data attributes.
**Note:**
1. Ensure each container has a unique `id` attribute
2. The multi-embed approach also works for single embeds, so you can use it for both cases if you prefer a unified setup.
```jsx Embed_With_Multi_Embeds theme={null}
// /src/App.tsx
import { useEffect, useRef } from "react";
export default function App() {
const initializedRef = useRef(false);
useEffect(() => {
if (initializedRef.current) return;
initializedRef.current = true;
const scriptSrc = "https://media.begenuin.com/sdk/gen_sdk.min.js";
const script = document.createElement("script");
script.src = scriptSrc;
script.async = true;
script.onload = () => {
if (window.genuin) {
window.genuin.init({});
}
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
<>
);
}
function FirstComponent() {
return (
);
}
function SecondComponent() {
return (
);
}
```
#### Embed With Contextual Feed (React)
Only include the parameters necessary to retrieve a contextual feed.
```jsx Contextual_Feed theme={null}
// src/App.tsx
import { useEffect, useRef } from "react";
export default function App() {
const initializedRef = useRef(false);
useEffect(() => {
if (initializedRef.current) return;
initializedRef.current = true;
const scriptSrc = "https://media.begenuin.com/sdk/gen_sdk.min.js";
const script = document.createElement("script");
script.src = scriptSrc;
script.async = true;
script.onload = () => {
if (window.genuin) {
window.genuin.init({});
}
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
<>
);
}
function FirstComponent() {
return (
);
}
function SecondComponent() {
return (
);
}
```
### NextJs Structure
#### Single Embeds (NextJs)
```typescript Embed_Without_AutoLogin theme={null}
// app/GenuinSDK.tsx
"use client";
import Script from "next/script";
import { useEffect } from "react";
export default function GenuinSDK() {
useEffect(() => {
window.genuin.init({});
}, []);
return (
<>
);
}
// app/page.tsx
'use client';
import GenuinSDK from './GenuinSDK';
export default function Home() {
return (
<>
);
}
```
```typescript Embed_With_AutoLogin theme={null}
// app/GenuinSDK.tsx
"use client";
import Script from "next/script";
import { useEffect } from "react";
export default function GenuinSDK() {
useEffect(() => {
window.genuin.init({
token: "Your Authentication Token",
params: {
name: "Name",
mobile: "Contact Number",
email: "Email ID",
nickname: "Nickname",
profileImage: "Profile Image URL",
},
// Pass the token only if you want to enable autologin functionality.
// The token value can be a unique identifier (such as a session token) or an email address, depending on your authentication flow.
// To bypass autologin, provide the token along with any additional required parameters.
// Include only the parameters necessary for your use case.
});
}, []);
return (
<>
);
}
// app/page.tsx
("use client");
import GenuinSDK from "./GenuinSDK";
export default function Home() {
return (
<>
);
}
```
#### Embed With Multi Embeds (NextJs)
##### Prerequisites
Before implementing the multi-embed setup, ensure you have:
1. Valid Genuin API credentials
2. Unique embed IDs for each widget instance
3. Access to the Genuin SDK
The multi-embed approach requires separate containers for each widget instance. Each container
must have unique identifiers and proper data attributes.
**Note:**
1. Ensure each container has a unique `id` attribute
2. The multi-embed approach also works for single embeds, so you can use it for both cases if you prefer a unified setup.
```typescript Embed_With_Multi_Embeds theme={null}
// app/GenuinSDK.tsx
"use client";
import Script from "next/script";
import { useEffect } from "react";
export default function GenuinSDK() {
useEffect(() => {
window.genuin.init({});
}, []);
return (
<>
);
}
// app/page.tsx
"use client";
import GenuinSDK from "./GenuinSDK";
export default function Home() {
return (
<>
);
}
```
#### Embed With Contextual Feed (NextJs)
Only include the parameters necessary to retrieve a contextual feed.
```typescript Contextual_Feed theme={null}
// app/GenuinSDK.tsx
"use client";
import Script from "next/script";
import { useEffect } from "react";
export default function GenuinSDK() {
useEffect(() => {
window.genuin.init({});
}, []);
return (
<>
);
}
// app/page.tsx
"use client";
import GenuinSDK from "./GenuinSDK";
export default function Home() {
return (
<>
);
}
```
### Customisation
#### Font Family
To apply your application's custom font styles to the Genuin Web SDK, add the following style block inside the head tag:
**Note:** Please ensure that your custom font is correctly loaded on the page. If the specified font is not available, the SDK will automatically fall back to the default system font.
```html theme={null}
```
#### Direct Video Page Redirection
You can use the video parameter during SDK initialization—alongside other parameters—to directly open a specific video page instead of loading the default feed.
```html Single_Embeds theme={null}
window.genuin.init({
video : "VIDEO_SLUG e.g. excerpt-from-preserving-the-vasa-httpsyoutubethbk"
})
```
```html Multi_Embeds theme={null}
```
### SDK API's
#### Auth Callback
The SDK provides a mechanism to optionally override the default authentication behavior by exposing a `genuinAuth` callback on the global `window` object.
This is particularly useful when you want full control over how your application handles login or other auth-related actions — such as redirecting to a custom login page or integrating with an existing auth provider.
```html theme={null}
window.genuinAuth = (data) => {
// You can trigger your own login mechanism
// Option 1: Use a custom redirect function
redirectToLogin();
// Option 2: Directly set the login URL
// window.location.href = `URL`;
};
```
##### Auth Callback Parameters
The auth callback passes certain parameters that allow you to perform necessary actions after a user is successfully logged in or redirected — depending on the flow you’ve implemented.
For example, it includes returnQueryParams, which is a string containing query parameters that indicate the context in which the auth callback was triggered.
This helps determine what action should be taken.
Example: If a user is trying to comment on a post and the auth callback is triggered, returnQueryParams might include action=comment.
You can extract this action parameter and pass it to the embed to perform the corresponding operation.
**Note** : To use this, you must have the genuin auth callback implemented, the user must be logged in, and you must pass the video slug as well.
```html theme={null}
window.genuinAuth = (data) => {
// Trigger your login mechanism here
// Option 1: Use a custom redirect function
redirectToLogin();
// Option 2: Directly redirect to login URL
// window.location.href = `LOGIN_URL`;
// data.returnQueryParams contains the query parameters
const params = new URLSearchParams(data.returnQueryParams);
const action = params.get("action");
// Pass the above `action` value to the embeds below.
// There are two ways to pass this: via init or via data-attribute
};
window.genuin.init({
action: 'Pass action to perform, e.g., comment',
video: 'VIDEO_SLUG'
});
```
#### Dynamically Update SDK Context
You can use the update() method to dynamically change the SDK’s contextual parameters at any point after initialization. This is especially useful when the page content changes based on user interaction (e.g., clicking a new topic, navigating to a different section) and you want the feed to reflect the new context without reinitializing the SDK.
```html Single_Embeds theme={null}
window.genuin.update({
contextualParams : {
page_context: "e.g AI, LLM, Machine Learning, MLOPS, Robotics",
geo: {
lat: 50.432, // latitude of location in number , e.g. 50.432,
long: 122.4194, // longitude of location in number , e.g. 122.4194,
},
}
})
```
```html Multi_Embeds theme={null}
// Pass the element ID along with the contextual parameters to update the SDK's contextual parameters for that specific element.
window.genuin.update({
id : "gen-sdk-1",
contextualParams : {
page_context: "e.g AI, LLM, Machine Learning, MLOPS, Robotics",
geo: {
lat: 50.432, // latitude of location in number , e.g. 50.432,
long: 122.4194, // longitude of location in number , e.g. 122.4194,
},
}
})
```
## Configuration Parameters
| **Setting** | **Description** |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| embed\_id | The id which you want to embed in your web SDK |
| api\_key | Unique API key which will be used to authenticate the embed |
| token | Your autologin Token which will be used for authenticate |
| page\_context | The content or context of your webpage, used to render relevant embed feeds. This can include comma-separated keywords or search parameters (e.g., "AI", "tech news", etc.). |
| lat | Latitude of Location which will be used to retrieve the feed based on Location |
| long | Longitude of location which will be used to retrieve the feed based on Location |
| name | Full name of the user for automatic login (Autologin) |
| mobile | Mobile number or contact information of the user for authentication |
| email | Email address of the user for authentication and communication |
| nickname | Display nickname or username for the autologged user |
| profileImage | URL of the user's profile image to personalize the embedded experience |