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

​
Code-block to Embed Community:

<!-- Container for embedding the Genuin community widget 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 without waiting 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',
  })
</script>

​
Embed With Multi Embeds

​
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

​
Implementation

​
HTML Structure

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.

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

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="context of page"
  data-lat="latitute 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="context of page"
  data-lat="latitute 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>
SettingDescription
embed_idThe id which you want to embed in your web SDK
api_keyUnique API key which will be used to authenticate the embed
tokenYour SSO Token which will be used for authenticate
page_contextThe 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.).
latLalitude of Location which will be used to retrive the feed based on Location
longLongitude of location which will be used to retrive the feed based on Location