Penyesuaian tema

Setiap penyesuaian yang diterapkan pada UI widget SDK web di luar yang didokumentasikan di sini tidak didukung dan dapat menyebabkan perilaku yang tidak terduga. Google merekomendasikan penggunaan Headless SDK jika Anda memerlukan penyesuaian yang lebih canggih.

Untuk memastikan penyesuaian tema Anda muncul seperti yang diharapkan, Google merekomendasikan agar Anda menguji perubahan di lingkungan pengujian sebelum men-deploy-nya ke produksi.

Desain peluncur

Ikon, ukuran, posisi, dan warna peluncur dapat disesuaikan.

1. Launcher

2. Ikon Buka

3. Ikon Tutup

Ikon

Jika UI peluncur default tidak sesuai dengan branding Anda, Anda dapat menyesuaikan ikon peluncur dengan file SVG Anda sendiri. Anda tidak dapat menambahkan URL ke file SVG, file tersebut harus berupa file SVG itu sendiri.

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

Ukuran

Lebar dan tinggi peluncur default adalah 80px. Anda dapat mengubahnya menjadi ukuran yang berbeda:

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

Penyesuaian batas

Anda dapat menyesuaikan opsi berikut untuk batas peluncur:

• Warna batas
• Lebar batas
• Bayangan drop (tambah atau kurangi)

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

Warna peluncur

Secara default, peluncur menggunakan warna aksen.

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

Anda dapat menyesuaikan peluncur untuk menggunakan warna yang berbeda. Contoh:

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

Menonaktifkan peluncur

Untuk alasan estetika, Anda mungkin ingin menyembunyikan peluncur web SDK, dan memilih untuk menggunakan pemicu chat proaktif atau memulai chat secara terprogram. Anda dapat menyembunyikan atau menonaktifkan UI peluncur menggunakan disableLauncher:

ccaas.config({
  disableLauncher: true
})

Jika peluncur dinonaktifkan, Anda dapat membuka widget dengan:

ccaas.show()

Desain widget

1. Widget

2. Logo

Font

Pilih font yang berbeda untuk antarmuka pengguna Anda.

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

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

--font-ja: Hiragino Sans, Meiryo

Warna aksen

Anda dapat menyesuaikan aksen color dengan memilih opsi warna bawaan menggunakan konfigurasi berikut:

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

Warna yang telah ditentukan mencakup blue, green, purple, orange, yellow, gold, red.

Penyesuaian aksen

Jika pilihan yang telah ditentukan sebelumnya tidak sesuai dengan kebutuhan bisnis Anda, Anda dapat menyesuaikan gaya dengan variabel 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);
}

Posisi

Jika titik pemasangan adalah #ccaas-widget, Anda dapat memperbarui posisi widget menggunakan:

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

Logo

Pilih logo kustom yang akan muncul di widget.

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

Menyembunyikan batas logo agen

Jika titik pemasangan adalah #ccaas-widget, Anda dapat menyembunyikan Batas Logo Agen menggunakan contoh kode berikut:

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

Komponen lain-lain

Selain warna aksen dan posisi, widget Web SDK telah menyediakan lebih banyak variabel CSS untuk mengonfigurasi beberapa komponen lain yang digunakan dalam widget.

Jika titik pemasangan adalah #ccaas-widget, Anda dapat menyesuaikannya menggunakan contoh kode berikut:

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

Variabel CSS umum

--text-font: Jenis font teks default.

--text-color: Warna teks default.

--end-color: Warna default tombol akhir (akhiri chat, keluar dari chat, akhiri penjelajahan bersama)

Ikon konfirmasi

Ikon konfirmasi yang muncul di berbagai halaman di seluruh SDK dapat disesuaikan. Anda dapat mengganti ikon default dengan ikon kustom, serta mengontrol ukuran dan warna.

--confirmation-icon-size

--confirmation-icon-color

Tombol

Anda dapat mengontrol penyesuaian berbagai jenis tombol secara terperinci. Tabel berikut menjelaskan perilaku yang diharapkan saat menyesuaikan berbagai jenis tombol secara bersamaan.

Penyesuaian Tombol Diterapkan	Hasil
Tidak ada	Perilaku default (semua gaya tombol muncul sesuai dengan tema utama).
Penyesuaian Tombol Umum	Semua tombol (kecuali layar Dialog/Chat) muncul sesuai penyesuaian yang ditetapkan oleh pelanggan. Hal ini mencakup Tombol Menu. Jika ada variabel penyesuaian tombol umum yang TIDAK ditentukan, perilaku default akan diterapkan.
Penyesuaian Tombol Menu Penyesuaian Tombol Dialog	Tombol Menu muncul sesuai dengan variabel --menu-button. Tombol Dialog muncul sesuai dengan variabel --dialog-primary-button dan --dialog-secondary-button Jika ada variabel penyesuaian tombol menu / dialog yang TIDAK ditentukan, perilaku default akan diterapkan.
Penyesuaian Tombol Umum Penyesuaian Tombol Menu Penyesuaian Tombol Dialog	Tombol Menu muncul sesuai dengan variabel --menu-button Tombol Dialog muncul sesuai dengan variabel --dialog-primary-button dan --dialog-secondary-button. Tombol yang BUKAN Tombol Menu atau Tombol Dialog akan muncul sesuai dengan penyesuaian umum. Jika ada variabel penyesuaian tombol umum / menu / dialog yang TIDAK ditentukan, perilaku default akan diterapkan untuk tombol tersebut.

Tombol umum

Semua tombol lain di seluruh SDK yang tidak memiliki variabel CSS sendiri menggunakan konfigurasi dan penyesuaian Tombol Umum.

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

Tombol utama

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

Tombol sekunder

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

Tombol sekunder (kebalikan)

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

Tombol menu

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

Penyesuaian tombol menu

Tombol Dialog

Misalnya, modal atau pop-up.

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

Header 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

Bisukan Chat

ccaas.config({
  enableMuteChat: true,
})

Balon 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

### Penyesuaian balon chat

Pesan

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

Agen Virtual Pasca-Sesi

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