# Einbindung des Chatbots

Das Chatfenster ist die Oberfläche der Plattform für die Chatbotnutzer*innen. Er kann in bestehende Webseiten, Intranet-Portale, Sharepoint, etc. eingebunden werden und ermöglicht somit den reibungslosen Einsatz des Chatbots für webbasierte Anwendungsfälle. Chatbotnutzer*innen greifen über ihren Webbrowser auf den Chat zu und interagieren über das Chat-Interface mit dem Chatbot.

Kauz stellt ein Standard-Design mit Individualisierungsmöglichkeiten zur Verfügung. Für Enterprise-Kunden gibt es die zusätzliche Möglichkeit, das CSS zusätzlich anzupassen. Wenn Sie ein eigenes Chat-Interface entwickeln möchten, können Sie dafür die Dialog-API nutzen.

Das Chat-Interface kann entweder direkt als iFrame in eine existierende Webseite eingebunden werden oder als Platzhalter mithilfe eines JavaScript-Scripts (empfohlen).

Bitte vergessen Sie bei der Einbindung in Ihre Webseite nicht, Ihren Datenschutzhinweis anzupassen!

# Einbindung als Platzhalter (Standard)

Mit einem Einfachen Skript können Sie den Chatbot als Avatar ("Platzhalter") einbinden, der unten rechts auf Ihrer Webseite erscheint.

Webseite mit Chatbot-Platzhalter

Befolgen Sie hierfür diese einfachen Schritte:

1. Freigabe des Hosts

Auf der Seite Konfiguration > Chatbot im Tab Einbindung im aiStudio können Sie definieren, auf welchen Websites der Chatbot eingebunden werden darf. Geben Sie dort die URL(s) Ihrer Website(s) an. Fügen Sie hierfür den Host ohne Slash ein, z.B. https://kauz.ai.

Diese Einschränkung dient der Sicherheit und sorgt dafür, dass nur Sie Ihren Chatbot einbinden können.

2. Skript kopieren und einfügen

Auf dieser Seite finden Sie außerdem den Code zum Einbinden Ihres Chatbots. Diesen können Sie mit Hilfe des Kopier-Symbols in die Zwischenablage kopieren und im <head> Ihrer Website-HTML einfügen.

# Platzhalter über RequireJS

Es besteht alternativ die Möglichkeit, den Platzhalter über RequireJS einzubinden:

RequireJS Script zur Einbindung
<script type="text/javascript">
  require.config({
    baseUrl: './',
    paths: {
      placeholder: '{host}/chat/main/?group={group}/placeholder/placeholder.production'
    }
  });
  console.log('=========> Run require([\'placeholder\'])');
  require(['placeholder'], function (placeholder) {
    placeholder.default.initChat('{host}/chat/main/placeholder/placeholder.production.js?group={group}');
  });
</script>

# Einbindung als iFrame

Es besteht die Möglichkeit, das Chatfenster auf einzelnen Seiten als iFrame einzubinden. Dies ist jedoch nicht empfohlen, da es in der Regel zu einer schlechteren Nutzererfahrung führt.

Webseite mit Chatbot-iFrame

Für die Einbindugn als iFrame benötigen Sie die Chatbot-URL. Öffnen Sie dafür den KI-Assistenten im aiStudio rechts und klicken Sie auf das Linksymbol unter "Teilen:"

Fügen Sie für die Einbindung als iFrame das Snippet an der gewünschten Stelle in Ihr HTML ein:

Snippet zur Einbindung
<iframe src="{chatbot-url}"></iframe>

Höhe und Breite des Chatfensters lassen sich durch ein Style-Attribut (z. B. style="width:100%;height:100%") anpassen.

# Einbindung in SharePoint Online

In der Regel kann der Chatbot in interne Portale regulär über das Platzhalter-Skript integriert werden. Bei der Einbindung Sharepoint Online befolgen Sie jedoch am besten die folgenden Schritte.

# Berechtigung zur URL in SharePoint Online hinzufügen

Damit der Chatbot per iFrame in SharePoint eingebunden werden kann, muss zunächst die URL des iFrames in SharePoint freigegeben werden.

Folgen Sie hierfür den folgenden Schritten:

1. Navigieren Sie zu den SharePoint-Admin-Einstellungen

Öffnen Sie das Microsoft 365 Admin Center. Dies erreichen Sie, indem Sie sich bei Microsoft 365 anmelden und oben links auf das Menü-Symbol (die neun Punkte) klicken. Wählen Sie Admin aus.
Im Admin Center wählen Sie Show all (Alle anzeigen) in der linken Navigation, um alle verfügbaren Admin-Center anzuzeigen.
Wählen Sie SharePoint aus der Liste der Admin-Center aus, um zu den SharePoint-Admin-Einstellungen zu gelangen.

2. Freigabe von eingebetteten Inhalten

Im SharePoint Admin Center wählen Sie Einstellungen in der linken Navigation.
Scrollen Sie nach unten zu Eingebettete Inhalte oder Embed.
Fügen Sie die URL der Website, die Sie einbetten möchten, zur Liste der zugelassenen Domänen hinzu. Dies könnte wie folgt aussehen: my.kauz.ai
Speichern Sie die Einstellungen.

# Einfügen des iFrames (Chatbot) in eine SharePoint Online-Seite

Nachdem Sie die Berechtigungen eingerichtet haben, können Sie den iFrame in Ihre SharePoint Online-Seite einfügen. Folgen Sie hierfür den folgenden Schritten:

1. Erstellen einer neuen Seite

Navigieren Sie zu Ihrem SharePoint Online.
Klicken Sie auf das Zahnrad-Symbol oben rechts und wählen Sie Websiteinhalte.
Klicken Sie auf Neue Seite und wählen Sie das gewünschte Seitenlayout aus. Benennen Sie die Seite nach Bedarf.

2. Bearbeiten der Seite

Nachdem die Seite erstellt wurde, klicken Sie auf Bearbeiten oben rechts auf der Seite.

3. Erstellen einer neuen Sektion

Wählen Sie das Plus-Symbol (+) auf der Seite, um eine neue Sektion hinzuzufügen.
Wählen Sie das gewünschte Layout für Ihre Sektion.

4. WebPart hinzufügen

Innerhalb der neuen Sektion klicken Sie auf das Plus-Symbol (+) und wählen Sie Embed aus der Liste der WebParts.

5. Einfügen des iFrames

Geben Sie den folgenden Code in das Eingabefeld ein:

<iframe src="my.kauz.ai/chat/" width="200px" height="600px" />

Ersetzen Sie my.kauz.ai/chat/ mit der URL Ihres Chatbots und geben Sie die gewünschten Werte für width (Breite) und height (Höhe) ein.

6. Speichern der Änderungen

Klicken Sie auf Veröffentlichen, um Ihre Seite zu speichern und die Änderungen zu übernehmen.