Website Webcomponent
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
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 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
Last updated