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

Monique.gionet@genesys.com: Published

2021-09-28T16:40:23Z

Published

Chrissy.forrest@genesys.com: Published

2021-05-12T15:02:19Z

Published

Chrissy.forrest@genesys.com: Published

2021-04-30T20:00:10Z

Published

Chrissy.forrest@genesys.com: Published

2021-03-22T20:11:41Z

Published

Chrissy.forrest@genesys.com: Published

2021-01-06T17:18:44Z

Published

Chrissyforrest: Published

2020-10-26T18:03:51Z

Published

Show changes

Chrissyforrest: Published

2020-07-28T19:22:57Z

Published

WikiSysop: Text replacement - "\|Platform=([^\|])GenesysEngage-onpremises([\|])" to "|Platform=$1GenesysEngage-cloud$2"

2020-07-25T02:37:15Z

Text replacement - "\|Platform=([^\|]*)GenesysEngage-onpremises([\|]*)" to "|Platform=$1GenesysEngage-cloud$2"

WikiSysop: Text replacement - "\|Platforms?=([^\|])PureEngage([\|])" to "|Platform=$1GenesysEngage-onpremises$2"

2020-07-15T11:51:23Z

Text replacement - "\|Platforms?=([^\|]*)PureEngage([\|]*)" to "|Platform=$1GenesysEngage-onpremises$2"

Chrissyforrest: Published

2020-04-22T22:37:28Z

Published

@@ Line 17: / Line 17: @@
 The Callback Widget provides a form to fetch user details such as name, phone number, and email—and whether the customer would like an immediate callback or would prefer to receive a call at another time of their choosing. Callback then submits this information to Customer Service. The times that Callback displays are based on agent availability, meaning the user can select a time that works for everyone.
-[[File:Callback MainScreen.jpg|418x418px]]
+[[File:Callback MainScreen.jpg|418x418px|alt=The Callback main screen where you submit all relevant information in order to receive a call]]
 ===Usage===
 Use the following methods to launch Callback manually:
@@ Line 59: / Line 59: @@
 '''Dark theme'''
-[[File:Callback_Calendar_Desktop.jpg|150x150px]]
+[[File:Callback_MobileMode_Potrait.jpg|150x150px|alt=Mobile full screen view of the Callback UI in portrait orientation in Dark Mode]]
-[[File:Callback_ChooseTime.jpg|150x150px]]
+[[File:Callback_ChooseTime.jpg|150x150px|alt=The dropdown menu in the Callback UI in Dark Mode displaying callback options]]
-[[File:Callback_MobileMode_Potrait.jpg|150x150px]]
+[[File:Callback_Calendar_Desktop.jpg|150x150px|alt=The Callback UI in Dark Mode displaying a Calendar with a list of dates and times to choose from]]
-[[File:Callback_Mobile_DarkMode_Landscape.jpg|150x150px]]
+[[File:Callback_Mobile_DarkMode_Landscape.jpg|150x150px|alt=Mobile full screen view of the Callback UI in landscape orientation Dark Mode]]
 '''Light theme'''
-[[File:Callback_DateChoosen_LightMode.jpg|150x150px]]
+[[File:Callback_DateChoosen_LightMode.jpg|150x150px|alt=View of the Callback UI in Light Mode]]
-[[File:Callback_LightPotrait_Mobile.jpg|150x150px]]
+[[File:Callback_LightPotrait_Mobile.jpg|150x150px|alt=Mobile full screen view of the Callback UI in portrait orientation in Light Mode]]
-[[File:Callback_CountryCodes_LightMode.jpg|150x150px]]
+[[File:Callback_CountryCodes_LightMode.jpg|150x150px|View of the drop down list of country codes in Light Mode]]
-[[File:Callback_Done_Light_28022020.jpg|150x150px]]
+[[File:Callback_Done_Light_28022020.jpg|150x150px|alt=Confirmation window with callback details in Light Mode]]
 |Status=No
 }}{{Section
@@ Line 707: / Line 707: @@
 Using this definition will result in this output:
-[[File:Callback MainScreen 28022020.jpg|555x555px]]
+[[File:Callback MainScreen 28022020.jpg|555x555px|alt=The Callback main screen in Dark Mode where you submit all relevant information in order to receive a call]]
 {{NoteFormat|Form fields with id '''cx_form_schedule_options''' and '''cx_form_schedule_time''' are not customizable.|}}
 ===Properties===
@@ Line 767: / Line 767: @@
 ====HTML output====
 <source lang="javascript">
-<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
+<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
 </source>

@@ Line 8: / Line 8: @@
 |Role=Developer
 |Section={{Section
 |sectionHeading=Overview
 |alignment=Vertical
-|structuredtext=Features of the Callback Widget
+|structuredtext={{NoteFormat|This documentation relies on Genesys Callback APIs available to Engage Cloud customers. The only supported version is v3 as exposed by  {{#Widget:ExtLink|link=https://developer.genesyscloud.com/reference/engagement/Callbacks/index.html#bookCallbackExternal|displaytext=Engagement API}}.|1}}
 The Callback Widget provides a form to fetch user details such as name, phone number, and email—and whether the customer would like an immediate callback or would prefer to receive a call at another time of their choosing. Callback then submits this information to Customer Service. The times that Callback displays are based on agent availability, meaning the user can select a time that works for everyone.
@@ Line 765: / Line 767: @@
 ====HTML output====
 <source lang="javascript">
-<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
+<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
 </source>

@@ Line 10: / Line 10: @@
 |sectionHeading=Overview
 |alignment=Vertical
-|structuredtext={{NoteFormat|This documentation relies on Genesys Callback APIs available to Engage Cloud customers. The only supported version is v3 as exposed by  {{#Widget:ExtLink|link=https://developer.genesyscloud.com/reference/engagement/Callbacks/index.html#bookCallbackExternal|displaytext=Engagement API}}.|1}}
+|structuredtext=Features of the Callback Widget
 The Callback Widget provides a form to fetch user details such as name, phone number, and email—and whether the customer would like an immediate callback or would prefer to receive a call at another time of their choosing. Callback then submits this information to Customer Service. The times that Callback displays are based on agent availability, meaning the user can select a time that works for everyone.
@@ Line 763: / Line 765: @@
 ====HTML output====
 <source lang="javascript">
-<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
+<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
 </source>

@@ Line 763: / Line 763: @@
 ====HTML output====
 <source lang="javascript">
-<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
+<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
 </source>

@@ Line 704: / Line 704: @@
 [[File:Callback MainScreen 28022020.jpg|555x555px]]
 ===Properties===
 Each input definition can contain any number of properties. These are categorized in two groups: ''Special Properties'', which are custom properties used internally to handle rendering logic, and ''HTML Attributes'' which are properties that are applied directly as HTML attributes on the input element.
@@ Line 762: / Line 763: @@
 ====HTML output====
 <source lang="javascript">
-<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
+<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
 </source>

@@ Line 6: / Line 6: @@
 |ComingSoon=No
 |Platform=GenesysEngage-cloud
 |Section={{Section
 |sectionHeading=Overview
@@ Line 52: / Line 53: @@
 Switching between desktop and mobile mode is done automatically by default. You may configure Genesys Widgets to switch between Desktop and Mobile mode manually if necessary.
 ===Screenshots===
-'''"Dark" Theme'''
+'''Dark theme'''
-'''"Light" Theme'''
+[[File:Callback_Calendar_Desktop.jpg|150x150px]]
-<gallery>
+[[File:Callback_ChooseTime.jpg|150x150px]]
-Callback_DateChoosen_LightMode.jpg|Desktop Callback view with selected date and time
+[[File:Callback_MobileMode_Potrait.jpg|150x150px]]
-Callback_LightPotrait_Mobile.jpg|Mobile fullscreen view in portrait orientation
+[[File:Callback_Mobile_DarkMode_Landscape.jpg|150x150px]]
-Callback_CountryCodes_LightMode.jpg|Mobile fullscreen view showing country codes for phone numbers
-Callback_Done_Light_28022020.jpg|Callback confirmation in desktop
+'''Light theme'''
-</gallery>
 |Status=No
 }}{{Section
@@ Line 656: / Line 655: @@
 The following example is the default object used to render Callback's registration form. This is a very simple definition that does not use many properties.
-{{NoteFormat|You can define ''any'' number of inputs here, of ''any'' supported type, in ''any'' combination.<br/>
+{{NoteFormat|You can define ''any'' number of inputs here, of ''any'' supported type, in ''any'' combination. The following example simply demonstrates how WebChat defines its default form internally.|}}
 {{NoteFormat|The Phone Number field with name "phonenumber" is required for all Callback custom forms. This field value is required by Genesys Callback API to schedule a Callback.}}
@@ Line 729: / Line 727: @@
 {{!}}string
 {{!}}
-{{!}}Set the text for the label. If no value provided, no label will be shown. You may use localization query strings to enable custom localization (for example, label: "@i18n:namespace.StringName"). Localization query strings allow you to use strings from any widget namespace or to create your own namespace in the localization file (i18n.json) and use strings from there (for example, label: "@i18n:myCustomNamespace.myCustomString001"). For more information, see the [[WID/Current/SDK/Callback-combined#ccrflab|Labels]] section.
+{{!}}Set the text for the label. If no value provided, no label will be shown. You may use localization query strings to enable custom localization (for example, label: "@i18n:namespace.StringName"). Localization query strings allow you to use strings from any widget namespace or to create your own namespace in the localization file (i18n.json) and use strings from there (for example, label: "@i18n:myCustomNamespace.myCustomString001"). For more information, see the [[WID/Current/SDK/Callback-combined#ccrflab{{!}}Labels]] section.
 {{!}}-
 {{!}}wrapper
 {{!}}HTML string
 {{!}}“<nowiki><table></table></nowiki>”
-{{!}}Each input exists in its own row in the form. By default this is a table-row with the label in the left cell and the input in the right cell. You can redefine this wrapper and layout by specifying a new HTML row structure. See the [[WID/Current/SDK/Callback-combined#ccrfwrp|Wrappers]] section for more info.<br />The default wrapper for an input is "
+{{!}}Each input exists in its own row in the form. By default this is a table-row with the label in the left cell and the input in the right cell. You can redefine this wrapper and layout by specifying a new HTML row structure. See the [[WID/Current/SDK/Callback-combined#ccrfwrp{{!}}Wrappers]] section for more info.<br />The default wrapper for an input is "
 {{!}}-
 {{!}}validate
 {{!}}function
 {{!}}
-{{!}}Define a validation function for the input that executes when the input loses focus (blur) or changes value. Your function must return <code>true</code> or <code>false</code>. True to indicate it passed, false to indicate it failed. If your validation fails, the form will not submit and the invalid input will be highlighted in red. See the [[WID/Current/SDK/Callback-combined#ccrfval|Validation]] section for more details and examples.
+{{!}}Define a validation function for the input that executes when the input loses focus (blur) or changes value. Your function must return <code>true</code> or <code>false</code>. True to indicate it passed, false to indicate it failed. If your validation fails, the form will not submit and the invalid input will be highlighted in red. See the [[WID/Current/SDK/Callback-combined#ccrfval{{!}}Validation]] section for more details and examples.
 {{!}}-
 {{!}}validateWhileTyping
@@ Line 768: / Line 766: @@
 ====HTML Output====
-<pre>
+ <input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
-<input type="text" id="cx_callback_form_firstname" data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  data-origID="cx_callback_form_firstname"  name="firstname" maxlength="100" placeholder="Optional"></input>
 ===Labels===
-A label tag will be generated for your input if you specify label text and if your custom input wrapper includes a ‘{label}’ designation. If you have added an ID attribute for your input, the label will automatically be linked to your input so that clicking on the label selects the input or, for checkboxes, toggles it.
+A label tag will be generated for your input if you specify label text and if your custom input wrapper includes a ‘{label}’ designation. If you have added an ID attribute for your input, the label will automatically be linked to your input so that clicking on the label selects the input or, for check boxes, toggles it.
 Labels can be defined as static strings or localization queries.

@@ Line 5: / Line 5: @@
 |Context=Learn how to use the Callback Widget to fetch user details.
 |ComingSoon=No
-|Platform=PureEngage
+|Platform=GenesysEngage-onpremises
 |Section={{Section
 |sectionHeading=Overview

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

Monique.gionet@genesys.com: Published

Chrissy.forrest@genesys.com: Published

Chrissy.forrest@genesys.com: Published

Chrissy.forrest@genesys.com: Published

Chrissy.forrest@genesys.com: Published

Chrissyforrest: Published

Chrissyforrest: Published

WikiSysop: Text replacement - "\|Platform=([^\|]*)GenesysEngage-onpremises([\|]*)" to "|Platform=$1GenesysEngage-cloud$2"

WikiSysop: Text replacement - "\|Platforms?=([^\|]*)PureEngage([\|]*)" to "|Platform=$1GenesysEngage-onpremises$2"

Chrissyforrest: Published

WikiSysop: Text replacement - "\|Platform=([^\|])GenesysEngage-onpremises([\|])" to "|Platform=$1GenesysEngage-cloud$2"

WikiSysop: Text replacement - "\|Platforms?=([^\|])PureEngage([\|])" to "|Platform=$1GenesysEngage-onpremises$2"