Personalizzazione del tema

Le personalizzazioni applicate all'interfaccia utente del widget dell'SDK web oltre a quelle documentate qui non sono supportate e potrebbero comportare un comportamento imprevisto. Google consiglia di utilizzare l'SDK headless se hai bisogno di personalizzazioni più avanzate.

Per assicurarti che le personalizzazioni del tema vengano visualizzate come previsto, Google consiglia di testare le modifiche in un ambiente di test prima di eseguirne il deployment in produzione.

Design di Avvio app

L'icona, le dimensioni, la posizione e il colore dell'app di avvio possono essere personalizzati.

1. Launcher

2. Icona Apri

3. Icona Chiudi

Icone

Se la UI del launcher predefinito non corrisponde al tuo branding, puoi personalizzare le icone del launcher con il tuo file SVG. Non puoi aggiungere un URL al file SVG, deve essere il file SVG stesso.

ccaas.config({  launcherOpenIcon: '<svg ....>',  launcherCloseIcon: '<svg ....>',})

Dimensioni

La larghezza e l'altezza predefinite del launcher sono 80px. Puoi modificarla in un'altra dimensione:

#ccaas-widget {
  --launcher-size: 60px;
}

Personalizzazione del bordo

Puoi personalizzare le seguenti opzioni per il bordo del launcher:

• Colore bordo
• Spessore bordo
• Ombra (aumenta o diminuisci)

--launcher-border-color
--launcher-border-width
--launcher-shadow

Colori di Avvio app

Per impostazione predefinita, il launcher utilizza il colore intenso.

{
  --launcher-border-color: var(--accent-10);
  --launcher-background-color: var(--accent-10);
  --launcher-color: var(--accent-9-contrast);
}

Puoi personalizzare l'app di avvio per utilizzare un colore diverso. Ad esempio:

#ccaas-widget {
  --launcher-border-color: var(--green-10);
  --launcher-background-color: var(--blue-10);
  --launcher-color: white;
}

Disattiva Avvio app

Per motivi estetici, potresti voler nascondere l'utilità di avvio dell'SDK web, scegliendo di utilizzare un trigger di chat proattivo o di avviare la chat a livello di programmazione. Puoi nascondere o disattivare l'interfaccia utente del launcher utilizzando disableLauncher:

ccaas.config({
  disableLauncher: true
})

Quando l'Avvio app è disattivato, puoi aprire il widget con:

ccaas.show()

Design del widget

1. Widget

2. Logo

Caratteri

Seleziona caratteri diversi per l'interfaccia utente.

--font-en: Roboto, Verdana, Helvetica Neue

--font-zh: PingFang SC, Hiragino Sans GB, Droid Sans Fallback, Microsoft YaHei

--font-ja: Hiragino Sans, Meiryo

Colore di contrasto

Puoi personalizzare l'accento color selezionando un'opzione di colore predefinita utilizzando la seguente configurazione:

ccaas.config({
  accent: 'green',
})

I colori predefiniti includono blue, green, purple, orange, yellow, gold, red.

Personalizzazione accento

Se le scelte predefinite non soddisfano le tue esigenze aziendali, puoi personalizzare lo stile con le variabili CSS.

#ccaas-widget {
  --accent-1: #fbfdff;
  --accent-2: #f4faff;
  --accent-3: #e6f4fe;
  --accent-4: #d5efff;
  --accent-5: #c2e5ff;
  --accent-6: #acd8fc;
  --accent-7: #8ec8f6;
  --accent-8: #5eb1ef;
  --accent-9: #0090ff;
  --accent-10: #0588f0;
  --accent-11: #0d74ce;
  --accent-12: #113264;
  --accent-contrast: white;
  --chat-input-selection-color: var(--accent-11);
}

Posizione

Se il punto di montaggio è #ccaas-widget, puoi aggiornare la posizione del widget utilizzando:

#ccaas-widget {
  --ujet-right: 20px;
  --ujet-bottom: 10px;
}

Logo

Scegli un logo personalizzato da visualizzare nel widget.

ccaas.config({
  logo: 'https://example.com/logo.png'
})

Nascondere il bordo del logo dell'agente

Se il punto di montaggio è #ccaas-widget, puoi nascondere il bordo del logo dell'agente utilizzando il seguente esempio di codice:

#ccaas-widget {
--head-logo-shadow: none;
}

Componenti vari

Oltre ai colori accento e alla posizione, il widget Web SDK ha fornito altre variabili CSS per configurare alcuni degli altri componenti utilizzati nel widget.

Se il punto di montaggio è #ccaas-widget, puoi personalizzarli utilizzando il seguente esempio di codice:

#ccaas-widget {
  --variable-name: value;
}

Variabili CSS generali

--text-font: Famiglia di caratteri predefinita per il testo.

--text-color: Colore del testo predefinito.

--end-color: Colore predefinito dei pulsanti di fine (termina chat, esci dalla chat, termina la navigazione condivisa)

Icona di conferma

L'icona di conferma visualizzata in varie pagine dell'SDK può essere personalizzata. Puoi sostituire l'icona predefinita con un'icona personalizzata e controllare le dimensioni e il colore.

--confirmation-icon-size

--confirmation-icon-color

Pulsanti

Puoi controllare in modo granulare la personalizzazione di diversi tipi di pulsanti. La tabella seguente spiega il comportamento previsto quando si personalizzano diversi tipi di pulsanti in combinazione.

Personalizzazioni dei pulsanti applicate	Risultato
Nessuno	Comportamento predefinito (tutti gli stili dei pulsanti vengono visualizzati in base al tema principale).
Personalizzazioni generali dei pulsanti	Tutti i pulsanti (escluse le schermate di dialogo/chat) vengono visualizzati in base alle personalizzazioni impostate dal cliente. Sono inclusi i pulsanti di menu. Se NON viene specificata alcuna variabile di personalizzazione generale dei pulsanti, viene applicato il comportamento predefinito.
Personalizzazioni del pulsante Menu Personalizzazioni dei pulsanti di dialogo	I pulsanti del menu vengono visualizzati in base alla variabile --menu-button. I pulsanti di dialogo vengono visualizzati in base alle variabili --dialog-primary-button e --dialog-secondary-button. Se NON viene specificata alcuna variabile di personalizzazione dei pulsanti di menu / dialogo, viene applicato il comportamento predefinito.
Personalizzazioni generali dei pulsanti Personalizzazione del pulsante del menu Personalizzazioni dei pulsanti di dialogo	I pulsanti di menu vengono visualizzati in base alla variabile --menu-button I pulsanti della finestra di dialogo vengono visualizzati in base alle variabili --dialog-primary-button e --dialog-secondary-button. I pulsanti che NON sono pulsanti di menu o di dialogo vengono visualizzati in base alle personalizzazioni generali. Se NON viene specificata alcuna variabile di personalizzazione per pulsanti generali / di menu / di dialogo, viene applicato il comportamento predefinito per quel pulsante.

Pulsanti generali

Tutti gli altri pulsanti a livello di SDK che non hanno variabili CSS proprie utilizzano la configurazione e la personalizzazione del pulsante generale.

--general-button-default-background
--general-button-default-border
--general-button-default-color
--general-button-default-outline

--general-button-hover-background
--general-button-hover-border
--general-button-hover-color
--general-button-hover-outline

--general-button-active-background
--general-button-active-border
--general-button-active-color
--general-button-active-outline

--general-button-focus-background
--general-button-focus-border
--general-button-focus-color
--general-button-focus-outline

Pulsanti principali

--primary-button-default-background<
--primary-button-default-color

--primary-button-focus-background
--primary-button-focus-color

--primary-button-hover-background
--primary-button-hover-color

--primary-button-active-background
--primary-button-active-color

--primary-button-disabled-background
--primary-button-disabled-color

Pulsanti secondari

--secondary-button-default-background
--secondary-button-default-border
--secondary-button-default-outline
--secondary-button-default-color

--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-outline
--secondary-button-hover-color

--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-outline
--secondary-button-active-color

--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-outline
--secondary-button-disabled-color

--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color

Pulsanti secondari (inversi)

--secondary-button-inverse-default-background
--secondary-button-inverse-default-border
--secondary-button-inverse-default-outline
--secondary-button-inverse-default-color

--secondary-button-inverse-hover-background
--secondary-button-inverse-hover-border
--secondary-button-inverse-hover-outline
--secondary-button-inverse-hover-color

--secondary-button-inverse-active-background
--secondary-button-inverse-active-border
--secondary-button-inverse-active-outline
--secondary-button-inverse-active-color

--secondary-button-inverse-disabled-background
--secondary-button-inverse-disabled-border
--secondary-button-inverse-disabled-outline
--secondary-button-inverse-disabled-color

--secondary-button-inverse-focus-background
--secondary-button-inverse-focus-border
--secondary-button-inverse-focus-outline
--secondary-button-inverse-focus-color

Pulsanti del menu

Personalizzazione del pulsante Menu.

--menu-button-default-background
--menu-button-default-border
--menu-button-default-text
--menu-button-default-outline

--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-text

--menu-button-active-background
--menu-button-active-border
--menu-button-active-text
--menu-button-active-outline

--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-text
--menu-button-focus-outline

Personalizzazione del pulsante Menu

Pulsanti di dialogo

Ad esempio, modali o popup.

--dialog-background
--dialog-text

--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-text
--dialog-primary-button-default-outline

--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-text
--dialog-primary-button-hover-outline

--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-text
--dialog-primary-button-focus-outline

--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-text
--dialog-primary-button-active-outline

--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-text
--dialog-secondary-button-default-outline

--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-text
--dialog-secondary-button-hover-outline

--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-text
--dialog-secondary-button-focus-outline

--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-text
--dialog-secondary-button-active-outline

Intestazione della chat

--options-menu-icon-color-default
--options-menu-icon-color-hover
--options-menu-icon-color-active
--options-menu-icon-color-focus

--options-menu-icon-background-default
--options-menu-icon-background-hover
--options-menu-icon-background-active
--options-menu-icon-background-focus

Disattiva chat

ccaas.config({
  enableMuteChat: true,
})

Bolla della chat

--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height

--chat-bubble-agent-background
--chat-bubble-agent-text
--chat-bubble-agent-border-top-left
--chat-bubble-agent-border-top-right
--chat-bubble-agent-border-bottom-right
--chat-bubble-agent-border-bottom-left

--chat-bubble-user-background
--chat-bubble-user-text
--chat-bubble-user-border-top-left
--chat-bubble-user-border-top-right
--chat-bubble-user-border-bottom-right
--chat-bubble-user-border-bottom-left

### Personalizzazione della bolla della chat

Messaggio

--message-event-general-font
--message-event-general-font-size
--message-event-general-font-weight
--message-event-general-color

--message-event-error-font
--message-event-error-font-size
--message-event-error-font-weight
--message-event-error-color

--message-event-confirmation-font
--message-event-confirmation-font-size
--message-event-confirmation-font-weight
--message-event-confirmation-color

--message-progress-color

--message-button-font
--message-button-text-size
--message-button-text-color
--message-button-font-style

--message-button-default-background
--message-button-default-border
--message-button-hover-background
--message-button-focus-background
--message-button-focus-text

--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style

Agente virtuale post-sessione

--post-session-background
--post-session-padding