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

Monique.gionet@genesys.com: Published

2021-10-12T13:24:01Z

Published

Monique.gionet@genesys.com: Published

2021-10-12T13:22:43Z

Published

Chrissyforrest: Published

2020-10-26T20:40:58Z

Published

Chrissyforrest: Published

2020-10-05T18:53:41Z

Published

Chrissyforrest: Published

2020-07-30T13:43:22Z

Published

Chrissyforrest: Published

2020-07-27T14:40:36Z

Published

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

2020-07-25T02:39:41Z

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

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

2020-07-15T11:49:22Z

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

Chrissyforrest: Published

2020-04-09T22:25:01Z

Published

Chrissyforrest: Published

2020-04-01T00:07:00Z

Published

@@ Line 12: / Line 12: @@
 |alignment=Vertical
 |structuredtext=Use the Sidebar to launch other widgets with a single click. By default, Sidebar is displayed on the right side of the screen, and you can configure any launchable widgets onto Sidebar, including your custom extension widgets. The Sidebar UI expands when you hover your cursor over it, and contracts when you move the cursor away. Other features include configurable positioning and mobile support. You can also add new configurations on the fly, which automatically re-renders the sidebar.
-[[File:Cloud_Sidebar_DesktopLeftPositioned_10032020.png|left|282x282px|alt=The Sidebar UI in dark theme when closed]][[File:Cloud_Sidebar_DesktopExpanded_DarkMode_.png|292x292px|alt=The Sidebar UI in dark them when expanded]]
+[[File:Cloud_Sidebar_DesktopLeftPositioned_10032020.png|left|282x282px|alt=The Sidebar UI in dark theme when closed]][[File:Cloud_Sidebar_DesktopExpanded_DarkMode_.png|292x292px|alt=The Sidebar UI in dark theme when expanded]]
 ===Usage===
 Use the following methods to launch SideBar manually:

@@ Line 12: / Line 12: @@
 |alignment=Vertical
 |structuredtext=Use the Sidebar to launch other widgets with a single click. By default, Sidebar is displayed on the right side of the screen, and you can configure any launchable widgets onto Sidebar, including your custom extension widgets. The Sidebar UI expands when you hover your cursor over it, and contracts when you move the cursor away. Other features include configurable positioning and mobile support. You can also add new configurations on the fly, which automatically re-renders the sidebar.
-[[File:Cloud_Sidebar_DesktopLeftPositioned_10032020.png|alt=|left|282x282px]][[File:Cloud_Sidebar_DesktopExpanded_DarkMode_.png|292x292px]]
+[[File:Cloud_Sidebar_DesktopLeftPositioned_10032020.png|left|282x282px|alt=The Sidebar UI in dark theme when closed]][[File:Cloud_Sidebar_DesktopExpanded_DarkMode_.png|292x292px|alt=The Sidebar UI in dark them when expanded]]
 ===Usage===
 Use the following methods to launch SideBar manually:
@@ Line 53: / Line 53: @@
 '''Dark theme'''
-[[File:Cloud_Sidebar_Desktop_DarkMode_10032020.png|150x150px]]
+[[File:Cloud_Sidebar_Desktop_DarkMode_10032020.png|150x150px|alt=The Sidebar UI in dark theme when closed]]
-[[File:Cloud_Sidebar_DesktopExpanded_DarkMode_10032020.png|150x150px]]
+[[File:Cloud_Sidebar_DesktopExpanded_DarkMode_10032020.png|150x150px|alt=The Sidebar UI in dark theme when expanded]]
-[[File:M_Cloud_Sidebar_MobilePotrait_DarkMode_10032020.png|150x150px]]
+[[File:M_Cloud_Sidebar_MobilePotrait_DarkMode_10032020.png|150x150px|alt=The Sidebar UI in dark theme in mobile portrait view]]
-[[File:M_Cloud_Sidebar_MobileLandscape_DarkMode_10032020.png|150x150px]]
+[[File:M_Cloud_Sidebar_MobileLandscape_DarkMode_10032020.png|150x150px|alt=The Sidebar UI in dark theme in mobile landscape view]]
 '''Light theme'''
-[[File:Cloud_Sidebar_Desktop_LightMode_10032020.png|150x150px]]
+[[File:Cloud_Sidebar_Desktop_LightMode_10032020.png|150x150px|alt=The Sidebar UI in light theme when closed]]
-[[File:Cloud_Sidebar_DesktopExpanded_LightMode_10032020_.png|150x150px]]
+[[File:Cloud_Sidebar_DesktopExpanded_LightMode_10032020_.png|150x150px|alt=The Sidebar UI in light theme when expanded]]
-[[File:Sidebar MobileNeedHelpLight 28022020.jpg|150x150px]]
+[[File:Sidebar MobileNeedHelpLight 28022020.jpg|150x150px|alt=The Sidebar UI Need Help button]]
-[[File:M_Cloud_Sidebar_MobilePotrait_LightMode_10032020.png|150x150px]]
+[[File:M_Cloud_Sidebar_MobilePotrait_LightMode_10032020.png|150x150px|alt=The Sidebar UI in light theme in mobile portrait view]]
-[[File:M_Cloud_Sidebar_MobileLandscape_LightMode_10032020.png|150x150px]]
+[[File:M_Cloud_Sidebar_MobileLandscape_LightMode_10032020.png|150x150px|alt=The Sidebar UI in light theme in mobile landscape view]]
 |Status=No
 }}{{Section

@@ Line 9: / Line 9: @@
 |Section={{Section
 |sectionHeading=Overview
 |alignment=Vertical
 |structuredtext=Use the Sidebar to launch other widgets with a single click. By default, Sidebar is displayed on the right side of the screen, and you can configure any launchable widgets onto Sidebar, including your custom extension widgets. The Sidebar UI expands when you hover your cursor over it, and contracts when you move the cursor away. Other features include configurable positioning and mobile support. You can also add new configurations on the fly, which automatically re-renders the sidebar.
 [[File:Cloud_Sidebar_DesktopLeftPositioned_10032020.png|alt=|left|282x282px]][[File:Cloud_Sidebar_DesktopExpanded_DarkMode_.png|292x292px]]
 ===Usage===
 Use the following methods to launch SideBar manually:
@@ Line 26: / Line 22: @@
 You must configure at least one customer-facing UI widget in order to use the Sidebar Widget.
 ===Customization===
-You can customize and {{Link-SomewhereInThisVersion|manual=Developer|topic=GWCInternat|display text=localize}} all of the text shown in the Sidebar Widget by adding entries to your {{Link-SomewhereInThisVersion|manual=SDK|topic=SideBar-combined|anchor=config|display text=configuration}} and {{Link-SomewhereInThisVersion|manual=SDK|topic=SideBar-combined|anchor=localize|display text=localization}} options.
+You can customize and {{Link-AnywhereElse|product=WID|version=Current|manual=Developer|topic=GWCInternat|display text=localize}} all of the text shown in the Sidebar Widget by adding entries to your {{Link-SomewhereInThisVersion|manual=SDK|topic=SideBar-combined|anchor=config|display text=configuration}} and {{Link-SomewhereInThisVersion|manual=SDK|topic=SideBar-combined|anchor=localize|display text=localization}} options.
 Sidebar supports themes. You can create and register your own themes for Genesys Widgets.
@@ Line 42: / Line 38: @@
 {{!}}{{!}}sidebar
 {{!}}-
-{{!}}{{!}}CXBus—{{Link-SomewhereInThisVersion|manual=SDK|topic=SideBar-combined|anchor=commands|display text=API Commands}} & {{Link-SomewhereInThisVersion|manual=SDK|topic=SideBar-combined|anchor=events|display text=API Events}}
+{{!}}{{!}}CXBus—{{Link-SomewhereInThisVersion|manual=SDK|topic=SideBar-combined|anchor=commands|display text=API commands}} & {{Link-SomewhereInThisVersion|manual=SDK|topic=SideBar-combined|anchor=events|display text=API events}}
 {{!}}{{!}}SideBar
 {{!}}-
@@ Line 49: / Line 45: @@
 {{!}}}
+===Mobile support===
-===Mobile Support===
+Sidebar supports both desktop and mobile devices. In mobile mode, the sidebar launcher button is displayed to the bottom of the screen. When triggered, it expands to the full screen of mobile and shows all channels configured with scrollbar when necessary. Like all Genesys Widgets, there are two main modes: Desktop & Mobile. Desktop is employed for monitors, laptops, and tablets. Mobile is employed for smartphones. When a smartphone is detected, Sidebar switches to special full-screen templates that are optimized for both portrait and landscape orientations.
 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.
@@ Line 124: / Line 119: @@
 {{!}}{{!}}position
 {{!}}{{!}}string
-{{!}}{{!}}Defines the position of sidebar on the screen. Acceptable values are 'left' or 'right'.
+{{!}}{{!}}Defines the position of sidebar on the screen. Acceptable values are <code>left</code> or <code>right</code>.
 {{!}}{{!}}right
 {{!}}{{!}}false
@@ Line 172: / Line 167: @@
 {{!}}{{!}}channels[index].icon
 {{!}}{{!}}string
-{{!}}{{!}}Change the default icon for this channel. For the list of icon names see "Customize icons" in {{Link-SomewhereInThisVersion|manual=Developer|topic=GWCCustomize|display text=Customize appearance}}.
+{{!}}{{!}}Change the default icon for this channel. For the list of icon names see ''Customize icons'' in {{Link-AnywhereElse|product=WID|version=Current|manual=Developer|topic=GWCCustomize}}.
 {{!}}{{!}}n/a
 {{!}}{{!}}false
@@ Line 189: / Line 184: @@
 |structuredtext=For your custom plugins, you can define string key names and values for Name and Title (tooltip) to display on sidebar. The key format requires the plugin name, followed by "Title" or "Name". For example, a plugin named "MyPlugin" will have keys called "MyPluginName" and "MyPluginTitle".
-{{NoteFormat|For information on how to set up localization, refer to the  {{Link-SomewhereInThisVersion|manual=Developer|topic=GWCInternat|display text=Localization Guide}}.|1}}
+{{NoteFormat|For information on how to set up localization, refer to {{Link-AnywhereElse|product=WID|version=Current|manual=Developer|topic=GWCInternat|display text=Localize widgets and services}}.|1}}
 ===Strings===
 <source lang="javascript">{
@@ Line 205: / Line 200: @@
 |Status=No
 }}{{Section
-|sectionHeading=API Commands
+|sectionHeading=API commands
 |anchor=commands
 |alignment=Vertical
 |structuredtext=Once you've registered your plugin on the bus, you can call commands on other registered plugins. Here's how to use the global bus object to register a new plugin on the bus.
-{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-SomewhereInThisManual|topic=GWCBusExtensions|anchor=top|display text=Widgets Extensions}} for more information about extending Genesys Widgets.|1}}
+{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-AnywhereElse|product=WID|version=Current|manual=SDK|topic=GWCBusExtensions|display text=Genesys Widgets Extensions}} for more information about extending Genesys Widgets.|1}}
 <source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
@@ Line 305: / Line 300: @@
 {{!}}{{!}}channels[index].icon
 {{!}}{{!}}string
-{{!}}{{!}}Change the default Icon for this channel. For the list of Icon names see "Customize icons" in {{Link-SomewhereInThisVersion|manual=Developer|topic=GWCCustomize|display text=Customize appearance}}.
+{{!}}{{!}}Change the default Icon for this channel. For the list of Icon names see ''Customize icons'' in {{Link-SomewhereInThisVersion|manual=Developer|topic=GWCCustomize|display text=Customize appearance}}.
 {{!}}-
 {{!}}{{!}}channels[index].onClick
@@ Line 313: / Line 308: @@
 |Status=No
 }}{{Section
-|sectionHeading=API Events
+|sectionHeading=API events
 |anchor=events
 |alignment=Vertical
 |structuredtext=Once you've registered your plugin on the bus, you can subscribe to and listen for published events. Here's how to use the global bus object to register a new plugin on the bus.
-{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-SomewhereInThisManual|topic=GWCBusExtensions|anchor=top|display text=Widgets Extensions}} for more information about extending Genesys Widgets.|1}}
+{{NoteFormat|The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see {{Link-AnywhereElse|product=WID|version=Current|manual=SDK|topic=GWCBusExtensions|display text=Genesys Widgets Extensions}} for more information about extending Genesys Widgets.|1}}
 <source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

@@ Line 11: / Line 11: @@
 |alignment=Vertical
 |structuredtext=Use the Sidebar to launch other widgets with a single click. By default, Sidebar is displayed on the right side of the screen, and you can configure any launchable widgets onto Sidebar, including your custom extension widgets. The Sidebar UI expands when you hover your cursor over it, and contracts when you move the cursor away. Other features include configurable positioning and mobile support. You can also add new configurations on the fly, which automatically re-renders the sidebar.
-[[File:Cloud_Sidebar_DesktopLeftPositioned_10032020.png|alt=Sidebar when it is initially loaded|left|thumb|282x282px|Sidebar when it is initially loaded]]
+[[File:Cloud_Sidebar_DesktopLeftPositioned_10032020.png|alt=|left|282x282px]][[File:Cloud_Sidebar_DesktopExpanded_DarkMode_.png|292x292px]]

@@ Line 11: / Line 11: @@
 |alignment=Vertical
 |structuredtext=Use the Sidebar to launch other widgets with a single click. By default, Sidebar is displayed on the right side of the screen, and you can configure any launchable widgets onto Sidebar, including your custom extension widgets. The Sidebar UI expands when you hover your cursor over it, and contracts when you move the cursor away. Other features include configurable positioning and mobile support. You can also add new configurations on the fly, which automatically re-renders the sidebar.
-[[File:Cloud Sidebar DesktopLeftPositioned 10032020.png|282x282px]]     [[File:Cloud Sidebar DesktopExpanded DarkMode .png|276x276px]]
 ===Usage===
 Use the following methods to launch SideBar manually:
@@ Line 54: / Line 57: @@
 ===Screenshots===
-'''"Dark" theme'''
+'''Dark theme'''
 [[File:Cloud_Sidebar_Desktop_DarkMode_10032020.png|150x150px]]
 [[File:Cloud_Sidebar_DesktopExpanded_DarkMode_10032020.png|150x150px]]
 [[File:M_Cloud_Sidebar_MobilePotrait_DarkMode_10032020.png|150x150px]]
 [[File:M_Cloud_Sidebar_MobileLandscape_DarkMode_10032020.png|150x150px]]
-'''"Light" theme'''
+'''Light theme'''
 [[File:Cloud_Sidebar_Desktop_LightMode_10032020.png|150x150px]]
@@ Line 74: / Line 76: @@
 |anchor=config
 |alignment=Vertical
-|structuredtext=SideBar shares the '''_genesys.widgets.sidebar''' configuration namespace. SideBar has UI options to handle the position of sidebar on the screen, disable expand feature sidebar, hide sidebar and add new channels on the fly. The display of channels order is based on the order defined in channels configuration array.
+|structuredtext=SideBar shares the '''_genesys.widgets.sidebar''' configuration namespace. SideBar has UI options to handle its position on the screen, disable expand feature sidebar, hide sidebar, and add new channels on the fly. The display order of channels is based on the order defined in channels configuration array.
 ===Example===
 <pre>
@@ Line 194: / Line 196: @@
 	"ChannelSelectorName": "Live Assistance",
 	"ChannelSelectorTitle": "Get assistance from one of our agents right away",
 	"CallUsName": "Call Us",
 	"CallUsTitle": "Call Us details",
 	"CallbackName": "Callback",
 	"CallbackTitle": "Receive a Call",
 	"WebChatName": "Live Chat",
 	"WebChatTitle": "Live Chat",
 	"AriaClose": "Close the menu Need help"
 }</source>

@@ Line 6: / Line 6: @@
 |ComingSoon=No
 |Platform=GenesysEngage-cloud
 |Section={{Section
 |sectionHeading=Overview
@@ Line 53: / Line 54: @@
 ===Screenshots===
-'''"Dark" Theme'''
+'''"Dark" theme'''
-'''"Light" Theme'''
+[[File:Cloud_Sidebar_Desktop_DarkMode_10032020.png|150x150px]]
-<gallery>
+[[File:Cloud_Sidebar_DesktopExpanded_DarkMode_10032020.png|150x150px]]
-Cloud_Sidebar_Desktop_LightMode_10032020.png|Sidebar in contracted mode - desktop
+[[File:Cloud_Sidebar_DesktopLeftPositioned_10032020.png|150x150px]]
-Cloud_Sidebar_DesktopExpanded_LightMode_10032020_.png|Sidebar in expanded mode - desktop
+[[File:M_Cloud_Sidebar_MobilePotrait_DarkMode_10032020.png|150x150px]]
-Sidebar MobileNeedHelpLight 28022020.jpg|Sidebar Help in Mobile
+[[File:M_Cloud_Sidebar_MobileLandscape_DarkMode_10032020.png|150x150px]]
-M_Cloud_Sidebar_MobilePotrait_LightMode_10032020.png|Sidebar expanded to fullscreen view in Mobile - portrait orientation
-M_Cloud_Sidebar_MobileLandscape_LightMode_10032020.png|Sidebar expanded to fullscreen view in Mobile - landscape orientation
+'''"Light" theme'''
-</gallery>
 |Status=No
 }}{{Section

@@ Line 5: / Line 5: @@
 |Context=Learn about the Sidebar widget, which customers use to launch other widgets with a single click.
 |ComingSoon=No
-|Platform=PureEngage
+|Platform=GenesysEngage-onpremises
 |Section={{Section
 |sectionHeading=Overview

@@ Line 14: / Line 14: @@
 The image on the left shows Sidebar when it is initially loaded, while the one on the right shows what it looks like when it's expanded.
-[[File:Sidebar-Desktop-Dark.png|90px]][[File:Sidebar-Desktop-Dark-Expanded.png|305px]]
+[[File:Cloud Sidebar DesktopLeftPositioned 10032020.png|282x282px]]     [[File:Cloud Sidebar DesktopExpanded DarkMode .png|276x276px]]
 ===Usage===
 Use the following methods to launch SideBar manually:
@@ Line 54: / Line 54: @@
 ===Screenshots===
-'''Dark Theme'''
+'''"Dark" Theme'''
 <gallery>
-Sidebar-Desktop-Dark.png|Sidebar in contracted mode - desktop
+Cloud_Sidebar_Desktop_DarkMode_10032020.png|Sidebar in contracted mode - desktop
-Sidebar-Desktop-Dark-Expanded.png|Sidebar in expanded mode - desktop
+Cloud_Sidebar_DesktopExpanded_DarkMode_10032020.png|Sidebar in expanded mode - desktop
-Sidebar-Desktop-Dark-Left.png|Sidebar in left side of the screen - desktop
+Cloud_Sidebar_DesktopLeftPositioned_10032020.png|Sidebar in left side of the screen - desktop
-Sidebar-Mobile-Dark.png|Sidebar launcher button in Mobile screen.
+M_Cloud_Sidebar_MobilePotrait_DarkMode_10032020.png|Sidebar expanded to fullscreen view in Mobile - portrait orientation
-Sidebar-Mobile-Dark-Expanded.png|Sidebar expanded to fullscreen view in Mobile - portrait orientation
+M_Cloud_Sidebar_MobileLandscape_DarkMode_10032020.png|Sidebar expanded to fullscreen view in Mobile - landscape orientation
 </gallery>
-'''Light Theme'''
+'''"Light" Theme'''
 <gallery>
-Sidebar-Desktop-Light.png|Sidebar in contracted mode - desktop
+Cloud_Sidebar_Desktop_LightMode_10032020.png|Sidebar in contracted mode - desktop
-Sidebar-Desktop-Light-Expanded.png|Sidebar in expanded mode - desktop
+Cloud_Sidebar_DesktopExpanded_LightMode_10032020_.png|Sidebar in expanded mode - desktop
-Sidebar-Mobile-Light.png|Sidebar launcher button in Mobile screen.
+Sidebar MobileNeedHelpLight 28022020.jpg|Sidebar Help in Mobile
-Sidebar-Mobile-Light-Expanded.png|Sidebar expanded to fullscreen view in Mobile - portrait orientation
+M_Cloud_Sidebar_MobilePotrait_LightMode_10032020.png|Sidebar expanded to fullscreen view in Mobile - portrait orientation
-Sidebar-Mobile-Light-Landscape-Expanded.png|Sidebar expanded to fullscreen view in Mobile - landscape orientation
+M_Cloud_Sidebar_MobileLandscape_LightMode_10032020.png|Sidebar expanded to fullscreen view in Mobile - landscape orientation
 </gallery>
 |Status=No
@@ Line 99: / Line 98: @@
 			icon: 'agent'
 		},
@@ Line 189: / Line 182: @@
 {{!}}{{!}}n/a
 {{!}}{{!}}false
 {{!}}}
 |Status=No
@@ Line 206: / Line 198: @@
 	"SearchName": "Search",
 	"SearchTitle": "Search",
 	"CallUsName": "Call Us",
 	"CallUsTitle": "Call Us details",
@@ Line 216: / Line 206: @@
 	"WebChatName": "Live Chat",
 	"WebChatTitle": "Live Chat",
-        "ClickToCallName": "Click To Call",
+	"ClickToCallName": "Click To Call",
-	"ClickToCallTitle": "Click to Call"
+	"ClickToCallTitle": "Request a customer service phone number",
 }</source>
 |Status=No
@@ Line 367: / Line 358: @@
 |Status=No
 }}
 }}
 ====Resolutions====

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

Monique.gionet@genesys.com: Published

Monique.gionet@genesys.com: Published

Chrissyforrest: Published

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

Chrissyforrest: Published

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

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