Opracowywanie niestandardowego widgetu czatu na żywo

Firma Microsoft udostępnia opcję utworzenia niestandardowego widżetu czatu na żywo, który można dołączyć do konta usługi Dynamics 365 Customer Service. Każdy składnik niestandardowego widżetu czatu na żywo można dostosować pod kątem funkcji i interfejsu użytkownika.

W zależności od wymagań i wyników możesz dostosować widżet czatu przy użyciu jednej z następujących opcji:

• Korzystanie z dostosowywalnego widżetu czatu na żywo 2.0
• Opracowywanie własnego widżetu

Korzystanie z dostosowywalnego widżetu czatu na żywo 2.0

Dostosowywalny widżet czatu na żywo 2.0 umożliwia edytowanie wszystkich elementów widżetu, takich jak czcionka, kolory i styl, dzięki czemu można dopasować widżet do obrazu marki. Dostosowany widżet pomaga pielęgnować zaufanie i wiarygodność, rozróżniać markę, wspierać pozytywne połączenia emocjonalne i zwiększać wartość, którą klienci przypisują produktowi.

Nowy widżet czatu na żywo 2.0 jest oparty na zestawie SDK czatu wielokanałowego i bibliotece składników interfejsu użytkownika widżetu czatu na żywo.

Deweloper portalu — dostosowywanie standardowego interfejsu użytkownika opartego na skryptach

Opcja dewelopera portalu umożliwia personalizowanie interfejsu użytkownika widżetu czatu, ale nie modyfikuje wbudowanych ustawień funkcji w centrum administracyjnym usługi Copilot. Aby dostosować, możesz użyć skryptu "data-customization-callback", który łączy wbudowany widżet z funkcją JavaScript. Funkcja może zawierać dostosowania stylów CSS do komponentów czatu według tych samych zasad co biblioteka komponentów UI widżetu wielokanałowego czatu na żywo.

Edytowanie skryptu widżetu czatu na żywo w celu włączenia widżetu czatu na żywo 2.0

Aby użyć widżetu czatu na żywo 2.0 i dostosowywania opartego na skryptach, zmodyfikuj fragment kodu gotowego widżetu czatu na żywo 2.0 w następujący sposób.

1. W centrum administracyjnym usługi Copilot otwórz strumień roboczy czatu i wybierz pozycję Kopiuj skrypt czatu na żywo 2.0, aby skopiować fragment kodu.
2. Utwórz nową funkcję Języka JavaScript ze wszystkimi stylami składników. Więcej informacji: Wielokanałowy widżet czatu
3. Dodaj "v2" po atrybucie skryptu.
4. Dodaj funkcję "data-customization-callback" i odwołaj się do funkcji JavaScript.

Zaktualizowany fragment kodu będzie wyglądać w następujący sposób.

Przykładowy zrzut ekranu przedstawiający widżet czatu 2.0 dostosowany do zwiększenia rozmiaru jest następujący.

Obejrzyj film wideo z przewodnikiem przedstawiający konfigurowanie widżetu czatu na żywo.

Personalizowanie widżetu poprzez zarządzanie interakcjami online

Orkiestracja interakcji sieciowych umożliwia przeniesienie przesłonięcia konfiguracji z kodu JavaScript strony do centrum administracyjnego. Dowiedz się więcej w temacie Deploy chat widgets across websites using a single tag (Wdrażanie widżetów czatu w witrynach internetowych przy użyciu pojedynczego tagu).

Opracowywanie własnego widżetu

Skorzystaj z informacji w poniższych sekcjach, aby utworzyć własny widżet.

Biblioteka składników interfejsu użytkownika widgetu czatu na żywo Obsługa wielokanałowa

Biblioteka składników interfejsu użytkownika widgetu czatu na żywo udostępnia platformę składników React wielokrotnego użytku. Składniki są tworzone przy użyciu biblioteki Fluent UI. Dowiedz się więcej o bibliotece wielokanałowych składników interfejsu użytkownika widżetu czatu na żywo.

Zestaw SDK czatu wielokanałowego

Zestaw SDK czatu wielokanałowego to pakiet typu open source, który udostępnia metody i funkcje czatu w celu dodania funkcji do widżetu czatu na żywo. Dowiedz się więcej na temat zestawu SDK czatu aplikacji Obsługa wielokanałowa.

Dostosowywanie widżetu czatu na żywo

Po zainstalowaniu najnowszej wersji zestawu SDK czatu wielokanałowego dostosuj widżet czatu na żywo przy użyciu metod zestawu SDK czatu wielokanałowego oraz edytując podstawowe style CSS składników interfejsu użytkownika widżetu wielokanałowego czatu na żywo.

Informacje pokrewne

Dostosowywanie widgetów rozmowy na żywo dla aplikacji mobilnych
startChat
closeChat
lcw:closeChat
lcw:threadUpdate
lcw:chatRetrieved
lcw:chatQueued