# Website Web Component ## 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.** ``` ``` * 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. ). * **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 - . * **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 {% embed url="" %}