How do you embed and configure the Genuin Web SDK on your website?

Who is this for and why it matters

Use the Genuin Web SDK when you want to embed your Community Media Network (communities, groups, and brand feed) directly into your website.

This matters because:

It enables on-site community experiences without redirecting users
It drives engagement, retention, and watch-time on your owned platforms
It allows you to fully control UI, context, and personalization

If you're building a Community Media Network on your own website, this SDK is your core integration layer.

What does the Genuin Web SDK do?

The Genuin Web SDK allows you to:

Embed communities, groups, and video feeds
Enable interactive video experiences
Personalize content using contextual signals (topic, location, etc.)
Integrate authentication and user identity

Prerequisites

Before implementing the SDK:

Genuin will provide you with a community under a subdomain - website.begenuin.com
You can manage it via the Brand Control Center

Steps to embed Brand Community

To integrate your Brand community onto your website using the Genuin Web SDK, follow these steps:

Select the Placement: Determine the specific area on your website where you wish the community widget to appear.
Insert the Code: Paste the provided embed code block into the HTML markup of your website at the location identified in step 1.
Customize Dimensions (Optional): Modify the height and width values within the embed code block to match your website's design specifications.

Implementation

HTML Structure

Single Embeds (html)

Embed_Without_AutoLogin

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

<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 with AutoLogin when ready
  window.onGenuinReady = (genuin) => {
    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",
      },
    });
  };

  // Alternative manual initialization (for frameworks like React)
  window.genuin.init({
    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.
</script>

Embed With Multi Embeds (html)

Prerequisites

Valid Genuin API credentials
Unique embed IDs
SDK access

Note:

Ensure each container has a unique id
Works for both single and multi embeds

Embed_With_Multi_Embeds

<!-- 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 required parameters.

Embed_With_Multiple_Embeds

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

Embed_With_Single_Embeds

<!-- One embeds with contextual feed , use your embed_id and api_key, and embed_id must be unique-->

<!-- Container for embedding the Genuin community widget with Multi Embeds Empowering Contextual Feeds -->
<div
  id="gen-sdk"
  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 -->
<script>
  window.onGenuinReady = (genuin) => {
    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,
        },
      },
    });
  };

  // Alternative manual initialization with Multi Embeds for SDK callback
  // Use This initialization methods if you are using frontend library/framework e.g. React.
  window.genuin.init({
    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,
      },
    },
  });
</script>

Angular Structure

You can include the script directly in your HTML using a standard <script> tag if you prefer not to inject it dynamically with JavaScript.

Regardless of your injection method, before you initialize the embedded element or begin to interact with it, you must confirm two things:

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

Single Embeds (Angular)

This code snippet was created using Angular 16.

Embed_Without_AutoLogin

// 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_AutoLogin

// 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",
          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 {}

Multi-Embed Configuration (Angular)

The multi-embed method necessitates a separate container for every widget instance, each with a unique identifier and the correct data attributes. This approach is also suitable for single embeds, allowing for a unified setup if preferred.

Prerequisites:

Before setting up the multi-embed configuration, you must have:

Valid Genuin API credentials.
Unique embed IDs for each widget instance.
Access to the Genuin SDK.

Important Notes: Ensure each container element has a unique id attribute.

Embed_With_Multi_Embeds

// 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 {}

Embedding for a Contextual Feed (Angular)

To retrieve a contextual feed, include only the necessary parameters when embedding the SDK.

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 {}

Single_Embeds

// 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"
      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",
          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

If you choose not to dynamically inject the script using JavaScript, you can include the script tag directly in your HTML.

Before you initialize the SDK or interact with the embedded element, you must ensure two conditions are met:

The script has loaded successfully.
The target DOM element exists on the page.

Single embeds (React)

Embed_Without_AutoLogin

// 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_AutoLogin

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

Multi-Embed Setup for React (Recommended)

This approach is versatile and can be used for both single and multiple Genuin widget instances on a page.

Prerequisites

To implement the multi-embed setup, you must have the following:

Valid Genuin API credentials.
Unique embed IDs for every widget you intend to display.
Access to the Genuin SDK.

Implementation Requirements

The multi-embed configuration necessitates:

A separate HTML container for each widget instance.
Each container must have a unique id attribute.
Proper configuration of data attributes on each container.

Embed_With_Multi_Embeds

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

To retrieve a contextual feed, include only the necessary parameters.

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)

Embed_Without_AutoLogin

// 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_AutoLogin

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

Embedding with Multiple Instances (Multi-Embeds) in Next.js

This section outlines the process for setting up multiple Genuin widgets (multi-embeds) on a single page, particularly within a Next.js environment.

Core Requirements (Prerequisites)

To successfully implement the multi-embed approach, you must have the following ready:

Valid Genuin API Credentials.
Access to the Genuin SDK.
Unique Embed IDs for every widget instance you intend to display.

Implementation Details

The multi-embed strategy necessitates a dedicated container element for each Genuin widget. Adherence to the following rules is crucial:

Unique Containers: Every widget must reside within its own distinct container element.
Unique Identifiers: Each container must have a unique id attribute.
Data Attributes: Ensure the proper Genuin data attributes are configured on each container.

Note on Usage:

This multi-embed methodology is versatile and can also be applied when you only need to embed a single widget. This allows for a consistent and unified implementation approach across your site.

Embed_With_Multi_Embeds

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

Embedding the Genuin Web SDK with a Contextual Feed (Next.js)

To embed the Web SDK using a contextual feed in a Next.js environment, only the essential parameters required to retrieve the contextual feed should be included.

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 ensure the Genuin Web SDK uses your application's custom font styles, insert the following style block within the <head> tag of your website:

Important: Verify that your custom font is properly loaded on the page. If the specified font is unavailable, the SDK will automatically revert to the default system font.

index.html

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

Direct Video Page Redirection

To directly load a specific video page instead of the default feed, include the video parameter during the SDK initialization, along with any other necessary parameters.

Single_Embeds

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

Multi_Embeds

<div
      data-embed-id="Your Embed ID"
      data-api-key="Your API Key"
      data-video-id="VIDEO_SLUG e.g. excerpt-from-preserving-the-vasa-httpsyoutubethbk"
      id="gen-sdk-1"
      class="gen-sdk-class"
      style="width: 100%; height: 300px">
  </div>
  <div
      data-embed-id="Your Embed ID"
      data-api-key="Your API Key"
      data-video-id="VIDEO_SLUG e.g. discover-how-strategic-capital-allocation-is"
      id="gen-sdk-2"
      class="gen-sdk-class"
      style="width: 100%; height: 300px">
  </div>

SDK API’s

Auth Callback

The SDK offers an optional way to customize the default authentication process by making a genuinAuth callback available on the global window object.

This feature is especially valuable when your application needs complete authority over handling login or other authentication tasks, such as directing users to a specific login page or integrating with an established authentication provider.

index.html

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 with Parameters

The authentication callback provides specific parameters crucial for post-login or redirection actions, depending on the implementation flow. Notably, it includes returnQueryParams, a string of query parameters that define the context of the callback. This context is essential for determining the subsequent action.

For instance, if a user initiates a comment and the auth callback is triggered, returnQueryParams may contain action=comment. You can extract this action parameter and use it to instruct the embed to perform the corresponding operation.

Prerequisites: To utilize this functionality, the Genuin authentication callback must be implemented, the user must be logged in, and the video slug must also be passed.

index.html

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

The update() method allows you to dynamically modify the SDK’s contextual parameters after initialization. This is particularly valuable for adapting the feed's content when user interactions change the page context (such as selecting a new topic or navigating a section), eliminating the need to reinitialize the SDK.

Single_Embeds

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

Multi_Embeds

// Pass the element ID along with the contextual parameters to update the SDK's contextual parameters for that specific element.
 <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: 300px">
  </div>
  <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: 300px">
  </div>

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

Best Practices

Always use unique embed IDs for multiple widgets
Ensure SDK script loads before initialization
Use contextual feeds for better personalization
Secure API keys and tokens
Optimize container dimensions for responsive design

What to do next

After embedding the SDK:

Configure contextual feeds for personalization
Enable authentication flows
Drive engagement via communities and groups
Integrate monetization and analytics