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

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 (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>

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`;
};

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 SSO 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

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

Auth Callback

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

​Auth Callback

​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)

Prerequisites

Embed With Contextual Feed (NextJs)

Customisation

Font Family

Auth Callback

Configuration Parameters