Design anpassen

Anpassungen an der Web-SDK-Widget-UI, die über die hier dokumentierten hinausgehen, werden nicht unterstützt und können zu unerwartetem Verhalten führen. Google empfiehlt die Verwendung des Headless SDK, wenn Sie erweiterte Anpassungen benötigen.

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

Launcher-Design

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

Das Widget für das Launcher-Design.

  1. Launcher

  2. Symbol für „Öffnen“

  3. Symbol „Schließen“

Symbole

Wenn die Benutzeroberfläche des Standard-Launchers nicht zu Ihrem Branding passt, können Sie die Symbole des Launchers mit Ihrer eigenen SVG-Datei anpassen. Sie können der SVG-Datei keine URL hinzufügen. Es muss die SVG-Datei selbst sein.

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

Beispiel für die Anpassung von Symbolen

Größe

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

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

Interaktionsstatus

Die Rahmen-, Hintergrund- und Vordergrundfarben des Launchers werden für jeden Interaktionsstatus konfiguriert: Standard, Mouseover, Fokus und Aktiv. Jeder Status hat einen eigenen Satz von CSS-Variablen, die alle dasselbe Benennungsmuster haben: --launcher-{state}-{property}.

Anpassung des Launcher-Rahmens

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

  • Rahmen (Farbe, Breite und Stil – werden zusammen mit der CSS-Kurzschreibweise für Rahmen pro Interaktionsstatus festgelegt).
  • Schlagschatten (erhöhen oder verringern)

Der Rahmen des Launchers wird pro Interaktionsstatus mit der CSS-Kurzschreibweise für Rahmen konfiguriert. Es gibt keine separate Variable für die Rahmenfarbe oder die Rahmenbreite.

--launcher-default-border
--launcher-hover-border
--launcher-focus-border
--launcher-active-border
--launcher-shadow

Launcher-Farben

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

#ccaas-widget {
  --launcher-default-border: 6px solid var(--accent-9);
  --launcher-default-background: var(--accent-9);
  --launcher-default-color: var(--accent-contrast);
}

Dasselbe Muster gilt für die Zustände „Hover“, „Fokus“ und „Aktiv“ (jeweils mit einer eigenen *-border-, *-background- und *-color-Variablen). Die vier *-border-Variablen wurden im Abschnitt Anpassung des Launcher-Rahmens aufgeführt. Die verbleibenden acht Hintergrund- und Vordergrund-Zustandsvariablen sind:

--launcher-default-background
--launcher-default-color
--launcher-hover-background
--launcher-hover-color
--launcher-focus-background
--launcher-focus-color
--launcher-active-background
--launcher-active-color

Sie können den Launcher so anpassen, dass eine andere Farbe verwendet wird. Beispiel:

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

Wenn Sie den Hover-, Fokus- und Aktivzustand des Launchers gestalten möchten, wiederholen Sie das Muster mit dem entsprechenden Statuspräfix:

#ccaas-widget {
  --launcher-hover-background: var(--blue-11);
  --launcher-focus-background: var(--blue-11);
  --launcher-active-background: var(--blue-11);
}

Anpassung der Launcher-Farbe

Launcher deaktivieren

Aus ästhetischen Gründen möchten Sie den Web-SDK-Launcher möglicherweise ausblenden und stattdessen einen proaktiven Chat-Trigger verwenden oder den Chat programmatisch 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-Design

Das Fenster für das Widget-Design mit Optionen.

  1. Widget

  2. Logo

Schriftarten

Wählen Sie andere Schriftarten für die 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',
})

Zu den vordefinierten Farben gehören default, blue, green, purple, orange, yellow, gold, red.

Ein Chatfenster mit den Akzentfarben wird angezeigt.

Anpassung der Akzentfarbe

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

Die 12 Akzentstufen folgen dem Radix UI Colors-Skalenmodell. Die vordefinierten Akzente (default, blue, green, purple, orange, yellow, gold, red) stammen aus dieser Skala und können mit der Konfiguration accent verwendet werden. Kopieren Sie für jede andere benannte Skala auf der Radix Colors-Website (mint, crimson, cyan) die 12-stufige Palette in die Werte --accent-1 bis --accent-12.

Position

Wenn der Bereitstellungspunkt #ccaas-widget ist, können Sie die Widget-Position so aktualisieren:

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

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

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

Beispiel für die Logoanpassung.

Anpassung des Widget-Rahmens

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

  • Rahmenlinienfarbe
  • Rahmenbreite
  • Schlagschatten (erhöhen oder verringern)
--widget-border-color
--widget-border-width
--widget-shadow

Wenn der Bereitstellungspunkt #ccaas-widget ist, können Sie den Rahmen des Agentenlogos mit dem folgenden Codebeispiel ausblenden:

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

Sonstige Komponenten

Neben Akzentfarben und der Position bietet das Web SDK-Widget weitere CSS-Variablen, mit denen Sie einige der anderen im Widget verwendeten Komponenten konfigurieren können.

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

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

Die verfügbaren CSS-Variablen für die einzelnen Komponenten sind im nächsten Abschnitt aufgeführt.

Allgemeine CSS-Variablen

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

--text-color: Standardtextfarbe.

--end-color: Standardfarbe der Schaltflächen zum Beenden (Chat beenden, Chat verlassen, Cobrowsing 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 beim Anpassen verschiedener Arten von Schaltflächen in Kombination erläutert.

Benutzerdefinierte Tastenbelegung angewendet Ergebnis
Keine Standardverhalten (alle Schaltflächenstile werden entsprechend dem primären Design angezeigt).
Allgemeine Anpassungen von Tasten Alle Schaltflächen (außer Dialogfelder/Chatbildschirme) werden gemäß den vom Kunden festgelegten Anpassungen angezeigt. Dazu gehören auch Menüschaltflächen.

Wenn eine allgemeine Variable zur Anpassung von Schaltflächen NICHT angegeben ist, wird das Standardverhalten angewendet.

Anpassungen der Menüschaltfläche

Anpassungen der Dialogschaltflächen

Menüschaltflächen werden gemäß der Variable --menu-button angezeigt.

Dialogschaltflächen werden gemäß den Variablen --dialog-primary-button und --dialog-secondary-button angezeigt.

Wenn eine Anpassungsvariable für Menü-/Dialogschaltflächen NICHT angegeben ist, wird das Standardverhalten angewendet.

Allgemeine Anpassungen von Tasten

Anpassen der Menüschaltfläche

Anpassungen der Dialogschaltflächen

Menüschaltflächen werden gemäß der Variable --menu-button angezeigt

Die Dialogschaltflächen 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 Anpassungsvariable für eine allgemeine Schaltfläche, eine Menüschaltfläche oder eine Dialogfeldschaltfläche NICHT angegeben ist, wird das Standardverhalten für diese Schaltfläche angewendet.

Allgemeine Tasten

Für alle anderen SDK-weiten Schaltflächen, 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ärer Button

--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-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color

Sekundäre Schaltflächen (invertiert)

--inverse-button-default-background
--inverse-button-default-border
--inverse-button-default-outline
--inverse-button-default-color
--inverse-button-hover-background
--inverse-button-hover-border
--inverse-button-hover-outline
--inverse-button-hover-color
--inverse-button-active-background
--inverse-button-active-border
--inverse-button-active-outline
--inverse-button-active-color
  
--inverse-button-disabled-background
--inverse-button-disabled-border
--inverse-button-disabled-color
--inverse-button-focus-background
--inverse-button-focus-border
--inverse-button-focus-outline
--inverse-button-focus-color

Beispielsweise die Auswahl der Warteschlange und des Kanals.

--menu-button-default-background
--menu-button-default-border
--menu-button-default-color
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-color
--menu-button-hover-outline
--menu-button-active-background
--menu-button-active-border
--menu-button-active-color
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-color
--menu-button-focus-outline

Ein Beispiel für Menüschaltflächen wird angezeigt.

Dialogfeld-Schaltflächen

Beispiele: Modale Dialogfelder oder Pop-ups.

--dialog-background
--dialog-color
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-color
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-color
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-color
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-color
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-color
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-color
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-color
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-color
--dialog-secondary-button-active-outline

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

Chat-Header

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

Beispiel für ein Chatfenster mit hervorgehobener Kopfzeile.

Chat stummschalten

ccaas.config({
  enableMuteChat: true,
})

Chatfunktion

--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height
--chat-bubble-agent-background
--chat-bubble-agent-color
--chat-bubble-agent-border
--chat-bubble-agent-border-radius
--chat-bubble-user-background
--chat-bubble-user-color
--chat-bubble-user-border
--chat-bubble-user-border-radius

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

Anpassung von Chat-Bubbles

Nachricht:

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

Beispiel für ein Chatfenster mit hervorgehobenen benutzerdefinierten Nachrichtenblasen.

--message-progress-color
--message-button-font-family
--message-button-font-size
--message-button-default-background
--message-button-default-border
--message-button-default-color
--message-button-default-font-style
--message-button-hover-background
--message-button-hover-border
--message-button-hover-color
--message-button-hover-font-style
--message-button-focus-background
--message-button-focus-border
--message-button-focus-color
--message-button-focus-font-style
--message-button-active-background
--message-button-active-border
--message-button-active-color
--message-button-active-font-style
--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style

Virtueller Agent nach der Sitzung:

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

Ein Beispiel für das Fenster nach der Sitzung wird angezeigt.

Link zum benutzerdefinierten Formular:

--form-card-background
--form-card-title-color
--form-card-status-color
--form-card-subtitle-color
--form-card-image-height
--form-card-title-font-size
--form-card-title-font-weight
--form-card-border-radius
--form-card-subtitle-font-weight
--form-card-subtitle-font-size

Benutzerdefiniertes Formular:

--form-title-font-size
--form-title-font-weight
--form-title-color
--form-title-font-style
--form-header-font-size
--form-header-font-weight
--form-header-color
--form-header-font-style
--form-footer-font-size
--form-footer-font-weight
--form-footer-color
--form-footer-font-style
--form-field-border-radius
--form-field-cursor-color
--form-field-label-font-size
--form-field-label-font-weight
--form-field-label-color
--form-field-label-font-style
--form-field-active-border-color
--form-field-active-border-width
--form-field-inactive-border-color
--form-field-inactive-border-width
--form-field-list-selection-checkbox-color