@botfabrik/engine-webclient 4.77.4-alpha.3 → 4.77.4-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -3
- package/dist/client/assets/{index-CfKK2EDS.js → index-DS4R-5Fc.js} +30 -30
- package/dist/client/assets/index-DS4R-5Fc.js.map +1 -0
- package/dist/client/assets/{index-_c54t5mk.css → index-Dwiskwpd.css} +1 -1
- package/dist/client/index.html +2 -2
- package/dist/embed/bundle.js +9 -51
- package/dist/middleware/index.js +1 -1
- package/package.json +2 -2
- package/dist/client/assets/index-CfKK2EDS.js.map +0 -1
package/README.md
CHANGED
|
@@ -362,11 +362,10 @@ Favicons können z.B. mittels https://realfavicongenerator.net/ generiert werden
|
|
|
362
362
|
--fab-left-mobile: var(--fab-left, auto);
|
|
363
363
|
|
|
364
364
|
/* chat window */
|
|
365
|
-
--window-height:
|
|
366
|
-
--window-width:
|
|
365
|
+
--window-height: 43em;
|
|
366
|
+
--window-width: 25em;
|
|
367
367
|
--window-border-radius: 8px;
|
|
368
368
|
--header-height: 4em;
|
|
369
|
-
--header-color: white;
|
|
370
369
|
--header-background-color: var(--brand-primary-color);
|
|
371
370
|
--header-logo-url: url('./logo.svg');
|
|
372
371
|
--header-logo-padding: 1em;
|
|
@@ -421,6 +420,25 @@ Favicons können z.B. mittels https://realfavicongenerator.net/ generiert werden
|
|
|
421
420
|
|
|
422
421
|
Mithilfe des Query-Parameters `cssClassName` kann dem Chatclient ein CSS Klassenname mitgebeben werden. Damit lässt sich das Aussehen des Chatclients via URL beeinflussen.
|
|
423
422
|
|
|
423
|
+
### Kleiner / grosser Chat-Client
|
|
424
|
+
|
|
425
|
+
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.
|
|
426
|
+
|
|
427
|
+
Um das Aussehen abhäng der Grösse beeinflussen zu können, werden folgende beide CSS Klassen gesetzt:
|
|
428
|
+
|
|
429
|
+
- `chat__small` bei einer Fensterbreite unter 1024 Pixel
|
|
430
|
+
- `chat__larg` ab einer Fensterbreite von 1024 Pixel
|
|
431
|
+
|
|
432
|
+
Möchte man also z.B. beim grossen Client ein anderes Logo verwenden, kann man dies wie folgt machen:
|
|
433
|
+
|
|
434
|
+
```
|
|
435
|
+
.chat__large {
|
|
436
|
+
--header-logo-url: url('/chatbot/logo-blue.svg');
|
|
437
|
+
--header-logo-padding: 1rem 0rem;
|
|
438
|
+
--header-height: 6em;
|
|
439
|
+
}
|
|
440
|
+
```
|
|
441
|
+
|
|
424
442
|
## Einbinden auf einer Webseite
|
|
425
443
|
|
|
426
444
|
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)).
|