Design anpassen

Alle Anpassungen, die über die hier dokumentierten hinaus an der Benutzeroberfläche des Web-SDK-Widgets vorgenommen werden, werden nicht unterstützt und können zu unerwartetem Verhalten führen. Google empfiehlt, das Headless SDK zu verwenden, wenn Sie erweiterte Anpassungen benötigen.

Damit Ihre Designanpassungen wie erwartet angezeigt werden, empfiehlt Google, dass Sie Ihre Änderungen in einer Testumgebung testen, bevor Sie sie in der Produktion bereitstellen.

Launcher-Design

Das Symbol, die Größe, die Position und die Farbe des Launchers können angepasst werden.

Das Widget für das Launcher-Design.

Launcher
Symbol „Öffnen“
Symbol „Schließen“

Symbole

Wenn die Benutzeroberfläche des Standard-Launchers nicht zu Ihrem Branding passt, können Sie die Symbole des Launchers mit einer eigenen SVG-Datei anpassen. Sie können keine URL zur SVG-Datei hinzufügen, sondern nur die SVG-Datei selbst.

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

Beispiel für die Anpassung eines Symbols.

Größe

Die Standardbreite und ‑höhe des Launchers ist 80px. Sie können die Größe ändern:

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

Rahmen anpassen

Sie können die folgenden Optionen für den Launcher-Rahmen anpassen:

Rahmenlinienfarbe
Rahmenbreite
Schlagschatten (vergrößern oder verkleinern)

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

Launcher-Farben

Standardmäßig wird für den Launcher die Akzentfarbe verwendet.

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

Sie können die Farbe des Launchers anpassen. Beispiel:

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

Launcher deaktivieren

Aus ästhetischen Gründen kann es sinnvoll sein, den Launcher des Web-SDK auszublenden und stattdessen einen proaktiven Chat-Trigger zu verwenden oder den Chat programmatisch zu starten. Sie können die Benutzeroberfläche des Launchers mit disableLauncher ausblenden oder deaktivieren:

ccaas.config({
  disableLauncher: true
})

Wenn der Launcher deaktiviert ist, können Sie das Widget so öffnen:

ccaas.show()

Widget
Logo

Schriftarten

Wählen Sie verschiedene Schriftarten für Ihre Benutzeroberfläche aus.

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

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

–-font-ja: Hiragino Sans, Meiryo

Akzentfarbe

Sie können die Akzentfarbe color anpassen, indem Sie mit der folgenden Konfiguration eine vordefinierte Farboption auswählen:

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

Vordefinierte Farben sind blue, green, purple, orange, yellow, gold und red.

Ein Chatfenster mit den Akzentfarben wird angezeigt.

Akzent anpassen

Wenn die vordefinierten Optionen nicht Ihren geschäftlichen Anforderungen entsprechen, können Sie den Stil mit den CSS-Variablen anpassen.

#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);
}

Position

Wenn der Bereitstellungspunkt #ccaas-widget ist, können Sie die Widget-Position mit dem folgenden Befehl aktualisieren:

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

Logo

Wählen Sie ein benutzerdefiniertes logo aus, das im Widget angezeigt werden soll.

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

Rahmen des Agentenlogos ausblenden

Wenn der Mount-Punkt #ccaas-widget ist, können Sie den Rahmen des Agent-Logos mit dem folgenden Codebeispiel ausblenden:

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

Verschiedene Komponenten

Neben Akzentfarben und der Position bietet das Web-SDK-Widget weitere CSS-Variablen zum Konfigurieren einiger der anderen im Widget verwendeten Komponenten.

Wenn der Mount-Point #ccaas-widget ist, können Sie ihn mit dem folgenden Codebeispiel anpassen:

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

Allgemeine CSS-Variablen

--text-font: Standardschriftfamilie für Text.

--text-color: Standardtextfarbe.

--end-color: Standardfarbe der End-Schaltflächen (Chat beenden, Chat verlassen, gemeinsame Browsersitzung beenden)

Bestätigungssymbol

Das Bestätigungssymbol, das auf verschiedenen Seiten im SDK angezeigt wird, kann angepasst werden. Sie können das Standardsymbol durch ein benutzerdefiniertes Symbol ersetzen und die Größe und Farbe anpassen.

--confirmation-icon-size

--confirmation-icon-color

Schaltflächen

Sie können die Anpassung verschiedener Schaltflächentypen detailliert steuern. In der folgenden Tabelle wird das erwartete Verhalten bei der Kombination verschiedener Arten von benutzerdefinierten Schaltflächen erläutert.

Schaltflächenanpassungen angewendet	Ergebnis
Keine	Standardverhalten: Alle Schaltflächenstile werden entsprechend dem primären Design angezeigt.
Allgemeine Anpassungen von Schaltflächen	Alle Schaltflächen (mit Ausnahme von Dialogfeldern/Chatbildschirmen) werden gemäß den vom Kunden festgelegten Anpassungen angezeigt. Dazu gehören auch Menüschaltflächen. Wenn eine allgemeine Variable zur Schaltflächenanpassung NICHT angegeben ist, wird das Standardverhalten angewendet.
Anpassungen der Menüschaltfläche Schaltflächen im Dialogfeld anpassen	Menüschaltflächen werden entsprechend der Variablen `--menu-button` angezeigt. Schaltflächen für Dialogfelder werden entsprechend den Variablen `--dialog-primary-button` und `--dialog-secondary-button` angezeigt. Wenn eine Anpassungsvariable für Menü- oder Dialogfeldschaltflächen NICHT angegeben ist, wird das Standardverhalten angewendet.
Allgemeine Anpassungen von Schaltflächen Menüschaltfläche anpassen Schaltflächen im Dialogfeld anpassen	Menüschaltflächen werden entsprechend der Variablen `--menu-button` angezeigt. Die Schaltflächen im Dialogfeld werden entsprechend den Variablen `--dialog-primary-button` und `--dialog-secondary-button` angezeigt. Schaltflächen, die KEINE Menü- oder Dialogschaltflächen sind, werden gemäß den allgemeinen Anpassungen angezeigt. Wenn eine allgemeine / Menü-/Dialogschaltflächen-Anpassungsvariable NICHT angegeben ist, wird das Standardverhalten für diese Schaltfläche angewendet.

Allgemeine Schaltflächen

Für alle anderen Schaltflächen im SDK, die keine eigenen CSS-Variablen haben, wird die allgemeine Schaltflächenkonfiguration und -anpassung verwendet.

--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

Primäre Schaltflächen

--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

Sekundäre Schaltflächen

--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

Sekundäre Schaltflächen (invers)

--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

Menüschaltflächen

Anpassen der Menüschaltfläche.

--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

Menüschaltfläche anpassen

Dialogschaltflächen

Beispiele: Modale Fenster oder Pop-ups.

--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

Ein Beispiel für Dialogfeld-Schaltflächen mit Optionen zum Beenden eines Chats wird angezeigt.

Chat-Kopfzeile

--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

Beispiel für ein Chatfenster, in dem die Kopfzeile hervorgehoben ist.

Chat stummschalten

ccaas.config({
  enableMuteChat: true,
})

Chatblase

--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

Ein Beispiel für ein Chatfenster mit hervorgehobenen Nachrichtenblasen wird angezeigt.

### Chat-Bubble anpassen

Meldung

--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

Ein Beispiel für ein Chatfenster mit hervorgehobenen benutzerdefinierten Nachrichtenblasen wird angezeigt.

Virtueller Kundenservicemitarbeiter nach der Sitzung

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

Hier sehen Sie ein Beispiel für das Post-Session-Zeitfenster.

Design anpassen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.