@botfabrik/engine-webclient 4.56.0 → 4.57.1
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 +42 -10
- package/dist/client/assets/index-g53X79za.js +111 -0
- package/dist/client/assets/{index-72cfXpHP.js.map → index-g53X79za.js.map} +1 -1
- package/dist/client/assets/index-gTVH8Oni.css +1 -0
- package/dist/client/bot.svg +6 -1
- package/dist/client/fab.svg +21 -0
- package/dist/client/favicon.ico +0 -0
- package/dist/client/index.html +2 -2
- package/dist/client/logo.svg +25 -0
- package/dist/client/manifest.json +8 -18
- package/dist/embed/bundle.js +2 -2
- package/dist/embed/bundle.js.map +1 -1
- package/dist/middleware/index.js +0 -1
- package/package.json +2 -2
- package/dist/client/assets/index-72cfXpHP.js +0 -111
- package/dist/client/assets/index-7_AKOp5y.css +0 -1
- package/dist/client/bot.png +0 -0
- package/dist/client/logo192.png +0 -0
- package/dist/client/logo512.png +0 -0
- package/dist/client/visitor.png +0 -0
- package/dist/client/visitor.svg +0 -1
- package/dist/embed/custom.css +0 -4
- package/dist/embed/logo.svg +0 -26
- package/dist/embed/open-button.svg +0 -24
package/README.md
CHANGED
|
@@ -224,40 +224,72 @@ Beispiel (de.json)
|
|
|
224
224
|
## Anpassungen am Aussehen
|
|
225
225
|
|
|
226
226
|
Das Aussehen des Webclients kann pro Projekt angepasst werden. Dazu kann eine eigene CSS Datei namens 'custom.css' im
|
|
227
|
-
Verzeichnis
|
|
228
|
-
(
|
|
227
|
+
Verzeichnis `public/\${name-meines-webclients}/` abgelegt werden. Auf gleiche Art und Weise können auch der FAB (fab.svg), der Bot-Avatar
|
|
228
|
+
(bot.svg) sowie das Logo (logo.svg) angepasst werden.
|
|
229
229
|
|
|
230
230
|
### Standard CSS Variabeln
|
|
231
231
|
|
|
232
232
|
```css
|
|
233
233
|
:root {
|
|
234
|
-
|
|
235
|
-
--brand-primary-color:
|
|
236
|
-
--brand-secondary-color:
|
|
237
|
-
--danger-color: #
|
|
238
|
-
|
|
234
|
+
--aspect-ratio: calc(16 / 9);
|
|
235
|
+
--brand-primary-color: rgb(114, 46, 209);
|
|
236
|
+
--brand-secondary-color: white;
|
|
237
|
+
--danger-color: #cd2147;
|
|
238
|
+
|
|
239
|
+
/* FAB */
|
|
240
|
+
--fab-size: 6em;
|
|
241
|
+
--fab-size-mobile: var(--fab-size, 5em);
|
|
242
|
+
--fab-top: auto;
|
|
243
|
+
--fab-top-mobile: var(--fab-top, auto);
|
|
244
|
+
--fab-right: 1.5em;
|
|
245
|
+
--fab-right-mobile: var(--fab-right, 1.5em);
|
|
246
|
+
--fab-bottom: 1.5em;
|
|
247
|
+
--fab-bottom-mobile: var(--fab-bottom, 1.5em);
|
|
248
|
+
--fab-left: auto;
|
|
249
|
+
--fab-left-mobile: var(--fab-left, auto);
|
|
250
|
+
|
|
251
|
+
/* chat window */
|
|
252
|
+
--window-height: 40em;
|
|
253
|
+
--window-width: 23em;
|
|
254
|
+
--window-border-radius: 8px;
|
|
255
|
+
--header-height: 4em;
|
|
256
|
+
--header-background-color: var(--brand-primary-color);
|
|
257
|
+
--logo-padding: 1em;
|
|
258
|
+
--close-icon-padding: 1em;
|
|
259
|
+
|
|
260
|
+
/* chat body */
|
|
261
|
+
--body-background-color: white;
|
|
239
262
|
|
|
240
263
|
--avatar-size: 2rem;
|
|
264
|
+
--avatar-radius: 50%;
|
|
265
|
+
--bot-avatar-background-color: rgb(240, 242, 245);
|
|
266
|
+
--agent-avatar-background-color: rgb(240, 242, 245);
|
|
241
267
|
|
|
242
|
-
--bubble-padding: 0.9em
|
|
268
|
+
--bubble-padding: 0.9em 1em;
|
|
243
269
|
--bubble-margin-small: 3px;
|
|
244
270
|
--bubble-margin-large: 1.2rem;
|
|
245
271
|
--bubble-radius-large: 20px;
|
|
246
272
|
--bubble-radius-small: 4px;
|
|
247
273
|
|
|
248
274
|
--bot-bubble-background-color: white;
|
|
249
|
-
--bot-bubble-text-color:
|
|
275
|
+
--bot-bubble-text-color: #2e2e2e;
|
|
276
|
+
--bot-bubble-border-color: #434343;
|
|
277
|
+
--bot-bubble-border-width: 2px;
|
|
250
278
|
--bot-bubble-top-left-radius: var(--bubble-radius-small);
|
|
251
279
|
--bot-bubble-top-right-radius: var(--bubble-radius-small);
|
|
252
280
|
--bot-bubble-bottom-right-radius: var(--bubble-radius-small);
|
|
253
281
|
--bot-bubble-bottom-left-radius: var(--bubble-radius-small);
|
|
254
282
|
|
|
255
|
-
--guest-bubble-background-color:
|
|
283
|
+
--guest-bubble-background-color: var(--brand-primary-color);
|
|
256
284
|
--guest-bubble-text-color: white;
|
|
285
|
+
--guest-bubble-border-color: white;
|
|
286
|
+
--guest-bubble-border-width: 0px;
|
|
257
287
|
--guest-bubble-top-left-radius: var(--bubble-radius-small);
|
|
258
288
|
--guest-bubble-top-right-radius: var(--bubble-radius-small);
|
|
259
289
|
--guest-bubble-bottom-right-radius: var(--bubble-radius-small);
|
|
260
290
|
--guest-bubble-bottom-left-radius: var(--bubble-radius-small);
|
|
291
|
+
|
|
292
|
+
--scrollbar-thumb-color: #adadad;
|
|
261
293
|
}
|
|
262
294
|
```
|
|
263
295
|
|