Website Web Component

This tutorial outlines the steps to integrate the Blockbrain web component into a website, either in public or private mode, ensuring proper setup and authentication.

Key Steps

Step 1: Choose Integration Mode

Private Mode

Public Mode

• Decide between two integration modes:

  • Public Mode: No authentication required; all users can chat with the interface.

  • Private Mode: Requires user authentication; users must log in to access their conversation history.

• Ping your Blockbrain Key Account Manager that you want to add a webcomponent to your website.

Step 2: Prepare Your Website

• Add the necessary header script to your website.

<script 
  type="module"
  src="https://assets.theblockbrain.io/scripts/blocky-chat/blocky-chat.bundle.js"
  async
></script>

• Ensure you have the following information ready:

  • Organization ID: Obtain from your Blockbrain key account or team member.

  • Issuer URL: This will be your company Blockbrain URL (e.g. https://demo.kb.theblockbrain.ai/).

  • Webcomponent Bot UID: The Id of a bot mapping created in the admin section of your Blockbrain. Needs to be added by an admin.

Step 3: Configure the Web Component

<blockbrain-main 
  orgId="your-org-id"
  issuer="https://your-blockbrain-domain.com" 
  uid="your-webcomponent-bot-uid" 
  userUid="optional-user-id">
</blockbrain-main>

• Set up the web component with the following parameters:

  • Organization ID: Insert your organization ID - retrieved from Blockbrain team.

  • Issuer: Insert the issuer URL - https://your-blockbrain-domain.com.

  • UID: Webcomponent Bot UID - e.g., CompanyGPT.

  • User UID: Not relevant for private and restricted bots, optional for public bots.

Private Mode

Step 4: Setup Authentication

<blockbrain-main 
  orgId="your-org-id"
  issuer="https://your-blockbrain-domain.com" 
  uid="your-webcomponent-bot-uid" 
</blockbrain-main>

• If using private mode, ensure the issuer is included in the configuration.

• Remove the userUid, that is only for public mode.

• Test the login functionality:

  • Click the login button to trigger the OAuth authentication.

  • Verify that you can access your conversation history.

Public Mode

Step 5: Use Public Mode

<blockbrain-main 
  orgId="your-org-id"
  uid="your-webcomponent-bot-uid" 
  userUid="optional-user-id">
</blockbrain-main>

• To switch to public mode, remove the issuer from the configuration.

• Ensure the organization ID and company UID are still included.

• Remove the userUid if not needed, it can be used to distinguish users.

• Test the public chat functionality to confirm it works without authentication.

Video