# Einbindung des Chats

Die nachfolgende Information bezieht sich auf das durch Kauz betriebene und bereitgestellte Chatbot-Frontend. Für die Einbindung eines eigens entwickelten Chatbot-Frontends wenden Sie sich bitte an den Bereitsteller.

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

Die Individualisierung der Chat-Elemente erfolgt mithilfe von Umgebungsvariablen und einem von Kauz bereitgestellten CCS-Stylesheet. Bei Kunden, die durch Kauz betrieben werden, werden diese durch Kauz angepasst. Beim On-Premise-Betrieb erfolgt dies durch den Betreiber.

# Einbindung als Platzhalter

Fügen Sie für die Einbindung als Platzhalter das Snippet im <head> Element hinzu:

Snippet zur Einbindung
<script src="{customer}.managed-kauz.net/chat/main/?group={group}/placeholder/placeholder.production.js"></script>

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

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

Ab der Version v5.6 kann der Platzhalter nur noch auf Seiten eingebunden werden, deren Host zur Einbindung freigegeben wurde. Dies kann über das aiStudio erfolgen. Bitte kontaktieren Sie alternativ Ihre Kauz-Projektleitung, um weitere Hosts zur Whitelist hinzuzufügen.

# Einbindung als iFrame

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="https://{customer}.managed-kauz.net/chat/main/?group={group}"></iframe>

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