Passa al contenuto principale

Stili e temi

CSS Variables per Personalizzazione​

Il widget utilizza CSS variables per permettere la personalizzazione dinamica:

resources/scss/agentWidget.scss
.chat-wrapper {
    --default-button-bg: #ff8e5e;
    --default-button-color: #000;
    --primary-color: #0f0f0f;
    --primary-light-color: #707070;
    --border-color: #e5e7eb;
    --default-user-message-bg: #ff8e5e;
    --default-assistant-message-bg: #f3f4f6;
    --user-message-color: #000;
    --assistant-message-color: #000;
    --button-bg: #ff8e5e;
    --button-color: #000;
    --faq-bg-color: rgb(255 142 94 / 1);
    --faq-bg-color-hover: rgb(255 142 94 / 0.7);
}

Temi Predefiniti​

resources/js/shadowDomWidgetPreact.jsx
constructor(containerId = null, params = {}) {
    const overrideSettings = window.tidikoAiWidgetOverrideSettings || {};
    const { platformSettings = {} } = params;

    // chatTitle, inputPlaceholder, colorScheme, userBg, aiBg, ecc.
    this.options = { ...platformSettings, ...overrideSettings };
    // I componenti Preact applicano i colori via CSS variables (--user-message-bg, ...)
}