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:

Identify the location on your website where you want to embed the community widget.
Paste the provided code block into the desired location in your website’s HTML markup.
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)

<div
  id="gen-sdk"
  style="max-width: 1080px; height: 720px; display: flex;"
></div>

<!-- SDK JavaScript module -->

<script
  type="module"
  src="https://media.begenuin.com/sdk/gen_sdk.min.js"
></script>

<script>
  // Callback function to automatically initialize the Genuin SDK when ready
  window.onGenuinReady = (genuin) => {
    genuin.initialize({
      embed_id: "Your Embed ID",
      api_key: "Your API Key",
    });
  };

  // Alternative manual initialization (for frameworks like React)
  window.genuin.init({
    embed_id: "Your Embed ID",
    api_key: "Your API Key",
  });
</script>

Embed With Multi Embeds (html)

Prerequisites

Before implementing the multi-embed setup, ensure you have:

Valid Genuin API credentials
Unique embed IDs for each widget instance
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:

Ensure each container has a unique id attribute
The multi-embed approach also works for single embeds, so you can use it for both cases if you prefer a unified setup.

<!-- Containers for embedding the Genuin community widget with Multi Embeds -->

<!-- First Container -->

<div
  data-embed-id="Your Embed Id"
  data-api-key="Your Api Key"
  id="gen-sdk-1"
  class="gen-sdk-class"
  style="width: 100%; height: 100vh"
></div>

<!-- Second Container -->

<div
  data-embed-id="Your Embed Id"
  data-api-key="Your Api Key"
  id="gen-sdk-2"
  class="gen-sdk-class"
  style="width: 100%; height: 100vh"
></div>

<!-- SDK JavaScript module -->

<script
  type="module"
  src="https://media.begenuin.com/sdk/gen_sdk.min.js"
></script>

<!-- Use Any of the below initialization methods with Multi Embeds -->

<script>
  // Use This initialization methods if you are using frontend library/framework e.g. React.
  window.genuin.init({});

  // Alternative manual initialization with Multi Embeds for SDK callback
  window.onGenuinReady = (genuin) => {
    genuin.initialize({});
  };
</script>

Embed With Contextual Feed (html)

Only include the parameters necessary to retrieve a contextual feed.

<!-- Example of multiple embeds with contextual feeds.Use your own embed_id and api_key, and ensure each embed_id is unique. Be careful to assign a unique id to each HTML element, as shown below. -->

<!-- Containers for embedding the Genuin community widget with Multi Embeds Empowering Contextual Feeds -->

<!-- First Container -->
<div
  data-embed-id="Your Embed Id"
  data-api-key="Your Api Key"
  data-page-context="e.g AI, LLM, Machine Learning, MLOPS, Robotics"
  data-lat="latitude of location"
  data-long="longitude of location"
  id="unique identifier"
  class="gen-sdk-class"
  style="width: 100%; height: 100vh"
></div>

<!-- Second Container -->
<div
  data-embed-id="Your Embed Id"
  data-api-key="Your Api Key"
  data-page-context="e.g AI, LLM, Machine Learning, MLOPS, Robotics"
  data-lat="latitude of location"
  data-long="longitude of location"
  id="unique identifier"
  class="gen-sdk-class"
  style="width: 100%; height: 100vh"
></div>

<!-- SDK JavaScript module -->
<script
  type="module"
  src="https://media.begenuin.com/sdk/gen_sdk.min.js"
></script>

<!-- Use Any of the below initialization methods with Multi Embeds -->
<script>
  // Use This initialization methods if you are using frontend library/framework e.g. React.
  window.genuin.init({});

  // Alternative manual initialization with Multi Embeds for SDK callback
  window.onGenuinReady = (genuin) => {
    genuin.initialize({});
  };
</script>

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:

The script has finished loading successfully.
The target DOM element is present on the page.

Single Embeds (Angular)

The following code snippet has been developed using Angular version 16.

// src/app/genuin-sdk.component.ts
import {
  Component,
  AfterViewInit,
  OnDestroy,
  ViewEncapsulation,
} from "@angular/core";

@Component({
  selector: "genuin-sdk",
  standalone: true,
  template: `
    <div
      id="gen-sdk"
      class="gen-sdk-class"
      style="width: 1080px; height: 800px; background: #efefef"
    ></div>
  `,
  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 {}

Embed With Multi Embeds (Angular)

Prerequisites

Before implementing the multi-embed setup, ensure you have:

Valid Genuin API credentials
Unique embed IDs for each widget instance
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:

Ensure each container has a unique id attribute
The multi-embed approach also works for single embeds, so you can use it for both cases if you prefer a unified setup.

// src/app/genuin-sdk.component.ts
import {
  Component,
  AfterViewInit,
  OnDestroy,
  ViewEncapsulation,
} from "@angular/core";

@Component({
  selector: "genuin-sdk",
  standalone: true,
  template: `
    <div
      id="gen-sdk-1"
      class="gen-sdk-class"
      data-embed-id="Your Embed Id"
      data-api-key="Your Api Key"
      style="width: 1080px; height: 800px; background: #efefef"
    ></div>
    <div
      id="gen-sdk-2"
      class="gen-sdk-class"
      data-embed-id="Your Embed Id"
      data-api-key="Your Api Key"
      style="width: 1080px; height: 800px; background: #efefef"
    ></div>
  `,
  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.

// src/app/genuin-sdk.component.ts
import {
  Component,
  AfterViewInit,
  OnDestroy,
  ViewEncapsulation,
} from "@angular/core";

@Component({
  selector: "genuin-sdk",
  standalone: true,
  template: `
    <div
      id="gen-sdk-1"
      class="gen-sdk-class"
      data-embed-id="Your Embed Id"
      data-api-key="Your Api Key"
      data-page-context="e.g AI, LLM, Machine Learning, MLOPS, Robotics"
      data-lat="latitude of location"
      data-long="longitude of location"
      style="width: 1080px; height: 800px; background: #efefef"
    ></div>
    <div
      id="gen-sdk-2"
      class="gen-sdk-class"
      data-embed-id="Your Embed Id"
      data-api-key="Your Api Key"
      data-page-context="e.g AI, LLM, Machine Learning, MLOPS, Robotics"
      data-lat="latitude of location"
      data-long="longitude of location"
      style="width: 1080px; height: 800px; background: #efefef"
    ></div>
  `,
  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 {}

React Structure

The script has finished loading successfully.
The target DOM element is present on the page.

Single embeds (React)

// 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 (
    <div
      id="gen-sdk"
      className="gen-sdk-class"
      style={{ width: "786px", height: "250px" }}
      data-embed-id="Your Embed ID"
      data-api-key="Your API Key"
    />
  );
}

Embed With Multi Embeds (React)

Prerequisites

Before implementing the multi-embed setup, ensure you have:

Valid Genuin API credentials
Unique embed IDs for each widget instance
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:

Ensure each container has a unique id attribute
The multi-embed approach also works for single embeds, so you can use it for both cases if you prefer a unified setup.

// /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 (
    <>
      <FirstComponent />
      <SecondComponent />
    </>
  );
}

function FirstComponent() {
  return (
    <div
      id="gen-sdk-1"
      className="gen-sdk-class"
      style={{ width: "786px", height: "250px" }}
      data-embed-id="Your Embed Id"
      data-api-key="Your Api Key"
    />
  );
}

function SecondComponent() {
  return (
    <div
      id="gen-sdk-2"
      className="gen-sdk-class"
      style={{ width: "786px", height: "250px" }}
      data-embed-id="Your Embed Id"
      data-api-key="Your Api Key"
    />
  );
}

Embed With Contextual Feed (React)

Only include the parameters necessary to retrieve a contextual feed.

// 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 (
    <>
      <FirstComponent />
      <SecondComponent />
    </>
  );
}

function FirstComponent() {
  return (
    <div
      id="gen-sdk-1"
      className="gen-sdk-class"
      style={{ width: "786px", height: "250px" }}
      data-embed-id="Your Embed Id"
      data-api-key="Your Api Key"
      data-page-context="e.g AI, LLM, Machine Learning, MLOPS, Robotics"
      data-lat="latitude of location"
      data-long="longitude of location"
    />
  );
}

function SecondComponent() {
  return (
    <div
      id="gen-sdk-2"
      className="gen-sdk-class"
      style={{ width: "786px", height: "250px" }}
      data-embed-id="Your Embed Id"
      data-api-key="Your Api Key"
      data-page-context="e.g AI, LLM, Machine Learning, MLOPS, Robotics"
      data-lat="latitude of location"
      data-long="longitude of location"
    />
  );
}

NextJs Structure

Single Embeds (NextJs)

// app/GenuinSDK.tsx
"use client";

import Script from "next/script";
import { useEffect } from "react";

export default function GenuinSDK() {
  useEffect(() => {
    window.genuin.init({});
  }, []);
  return (
    <>
      <Script
        src="https://media.begenuin.com/sdk/gen_sdk.min.js"
        strategy="beforeInteractive"
      />
      <div
        id="gen-sdk"
        className="gen-sdk-class"
        data-embed-id="Your Embed Id"
        style={{ width: "786px", height: "250px" }}
        data-api-key="Your Api key"
      />
    </>
  );
}

// app/page.tsx
'use client';
import GenuinSDK from './GenuinSDK';

export default function Home() {
  return (
    <>
      <GenuinSDK />
    </>
  );
}

Embed With Multi Embeds (NextJs)

Prerequisites

Before implementing the multi-embed setup, ensure you have:

Valid Genuin API credentials
Unique embed IDs for each widget instance
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:

Ensure each container has a unique id attribute
The multi-embed approach also works for single embeds, so you can use it for both cases if you prefer a unified setup.

// app/GenuinSDK.tsx
"use client";

import Script from "next/script";
import { useEffect } from "react";

export default function GenuinSDK() {
  useEffect(() => {
    window.genuin.init({});
  }, []);
  return (
    <>
      <Script
        src="https://media.begenuin.com/sdk/gen_sdk.min.js"
        strategy="beforeInteractive"
      />
      <div
        id="gen-sdk-1"
        className="gen-sdk-class"
        data-embed-id="Your Embed Id"
        style={{ width: "786px", height: "250px" }}
        data-api-key="Your Api key"
      />
      <div
        id="gen-sdk-2"
        className="gen-sdk-class"
        style={{ width: "786px", height: "250px" }}
        data-embed-id="Your Embed Id"
        data-api-key="Your Api key"
      />
    </>
  );
}

// app/page.tsx
"use client";
import GenuinSDK from "./GenuinSDK";

export default function Home() {
  return (
    <>
      <GenuinSDK />
    </>
  );
}

Embed With Contextual Feed (NextJs)

Only include the parameters necessary to retrieve a contextual feed.

// app/GenuinSDK.tsx
"use client";

import Script from "next/script";
import { useEffect } from "react";

export default function GenuinSDK() {
  useEffect(() => {
    window.genuin.init({});
  }, []);
  return (
    <>
      <Script
        src="https://media.begenuin.com/sdk/gen_sdk.min.js"
        strategy="beforeInteractive"
      />
      <div
        id="gen-sdk-1"
        className="gen-sdk-class"
        data-embed-id="Your Embed Id"
        style={{ width: "786px", height: "250px" }}
        data-api-key="Your Api key"
        data-page-context="e.g AI, LLM, Machine Learning, MLOPS, Robotics"
        data-lat="latitude of location"
        data-long="longitude of location"
      />
      <div
        id="gen-sdk-2"
        className="gen-sdk-class"
        data-embed-id="Your Embed Id"
        style={{ width: "786px", height: "250px" }}
        data-api-key="Your Api key"
        data-page-context="e.g AI, LLM, Machine Learning, MLOPS, Robotics"
        data-lat="latitude of location"
        data-long="longitude of location"
      />
    </>
  );
}

// app/page.tsx
"use client";
import GenuinSDK from "./GenuinSDK";

export default function Home() {
  return (
    <>
      <GenuinSDK />
    </>
  );
}

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.

<style>
  .gen-sdk-class * {
    font-family: "Your Font Style", inherit !important;
  }
</style>

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.

window.genuin.init({
  video : "VIDEO_SLUG e.g. excerpt-from-preserving-the-vasa-httpsyoutubethbk"
})

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.

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.

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'
});

<div
  id="gen-sdk-1"
  class="gen-sdk-class"
  style="height: 390px; margin-top: 12px;"
  data-embed-id="Your Embed Id"
  data-api-key="Your API Key"
  data-action="e.g., comment"
  data-video="VIDEO_SLUG">
</div>

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.

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,
      },
    }
})

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

SDK Doc

API Doc

Guides

Engage Engine

Integration

Web SDK

Prerequisites

Steps to embed Brand Community:

Implementation

HTML Structure

Single Embeds (html)

Embed With Multi Embeds (html)

Prerequisites

Embed With Contextual Feed (html)

Angular Structure

Single Embeds (Angular)

Embed With Multi Embeds (Angular)

Prerequisites

Embed With Contextual Feed (Angular)

React Structure

Single embeds (React)

Embed With Multi Embeds (React)

Prerequisites

Embed With Contextual Feed (React)

NextJs Structure

Single Embeds (NextJs)

Embed With Multi Embeds (NextJs)

Prerequisites

Embed With Contextual Feed (NextJs)

Customisation

Font Family

Direct Video Page Redirection

SDK API’s

Auth Callback

Auth Callback Parameters

Dynamically Update SDK Context

Configuration Parameters

SDK Doc

API Doc

Guides

Engage Engine

Integration

​Prerequisites

​Steps to embed Brand Community:

​Implementation

​HTML Structure

​Single Embeds (html)

​Embed With Multi Embeds (html)

Prerequisites

​Embed With Contextual Feed (html)

​Angular Structure

​Single Embeds (Angular)

​Embed With Multi Embeds (Angular)

Prerequisites

​Embed With Contextual Feed (Angular)

​React Structure

​Single embeds (React)

​Embed With Multi Embeds (React)

Prerequisites

​Embed With Contextual Feed (React)

​NextJs Structure

​Single Embeds (NextJs)

​Embed With Multi Embeds (NextJs)

Prerequisites

​Embed With Contextual Feed (NextJs)

​Customisation

​Font Family

​Direct Video Page Redirection

​SDK API’s

​Auth Callback

Auth Callback Parameters

​Dynamically Update SDK Context

​Configuration Parameters

Prerequisites

Steps to embed Brand Community:

Implementation

HTML Structure

Single Embeds (html)

Embed With Multi Embeds (html)

Embed With Contextual Feed (html)

Angular Structure

Single Embeds (Angular)

Embed With Multi Embeds (Angular)

Embed With Contextual Feed (Angular)

React Structure

Single embeds (React)

Embed With Multi Embeds (React)

Embed With Contextual Feed (React)

NextJs Structure

Single Embeds (NextJs)

Embed With Multi Embeds (NextJs)

Embed With Contextual Feed (NextJs)

Customisation

Font Family

Direct Video Page Redirection

SDK API’s

Auth Callback

Dynamically Update SDK Context

Configuration Parameters