WID/Current/SDK/WebChat-combined - Revision history

WikiSysop at 10:16, July 14, 2022

2022-07-14T10:16:03Z

Ed.jamer@genesys.com: Text replacement - "Genesys Cloud" to "Genesys Cloud CX"

2021-11-09T21:27:36Z

Text replacement - "Genesys Cloud" to "Genesys Cloud CX"

Monique.gionet@genesys.com: Published

2021-10-12T14:33:07Z

Published

Monique.gionet@genesys.com: Published

2021-10-12T14:28:10Z

Published

Monique.gionet@genesys.com: Published

2021-08-26T17:16:41Z

Published

Monique.gionet@genesys.com: Published

2021-07-27T12:01:50Z

Published

Monique.gionet@genesys.com: Published

2021-07-23T18:06:35Z

Published

Chrissy.forrest@genesys.com: Published

2021-05-12T15:05:09Z

Published

Chrissy.forrest@genesys.com: Published

2021-05-12T15:03:22Z

Published

Chrissy.forrest@genesys.com: Published

2021-05-04T17:05:29Z

Published

@@ Line 1,539: / Line 1,539: @@
 </source>
-You must return <tt>true</tt> or <tt>false</tt> to indicate that validation has passed or failed, respectively. If you return false, the WebChat form will not submit, and the input will be highlighted in red. This is achieved by adding the CSS class "cx-error" to the input.
+You must return <tt>true</tt> or <tt>false</tt> to indicate that validation has passed or failed, respectively. If you return false, the WebChat form will not submit, and the input will be highlighted in red. This is achieved by adding the CSS class "cx-error" to the input. The image below displays the the field where a user input validation error has occurred, with the field highlighted in red.
 ====Validation function arguments====
@@ Line 1,757: / Line 1,759: @@
+}
 </source><br />
 |Status=No
 }}
 }}

@@ Line 1,580: / Line 1,580: @@
 ===Form submit===
-Custom input field form values are submitted to the server as key value pairs under the userData section of the form submit request, where input field names will be the property keys. During the submit, this data is merged along with the userData defined in the {{Link-SomewhereInThisVersion|manual=SDK|topic=WebChat-combined|anchor=commands|display text=WebChat.open}} command.{{NoteFormat|Depending on the API used (PureEnagage V2 API or Genesys Cloud) the payload structure in the request can vary for each, but the section below explains how the form data is submitted by the WebChat UI plugin when using custom forms.|}}Below is the internal form data object defined in the WebChat plugin by default. Since firstname, lastname, nickname, email, and subject are reserved keywords, users are not allowed to have custom fields with the same name.<source lang="javascript">
+Custom input field form values are submitted to the server as key value pairs under the userData section of the form submit request, where input field names will be the property keys. During the submit, this data is merged along with the userData defined in the {{Link-SomewhereInThisVersion|manual=SDK|topic=WebChat-combined|anchor=commands|display text=WebChat.open}} command.{{NoteFormat|Depending on the API used (PureEnagage V2 API or Genesys Cloud CX) the payload structure in the request can vary for each, but the section below explains how the form data is submitted by the WebChat UI plugin when using custom forms.|}}Below is the internal form data object defined in the WebChat plugin by default. Since firstname, lastname, nickname, email, and subject are reserved keywords, users are not allowed to have custom fields with the same name.<source lang="javascript">
+{
    firstname: '',

@@ Line 1,384: / Line 1,384: @@
 This JSON definition generates the following output:
-[[File:WebChat CustomForm 001.png|400px]]
+[[File:WebChat CustomForm 001.png|400px|alt=WebChat widget output using the JSON definition above]]
 ===Properties===
@@ Line 1,691: / Line 1,691: @@
 WebChat offers a v2 emoji menu that lets you choose which emojis to include in the emoji menu.
-[[File:WebChat-Emoji-menu.png|link=https://all.docs.genesys.com/File:WebChat-Emoji-menu.png|401x401px]]
+[[File:WebChat-Emoji-menu.png|401x401px|alt=The WebChat V1 and V2 emoji menus]]
 ===Differences between v1 and v2===
@@ Line 1,708: / Line 1,708: @@
 *When 25 or more emojis are configured, the menu has three rows, and a scrollbar appears.
-[[File:Emoji-screenshot-dark-themed.PNG|frameless|750x750px]]
+[[File:Emoji-screenshot-dark-themed.PNG|frameless|750x750px|alt=The WebChat emoji menu in dark theme displayed with and without the scrollbar]]
 Configure the v2 emoji menu by passing a string containing emoji into the WebChat configuration or through localization.{{NoteFormat|If you define an emoji list in the WebChat configuration, it will override any emoji lists defined in localization files.|1}}You configure the emoji list by specifying a string of emoji characters, like "🤩🤪🤭🤫". WebChat will parse this string and arrange them in the emoji menu.<source lang="JAVASCRIPT">

@@ Line 17: / Line 17: @@
 |Media=Image
 |image=WebChat-Main-new.PNG
 |structuredtext=The WebChat Widget allows a customer to start a live chat with a customer service agent. The UI appears within the page and follows the customer as they traverse your website. Other features include minimize/maximize, auto-reconnect, and a built-in invite feature.
 ===Usage===
@@ Line 58: / Line 59: @@
 '''Dark theme'''
-[[File:WebChat_Form_Desktop_Dark.png|150x150px]]
+[[File:WebChat_Form_Desktop_Dark.png|150x150px|alt=The WebChat widget in dark theme in desktop view]]
-[[File:WebChat_Form_Portrait_Dark.png|150x150px]]
+[[File:WebChat_Form_Portrait_Dark.png|150x150px|alt=The WebChat widget in dark theme in mobile portrait view]]
-[[File:WebChat_Form_Landscape_Dark.png|150x150px]]
+[[File:WebChat_Form_Landscape_Dark.png|150x150px|alt=The WebChat widget in dark theme in mobile landscape view]]
-[[File:Widgets_WebChat_Typing_Indicator_Dark_0721.png|201x201px]]
+[[File:Widgets_WebChat_Typing_Indicator_Dark_0721.png|201x201px|alt=The WebChat widget in dark theme with initial chat bot interaction]]
-[[File:WebChat_Transcript_Desktop_Dark-without-cobrowse.PNG|201x201px]]
+[[File:WebChat_Transcript_Desktop_Dark-without-cobrowse.PNG|201x201px|alt=The WebChat widget in dark theme with agent interaction]]
-[[File:WebChat Transcript Portrait Dark-without-cobrowse.png|267x267px]]
+[[File:WebChat Transcript Portrait Dark-without-cobrowse.png|267x267px|alt=The WebChat widget in dark theme with Knowledge Center interaction]]
-[[File:WebChat Transcript Landscape Dark without-cobrowse.png|150x150px]]
+[[File:WebChat Transcript Landscape Dark without-cobrowse.png|150x150px|alt=The WebChat widget in dark theme displaying the chat field with emojis and attachments options]]
 '''Light theme'''
-[[File:WebChat_Form_Desktop_Light.png||150x150px]]
+[[File:WebChat_Form_Desktop_Light.png||150x150px|alt=The WebChat widget in light theme in desktop view]]
-[[File:WebChat_Form_Portrait_light.png|150x150px]]
+[[File:WebChat_Form_Portrait_light.png|150x150px|alt=The WebChat widget in light theme in mobile portrait view]]
-[[File:WebChat_Form_Landscape_light.png|150x150px]]
+[[File:WebChat_Form_Landscape_light.png|150x150px|alt=The WebChat widget in light theme in mobile landscape view]]
-[[File:Widgets_WebChat_Typing_Indicator_0721.png|201x201px]]
+[[File:Widgets_WebChat_Typing_Indicator_0721.png|201x201px|alt=The WebChat widget in light theme with initial chat bot interaction]]
-[[File:WebChat_Transcript_Desktop_light-without-cobrowse.PNG|201x2012px]]
+[[File:WebChat_Transcript_Desktop_light-without-cobrowse.PNG|201x2012px|alt=The WebChat widget in light theme with agent interaction]]
-[[File:WebChat Transcript Portrait Light without cobrowse.png|267x267px]]
+[[File:WebChat Transcript Portrait Light without cobrowse.png|267x267px|alt=The WebChat widget in light theme with Knowledge Center interaction]]
-[[File:WebChat Transcript Landscape Light without cobrowse.png|150x150px]]
+[[File:WebChat Transcript Landscape Light without cobrowse.png|150x150px|alt=The WebChat widget in light theme displaying the chat field with emojis and attachments options]]
 {{NoteFormat|The dark theme is active by default. You may also change colors/themes for widgets by following the instructions on the  {{Link-SomewhereInThisVersion|manual=Developer|topic=GWCCustomize|display text=Customize appearance}} page.|}}<br />
@@ Line 1,590: / Line 1,591: @@
 </source>{{NoteFormat|Once the Chat is started, the customer messages display either the <tt>nickname</tt> or the <tt>firstname</tt> specified during registration as the '''Name'''.|}}<br />
 ====Example====
-The example below shows how the custom form data given in the WebChat form fields have been mapped as form data object.
+The example below shows how the custom form data given in the WebChat form fields have been mapped as a form data object.
 The form fields with reserved keywords like firstname, lastname, and email will be sent as top level and the rest of the fields will be sent under userData to the WebChatService plugin.
@@ Line 1,671: / Line 1,672: @@
+}
 </source>
-[[ File:WebChat_CustomForm_Dark_v1.png|frameless|400px|left]]<source lang="javascript">
+[[ File:WebChat_CustomForm_Dark_v1.png|frameless|400px|left|alt=The WebChat window displaying top level information and user data]]<source lang="javascript">
+{
    firstname: 'John',

@@ Line 1,588: / Line 1,588: @@
    userData: {}
+}
-</source>
+</source>{{NoteFormat|Once the Chat is started, the customer messages display either the <tt>nickname</tt> or the <tt>firstname</tt> specified during registration as the '''Name'''.|}}<br />
 ====Example====
 The example below shows how the custom form data given in the WebChat form fields have been mapped as form data object.

@@ Line 9: / Line 9: @@
 |Section={{Section
 |alignment=Vertical
-|structuredtext={{Video|id=441169402}}
+|structuredtext={{Video|id=545672854}}<br />
 |Status=No
 }}{{Section
@@ Line 78: / Line 78: @@
 |anchor=config
 |alignment=Vertical
-|structuredtext=WebChat and WebChatService share the '''_genesys.widgets.webchat''' configuration namespace. WebChat has UI options while WebChatService has connection options.
+|structuredtext={{Video|id=441169402}}
 {{AnchorDiv|example}}
 ===Example===

@@ Line 8: / Line 8: @@
 |Role=Developer
 |Section={{Section
 |sectionHeading=Overview
 |anchor=overview