Das ausgelieferte Standard Design des Chatbots kann angepasst werden, ohne dass das Template überschrieben werden muss.
Themen
Konfiguration
Sie können ausschließlich für den Chatbot Seitentyp eine conf.json Datei anlegen. Diese Datei muss in Ihrem Design in chatbot/admin/conf.json. Die Konfigurationen für den Chatbot können Sie aber theoretisch auch in der globalen conf.json Datei Ihres Designs festlegen.
Der Chatbot Seitentyp wertet die Eigenschaft chatbot aus. Hier stehen folgende Einstellungen zur Verfügung:
{
"chatbot": {
"wrappers": {
"assistant": "HTML Element für die Antwort des Chatbots. Mit <%> wird der Text platziert.",
"user": "HTML Element für die Frage des Anwenders. Mit <%> wird der Text platziert.",
"sources": "HTML Element für die Anzeige aller Quellen. Mit <%> werden die Quellen platziert.",
"tools": "HTML Element für die Anzeige aller Werkzeuge. Mit <%> werden die Wekrzeuge platziert."
},
"classes": {
"sources": "CSS Klassen für die Liste aller Quellen.",
"source": "CSS Klassen für eine einzelne Quelle.",
"reader": "CSS Klassen für das Werkzeug Vorlesen.",
"validate": "CSS Klassen für das Werkzeug Überprüfen.",
"retry": "CSS Klassen für das Werkzeug zum erneut anfragen.",
"upvote": "CSS Klassen für das Werkzeug zur positiven Bewertung.",
"downvote": "CSS Klassen für das Werkzeug zur negativen Bewertung."
}
}
}
Zusätzlich können Sie die Standard Eigenschaft modify nutzen und noch umfangreichere Anpassungen am Template vorzunehmen. Beispiel:
{
"modify": [{
"selector": "form[name=\"chatbot\"] button",
"attribute": "class",
"value": "btn btn-secondary"
}, {
"selector": "#chatbot-search input, #chatbot-respond input",
"wrapper": "<div class=\"col\"><%></div>"
}, {
"selector": "#chatbot-search select",
"wrapper": "<div class=\"col-md-2\"><%></div>"
}, {
"selector": "form[name=\"chatbot\"] button",
"attribute": "class",
"value": "col-lg-2 col-sm-12"
}, {
"selector": "form[name=\"chatbot\"] input, form[name=\"chatbot\"] select",
"attribute": "class",
"value": "form-control"
}, {
"selector": "#chatbot-search, #chatbot-respond",
"attribute": "class",
"value": "form-row"
}]
}
@charset "UTF-8";
@import "/bin/type/skin/chatbot/style.css";
@media all {
/* Ihre Style Anweisungen */
}
Zusätzlich stehen CSS Variablen zur Verfügung, die Sie überschreiben können:
@charset "UTF-8";
@import "/bin/type/skin/chatbot/style.css";
@media all {
/* CSS Variablen, die überschrieben werden können */
:root {
/* Farben der Ladeanimation */
--chatbot-loading-color: #000000;
/* Farben der Fragen des Benutzers */
--chatbot-user-color: #ffffff;
--chatbot-user-background: #343a40;
/* Farben der Antworten des Chatbots */
--chatbot-assistant-color: #212529;
--chatbot-assistant-background: #ffffff;
}
}
Es wird empfohlen keine Standard Dateien des Chatbot Seitentyps zu überschreiben, da sonst die Kompatibilität zu zukünftigen Erweiterungen eingeschränkt werden kann. Individuelle Anpassungen am Chabot sollten lediglich über die auf dieser Seite genannten Möglichkeiten vorgenommen werden.