🕸️Website Integration

Die Integration Ihres Bots in Ihre Website verbessert das Nutzerengagement und bietet direkte Unterstützung auf Ihrer Plattform. Dieser Prozess ist unkompliziert und beinhaltet das Einbetten eines kleinen Code-Snippets.

Integration der Webkomponente

Um die Chat-Element-Komponente in Ihre Website einzubinden, folgen Sie diesen Schritten:

  1. Teilen Sie uns den Ursprung (Origin) der Seite mit, in die Sie integrieren möchten

  2. Fügen Sie den folgenden Script-Tag in Ihre HTML-Datei ein:

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

  1. Fügen Sie den <blockbrain-main>-Tag dort ein, wo Sie die Chat-Komponente platzieren möchten:

<blockbrain-main
    clientId="clientId"
    secretKey="secretKey"
    orgId="orgId"
    uid="uid"
    userUid="userUid">  
</blockbrain-main>

  1. Ersetzen Sie clientId und secretKey durch Ihre tatsächliche Client-ID und Ihren geheimen Schlüssel, die uid durch die Kontonummer / Maschinen-UID und userUid durch eine eindeutige Benutzer-ID, falls Sie eine haben, die Sie senden können - andernfalls entfernen Sie sie einfach.

Private Mode Integration (Authentifizierte Nutzung)

Für eine sichere und authentifizierte Nutzung konfigurieren Sie die Webkomponente im privaten Modus mit dem issuer-Attribut. Erforderliche Attribute:

  • orgId: Für Ihre Instanz bereitgestellte Organisations-ID.

  • issuer: URL Ihrer Blockbrain-Domain.

  • uid: Eindeutiger Identifikator für die Bot-Instanz oder Anwendung.

  • userUid: Eindeutiger Identifikator für den Benutzer (optional).

Beispiel:

<blockbrain-main
    orgId="ihre-org-id"
    issuer="https://ihre-blockbrain-domain.com"
    uid="ihre-uid"
    userUid="optionale-benutzer-id">
</blockbrain-main>

Public Mode Integration (Nicht-authentifizierte Nutzung)

Für Szenarien, in denen keine Authentifizierung erforderlich ist, konfigurieren Sie die Webkomponente im öffentlichen Modus mit dem clientSecret-Attribut. Erforderliche Attribute:

  • orgId: Für Ihre Instanz bereitgestellte Organisations-ID.

  • clientSecret: Ein Client-Geheimnis zur Aktivierung des öffentlichen Modus.

  • uid: Eindeutiger Identifikator für die Bot-Instanz oder Anwendung.

  • userUid: Eindeutiger Identifikator für den Benutzer (optional).

Beispiel:

<blockbrain-main
    orgId="ihre-org-id"
    clientSecret="ihr-client-geheimnis"
    uid="ihre-uid"
    userUid="optionale-benutzer-id">
</blockbrain-main>

Anpassung

Erweitern Sie das <blockbrain-main>-Tag und passen Sie es durch verschiedene Attribute an Ihre Bedürfnisse an:

<blockbrain-main 
    clientId="your-clientId"
    secretKey="your-secretKey"
    orgId="your-orgId"
    issuer="my-issuer-url"
    layout="minimal"
    iconUrl="https://example.com/default-icon.png"
    iconSize="50px"
    messages='{
        "notCreated": {
            "iconSize": "100px",
            "title": "Bot-Einrichtung abgeschlossen",
            "description": "Die Bot-Einrichtung ist abgeschlossen. Sie werden zu Ihrem Bot weitergeleitet..."
        },
        "completed": {
            "iconSize": "106px",
            "title": "Benutzerdefinierter Abschlusstitel",
            "description": "Benutzerdefinierte Abschlussbeschreibung."
        },
        "requested": {
            "iconSize": "56px",
            "title": "Benutzerdefinierter Anfragetitel",
            "description": "Benutzerdefinierte Anfragebeschreibung."
        },
        "needAttention": {
            "title": "Benutzerdefinierte Aufmerksamkeit erforderlich",
            "description": "Benutzerdefinierte Beschreibung für erforderliche Aufmerksamkeit."
        },
        "rejected": {
            "title": "Benutzerdefinierter Ablehnungstitel",
            "description": "Benutzerdefinierte Ablehnungsbeschreibung."
        },
        "loading": {
            "iconUrl": "https://cdn-1.webcatalog.io/catalog/blockbrain/blockbrain-icon-filled-256.webp?v=1714777605928",
            "iconSize": "106px",
            "title": "Benutzerdefinierter Ladetitel",
            "description": "Benutzerdefinierte Ladebeschreibung."
        },
        "error": {
            "title": "Benutzerdefinierter Fehlertitel",
            "description": "Benutzerdefinierte Fehlerbeschreibung."
        },
        "missingParams": {
            "title": "Konfigurationsfehler",
            "description": "Es sieht so aus, als würde etwas in Ihrer Konfiguration fehlen. Bitte überprüfen Sie Ihre Konfiguration und versuchen Sie es erneut."
        }
    }'>
</blockbrain-main>

Beschreibungen der Attribute

  • iconUrl (optional)

    • Beschreibung: URL zu einem Standard-Icon-Bild, das für alle Nachrichten verwendet wird, wenn keine spezifische iconUrl für die Nachricht angegeben ist.

    • Anpassung: Verwenden Sie die iconUrl-Eigenschaft innerhalb einer spezifischen Statusnachricht, um diesen Standard zu überschreiben.

    • Icon ausblenden: Um das Icon für eine Nachricht auszublenden, setzen Sie deren iconUrl auf einen leeren String ("").

    • Beispiel: "[https://example.com/default-icon.png](https://example.com/default-icon.png)"

  • iconSize (optional)

    • Beschreibung: Legt die Größe des Standard-Icons fest.

    • Anpassung: Sie können die Größe für eine bestimmte Statusnachricht überschreiben, indem Sie deren iconSize angeben.

    • Werte: Akzeptiert jede gültige CSS-Größe (z.B. 50px, 4rem, 100%).

  • messages (optional)

    • Beschreibung: Ein JSON-String, der es ermöglicht, die Titel und Beschreibungen für verschiedene Status anzupassen.

    • Struktur: Das messages-Attribut ist ein JSON-String, der es ermöglicht, das Erscheinungsbild jedes Status anzupassen. Jeder Status hat die folgenden anpassbaren Eigenschaften:

      • iconUrl (optional): URL zu einem Icon speziell für diesen Status. Verwenden Sie einen leeren String ("") zum Ausblenden.

      • iconSize (optional): Überschreibt die Standard-iconSize für diesen Status.

      • title (optional): Überschriftentext für den Status. Verwenden Sie einen leeren String ("") zum Ausblenden.

      • description (optional): Text, der unter dem Titel angezeigt wird. Verwenden Sie einen leeren String ("") zum Ausblenden.

    • Status:

      • notCreated: Wird angezeigt, wenn kein Bot für die angegebene botUid gefunden wird. Der Benutzer muss möglicherweise den Bot anfordern.

      • completed: Wird angezeigt, wenn die Bot-Einrichtung abgeschlossen ist, mit optionalem Weiterleitungshinweis.

      • requested: Die Bot-Anfrage wurde übermittelt, und der Bot wird in wenigen Sekunden bereit sein. Der Benutzer muss möglicherweise die Seite aktualisieren, um den Bot anzuzeigen.

      • needAttention: Erfordert Admin- oder Benutzeraktion, um mit der Bot-Einrichtung fortzufahren.

      • rejected: Wird angezeigt, wenn die Bot-Anfrage abgelehnt wurde.

      • loading: Wird während der Initialisierung oder anderen Ladevorgängen angezeigt.

      • error: Zeigt einen Fehler während des Bot-Einrichtungsprozesses an.

      • login: Wird auf der Anmeldeseite angezeigt.

PreviousAPINextRechtliches & Compliance

Last updated