@botfabrik/engine-webclient 4.79.5 → 4.80.0

package/README.md

@@ -292,6 +292,7 @@ Beispiel (de.json)
 ```json
 {
   "webclient": {
+    "page.title": "Apptiva Chatbot",
     "message-input-label": "Nachricht eingeben ...",
     "export-transcript": {
       "email": {
@@ -326,6 +327,19 @@ Das Aussehen des Webclients kann pro Projekt angepasst werden. Dazu kann eine ei
 Verzeichnis `public/\${name-meines-webclients}/` abgelegt werden. Auf gleiche Art und Weise können auch der FAB (fab.svg), der Bot-Avatar
 (bot.svg) sowie das Logo (logo.svg) angepasst werden.
 
+### Favicon
+
+Um ein eigenes Favicon zu haben, müssen folgende Dateien im Chatbot Projekt hinterlegt werden:
+
+- apple-touch-icon.png
+- favicon-96x96.png
+- favicon.ico
+- favicon.svg
+- web-app-manifest-192x192.png
+- web-app-manifest-512x512.png
+
+Favicons können z.B. mittels https://realfavicongenerator.net/ generiert werden.
+
 ### Standard CSS Variabeln
 
 ```css
@@ -347,15 +361,23 @@ Verzeichnis `public/\${name-meines-webclients}/` abgelegt werden. Auf gleiche Ar
   --fab-left: auto;
   --fab-left-mobile: var(--fab-left, auto);
 
+  /* Text */
+  --text-primary-color: var(--color-gray-800);
+  --text-secondary-color: var(--color-gray-500);
+  --text-link-color: var(--text-primary-color);
+  --text-link-color-hover: var(--brand-primary-color);
+
   /* chat window */
-  --window-height: 40em;
-  --window-width: 23em;
+  --window-height: 43em;
+  --window-width: 25em;
   --window-border-radius: 8px;
   --header-height: 4em;
   --header-background-color: var(--brand-primary-color);
+  --header-logo-url: url('./logo.svg');
   --header-logo-padding: 1em;
-  --header-icons-padding: 0.9em;
-  --header-icons-color: white;
+  --header-icons-padding: 1rem 0.75rem;
+  --header-icon-size: 1.5rem;
+  --header-icon-color: white;
 
   /* chat body */
   --body-background-color: white;
@@ -405,6 +427,25 @@ Verzeichnis `public/\${name-meines-webclients}/` abgelegt werden. Auf gleiche Ar
 
 Mithilfe des Query-Parameters `cssClassName` kann dem Chatclient ein CSS Klassenname mitgebeben werden. Damit lässt sich das Aussehen des Chatclients via URL beeinflussen.
 
+### Kleiner / grosser Chat-Client
+
+Ab einer Fensterbreite von 1024 Pixel wechselt das Design in einen "Grosser Chat-Client" Modues. Hier können u.A. Informationen zu den verwendeten Quellen angezeigt werden.
+
+Um das Aussehen abhäng der Grösse beeinflussen zu können, werden folgende beide CSS Klassen gesetzt:
+
+- `chat__small` bei einer Fensterbreite unter 1024 Pixel
+- `chat__larg` ab einer Fensterbreite von 1024 Pixel
+
+Möchte man also z.B. beim grossen Client ein anderes Logo verwenden, kann man dies wie folgt machen:
+
+```
+.chat__large {
+  --header-logo-url: url('/chatbot/logo-blue.svg');
+  --header-logo-padding: 1rem 0rem;
+  --header-height: 6em;
+}
+```
+
 ## Einbinden auf einer Webseite
 
 Unter der Chatbot-Route unter "/embed/ des Servers (z.B. `http://localhost:3000/chatbot/embed`) läuft einen Beispielseite wie der Chatbot eingebetet werden kann. Dort gibt es ebenfalls einen Button, mit welchem das benötigte Snippet angezeigt werden kann. Das Aussehen kann im File `/public/webclient/embed/custom.css` jegliches CSS überschreiben (siehe [Beispiel](src/embed/custom.css)).
@@ -475,7 +516,7 @@ Beispiel:
 
 ### toggleChatWindow
 
-Öffne das Chatfenster wenn es geschlossen ist und schliesst es, wenn es offen ist.
+Öffnet das Chatfenster wenn es geschlossen ist und schliesst es, wenn es offen ist.
 
 Beispiel: