# Website Web-Komponente

Dieses Tutorial beschreibt die Schritte zur Integration der Blockbrain-Webkomponente in eine Website, entweder im öffentlichen oder privaten Modus, und gewährleistet dabei die ordnungsgemäße Einrichtung und Authentifizierung.

## Wichtige Schritte

### Schritt 1: Integrationsmodus auswählen

<figure><img src="https://1953849861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKR7aqzsy8sip47EPE8Qh%2Fuploads%2FKNd7wnVnAZdFK8VMLxVK%2Fimage.png?alt=media&#x26;token=fa83884b-dd20-436d-aa6d-f0a5f55f772c" alt="" width="375"><figcaption><p>Privater Modus</p></figcaption></figure>

<figure><img src="https://1953849861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKR7aqzsy8sip47EPE8Qh%2Fuploads%2FzvBZYZIs0b8GsSCJzjE5%2Fimage.png?alt=media&#x26;token=ce6a6ee4-106f-4dfa-8840-a26c6c0d74c9" alt="" width="375"><figcaption><p>Öffentlicher Modus</p></figcaption></figure>

* Entscheiden Sie sich zwischen zwei Integrationsmodi:
  * **Privater Modus:** Benutzer-Authentifizierung erforderlich; Benutzer müssen sich anmelden, um auf ihren Gesprächsverlauf zugreifen zu können.
  * **Öffentlicher Modus:** Keine Authentifizierung erforderlich; alle Benutzer können über die Schnittstelle chatten.
* **Teilen Sie Ihrem Blockbrain-Key-Account-Manager** mit, dass Sie eine Webkomponente zu Ihrer Website hinzufügen möchten.

### Schritt 2: Bereiten Sie Ihre Website vor

* **Fügen Sie das erforderliche Header-Skript zu Ihrer Website hinzu.**

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

* Halten Sie bitte die folgenden Informationen bereit:
  * **Organisations-ID:** Diese erhalten Sie von Ihrem Blockbrain-Key-Account oder einem Teammitglied.
  * **Aussteller-URL:** Dies ist die Blockbrain-URL Ihres Unternehmens (z. B. <https://demo.kb.theblockbrain.ai/>).
  * **Webcomponent Bot UID:** Die ID eines Bot-Mappings, das im Admin-Bereich Ihres Blockbrain erstellt wurde. Muss von einem Administrator hinzugefügt werden.

### Schritt 3: Konfigurieren Sie die Webkomponente

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

* Richten Sie die Webkomponente mit den folgenden Parametern ein:
  * **Organisations-ID:** Geben Sie Ihre Organisations-ID ein, die Sie vom Blockbrain-Team erhalten haben.
  * **Aussteller:** Geben Sie die URL des Ausstellers ein - <https://your-blockbrain-domain.com>.
  * **UID:** Webkomponenten-Bot-UID, z. B. CompanyGPT.
  * **Benutzer-UID:** Nicht relevant für private und eingeschränkte Bots, optional für öffentliche Bots.

## Privater Modus

### Schritt 4: Authentifizierung einrichten

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

* Wenn Sie den privaten Modus verwenden, **stellen Sie sicher, dass der Aussteller in der Konfiguration enthalten ist.**
* Entfernen Sie die userUid, die nur für den öffentlichen Modus vorgesehen ist.
* Testen Sie die Anmeldefunktion:
  * Klicken Sie auf die Anmeldeschaltfläche, um die OAuth-Authentifizierung auszulösen.
  * Vergewissern Sie sich, dass Sie auf Ihren Gesprächsverlauf zugreifen können.

## Öffentlicher Modus

### Schritt 5: Öffentlichen Modus verwenden

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

* Um in den öffentlichen Modus zu wechseln, **entfernen Sie den Aussteller aus der Konfiguration.**
* Stellen Sie sicher, dass die Organisations-ID und die Unternehmens-UID weiterhin enthalten sind.
* Entfernen Sie die userUid, wenn sie nicht benötigt wird. Sie kann zur Unterscheidung von Benutzern verwendet werden.
* Testen Sie die öffentliche Chat-Funktion, um sicherzustellen, dass sie ohne Authentifizierung funktioniert.

## Video

{% embed url="<https://drive.google.com/file/d/17ShFDF5fo68n6PTK7lRI25jkmszpI8G-/view>" %}