Personalizzazione del tema

Le personalizzazioni applicate all'interfaccia utente del widget dell'SDK web oltre a quelle documentate qui non sono supportate e potrebbero causare 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

È possibile personalizzare l'icona, le dimensioni, la posizione e il colore di Avvio app.

1. Avvio app

2. Icona Apri

3. Icona Chiudi

Icons

Se l'interfaccia utente predefinita di Avvio app non corrisponde al tuo branding, puoi personalizzare le icone di Avvio app con il tuo file SVG. Non puoi aggiungere un URL al file SVG, ma devi utilizzare il file SVG stesso.

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

Dimensioni

La larghezza e l'altezza predefinite di Avvio app sono 80px. Puoi modificarle in base alle dimensioni che preferisci:

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

Personalizzazione del bordo

Puoi personalizzare le seguenti opzioni per il bordo di Avvio app:

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

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

Colori di Avvio app

Per impostazione predefinita, Avvio app utilizza il colore intenso.

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

Puoi personalizzare Avvio app in modo che utilizzi un colore diverso. Ad esempio:

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

Disattivare Avvio app

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

ccaas.config({
  disableLauncher: true
})

Quando 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 il contrasto 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 del colore di contrasto

Se le scelte predefinite non soddisfano le esigenze della tua attività, 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 di contrasto e alla posizione, il widget dell'SDK web fornisce 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 del testo.

--text-color: colore predefinito del testo.

--end-color: colore predefinito dei pulsanti finali (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 controllarne 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
Nessuna	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 del menu. Se non viene specificata alcuna variabile di personalizzazione dei pulsanti generali, viene applicato il comportamento predefinito.
Personalizzazioni dei pulsanti del 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 del menu / di dialogo, viene applicato il comportamento predefinito.
Personalizzazioni generali dei pulsanti Personalizzazione dei pulsanti del 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. I pulsanti che NON sono pulsanti del menu o di dialogo vengono visualizzati in base alle personalizzazioni generali. Se non viene specificata alcuna variabile di personalizzazione dei pulsanti generali / del menu / di dialogo, il comportamento predefinito viene applicato per quel pulsante.

Pulsanti generali

Tutti gli altri pulsanti a livello di SDK che non hanno le proprie variabili CSS utilizzano la configurazione e la personalizzazione dei pulsanti generali.

--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 dei pulsanti del 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 dei pulsanti del 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 audio della 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