WID/Current/Developer/GWCCustomize - Revision history

Chrissy.forrest@genesys.com: Published

2021-01-15T20:41:14Z

Published

Chrissy.forrest@genesys.com: Published

2020-12-16T20:57:35Z

Published

Chrissyforrest: Published

2020-10-21T20:38:52Z

Published

Chrissyforrest: Published

2020-07-30T21:48:41Z

Published

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

2020-07-25T02:38:18Z

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

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

2020-07-15T11:49:56Z

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

Chrissyforrest: Published

2020-05-05T20:16:35Z

Published

Chrissyforrest: Published

2020-05-05T19:44:31Z

Published

Chrissyforrest: Published

2020-04-09T21:42:00Z

Published

Chrissyforrest: Published

2020-03-31T23:59:36Z

Published

@@ Line 9: / Line 9: @@
 |Section={{Section
 |alignment=Vertical
-|structuredtext=Genesys Widgets includes two built-in themes: '''dark''' and '''light'''. The dark theme is active by default.
+|structuredtext=Genesys Widgets includes two built-in themes: '''dark''' and '''light'''.
-'''Dark Theme'''
+'''Note''': The dark theme is active by default.
 [[File:Darktheme.png|500x500px]]
-'''Light Theme'''
+'''Light theme'''
 [[File:Lighttheme.png|500x500px]]
@@ Line 22: / Line 24: @@
 }}{{Section
 |sectionHeading=Set the active theme
 |alignment=Vertical
 |structuredtext=There are two ways to set the active theme:
@@ Line 39: / Line 42: @@
 }}{{Section
 |sectionHeading=Create a custom theme
-|anchor=custom theme
+|anchor=customtheme
 |alignment=Vertical
 |structuredtext====Theme templates===
@@ Line 103: / Line 106: @@
 {{Repository|theme-template-light.less|600aaa4a-386d-474b-be57-0692cc26a800|theme-template-light.less}}{{NoteFormat|Theme templates are LESS files, which must be converted to CSS before being used on a website. Use a website or tool to convert them when you're ready to test and implement them on your site.|}}{{NoteFormat|By default, theme templates override the styles of all of your Genesys Widgets—but you can also make changes that only affect a specific widget, as described below.|}}
-=== Name a theme ===
+===Name a theme===
 In the dark theme template file, the first class selector is defined as:
@@ Line 134: / Line 137: @@
 }}{{Section
 |sectionHeading=Register a theme with Genesys Widgets
 |alignment=Vertical
 |structuredtext=The following example shows how to register themes in the Genesys Widgets configuration.
@@ Line 150: / Line 154: @@
 }}{{Section
 |sectionHeading=Change the appearance of a specific widget
 |alignment=Vertical
 |structuredtext=You can specify specific widgets—and even specific elements within a widget—by appending the widget's CSS classname to the theme classname.
@@ Line 209: / Line 214: @@
 }}{{Section
 |sectionHeading=Change the layout and structure of a widget
 |alignment=Vertical
 |structuredtext=You can only use themes to customize a limited set of styles for your version of Genesys Widgets. To create an alternate layout of your own design, disable the widget you want to customize and use the provided service plugins to build your own replacement.
@@ Line 227: / Line 233: @@
 }}{{Section
 |sectionHeading=Change fonts
 |alignment=Vertical
 |structuredtext=By default, Genesys Widgets downloads and uses Google's Roboto font. Use the following CSS to specify a different font:
@@ Line 247: / Line 254: @@
 }}{{Section
 |sectionHeading=Icons
 |alignment=Vertical
 |structuredtext=Genesys Widgets are provided in SVG format, which means you can apply color fills and other SVG CSS properties when you use them. SVG also supports the highest possible rendering quality on all devices, regardless of the zoom level or resolution. You can scale the icons to fit any container; use them either inline or as blocks; and animate their orientation, colors, and other styling.
@@ Line 266: / Line 274: @@
 ====Automatic HTML injection====
 Specify which icons you want and where you want them by applying the CSS '''cx-icon''' class and '''data-icon''' attribute to the appropriate elements:
-<source lang="javascript"><div id="your-element" data-origID="your-element"  data-origID="your-element"   class="cx-icon" data-icon="chat">
+<source lang="javascript"><div id="your-element" data-origID="your-element"  data-origID="your-element"  data-origID="your-element"   class="cx-icon" data-icon="chat">
      ...SVG icon will be inserted here
 </div>

@@ Line 39: / Line 39: @@
 }}{{Section
 |sectionHeading=Create a custom theme
 |alignment=Vertical
 |structuredtext====Theme templates===
@@ Line 45: / Line 46: @@
 LESS syntax defines local variables that allow you to create a clear color palette consisting of no less than 28 separate color variables, which are grouped by their usage:
-*Background Colors
+*Background colors
-*Text Colors
+*Text colors
-*Icon Colors
+*Icon colors
-*Border Colors
+*Border colors
-*Outline Colors
+*Outline colors
-At a bare minimum, you can create a new style by simply changing the color values in the color palette. You can also add or remove colors from this palette as you see fit.
+At a bare minimum, you can create a new style by simply changing the color values in the color palette. You can also add or remove colors from this palette.
-'''Color Palette Example'''
+'''Color palette example'''
 <source lang="css">
 /* Color Palette */
@@ Line 97: / Line 98: @@
 ====Sample theme template files====
-'''Note''': Click the following links to automatically download the sample template files to your computer.
+Click the following links to automatically download the sample template files:
 {{Repository|theme-template-dark.less|bc0a2c34-c723-477e-9c48-f651490970d9|theme-template-dark.less}}<br />
-{{Repository|theme-template-light.less|600aaa4a-386d-474b-be57-0692cc26a800|theme-template-light.less}}
+{{Repository|theme-template-light.less|600aaa4a-386d-474b-be57-0692cc26a800|theme-template-light.less}}{{NoteFormat|Theme templates are LESS files, which must be converted to CSS before being used on a website. Use a website or tool to convert them when you're ready to test and implement them on your site.|}}{{NoteFormat|By default, theme templates override the styles of all of your Genesys Widgets—but you can also make changes that only affect a specific widget, as described below.|}}
-Theme templates are LESS files, which must be converted to CSS before being used on a website. Use a website or tool to convert them when you're ready to test and implement them on your site.
+=== Name a theme ===
 In the dark theme template file, the first class selector is defined as:
 '''.cx-widget.cx-theme-dark'''
-'''.cx-widget''' is the base class for the entire Genesys Widget UI. The outermost container of every widget or standalone UI element has this class and is used to identify UI elements that belong to Genesys Widgets.
+'''.cx-widget''' is the base class for the entire Genesys Widgets UI. The outermost container of every widget or standalone UI element has this class and is used to identify UI elements that belong to Genesys Widgets.
-'''.cx-theme-dark''' is the class name created for the "dark" theme. Themes are applied by searching for all elements with the '''.cx-widget''' class and appending the theme's classname to it. Thus, the combined class selector indicates styles that will be applied only when your custom theme is active in the configuration object.
+'''.cx-theme-dark''' is the class name created for the dark theme. Themes are applied by searching for all elements with the '''.cx-widget''' class and appending the theme's classname to it. Thus, the combined class selector indicates styles that will be applied only when your custom theme is active in the configuration object.
-You can name your theme classname anything you wish. There are no restrictions or limitations.
+Name your theme's classname anything you wish. There are no restrictions or limitations.
 In a later step, you will register this theme classname in your configuration.
 ===Customization guidelines===
-When you create your own themes, you can only use the following CSS properties:
+When you create your own themes, you can ''only'' use the following CSS properties:
 *color
@@ Line 130: / Line 127: @@
 *and other non-structural properties
-{{NoteFormat|Widgets primarily relies on class names for CSS selectors, rather than fixed node path selectors. Using class names allows for the HTML structure to be changed without breaking selectors. For example, the selector ".cx-webchat .cx-message" is all that's needed to target message bubbles inside WebChat. Using a fixed node path equivalent, like "div.cx-webchat > div.cx-body > div.cx-transcript > div.cx-message-group > div.cx-message" creates a dependency on the HTML node type and structure. If any changes are made to WebChat's HTML structure, this CSS selector will break. Use the smallest necessary specificity in your selectors and try to use class names only. <br/><br/>
+{{NoteFormat|Widgets primarily relies on classnames for CSS selectors, rather than fixed node path selectors. Using classnames allows for the HTML structure to be changed without breaking selectors. For example, the selector ".cx-webchat .cx-message" is all that is needed to target message bubbles inside WebChat. Using a fixed node path equivalent, like "div.cx-webchat > div.cx-body > div.cx-transcript > div.cx-message-group > div.cx-message" creates a dependency on the HTML node type and structure. If any changes are made to WebChat's HTML structure, this CSS selector will break. Use the smallest necessary specificity in your selectors and try to use classnames only.
-Be careful not to modify the structure and functionality of the CSS when you make your changes. Otherwise, it won't work right.<br/><br/>
-In particular, you must avoid setting the following CSS properties: height, width, thickness, size, and visibility; or any other properties that change the structure of widgets. These properties are not supported. Changing them can break widget stability and usability.|3}}{{NoteFormat|By default, the Widgets CSS uses the Roboto font, available at https://fonts.google.com/}}
 |Status=No
 }}{{Section
@@ Line 268: / Line 266: @@
 ====Automatic HTML injection====
 Specify which icons you want and where you want them by applying the CSS '''cx-icon''' class and '''data-icon''' attribute to the appropriate elements:
-<source lang="javascript"><div id="your-element" data-origID="your-element"   class="cx-icon" data-icon="chat">
+<source lang="javascript"><div id="your-element" data-origID="your-element"  data-origID="your-element"   class="cx-icon" data-icon="chat">
      ...SVG icon will be inserted here
 </div>

@@ Line 243: / Line 243: @@
 {{NoteFormat|Use this configuration option if you have security concerns about including fonts from third-party sources, to optimize your page load time, or if you already include Roboto on your website.}}
-|Status=No
-}}{{Section
+===Change font size===
-|sectionHeading=Change font size
+By default, the font size in Genesys Widgets content is in ''em'' units. This is to support accessibility guidelines allowing font size to scale as needed when zoomed in or out based on the screen size. For normal text, the font size value is '''0.75em''' and can vary for other text contents.{{NoteFormat|Since these are relative units, the actual value is derived from the font size of the parent page body. A base font size can be defined on the .cx-widget class in em units to change font size, which allows Widgets to calculate internal font size using this value.|}}<br />
 |Status=No
 }}{{Section
@@ Line 270: / Line 268: @@
 ====Automatic HTML injection====
 Specify which icons you want and where you want them by applying the CSS '''cx-icon''' class and '''data-icon''' attribute to the appropriate elements:
-<source lang="javascript"><div id="your-element" data-origID="your-element"  data-origID="your-element"  data-origID="your-element" class="cx-icon" data-icon="chat">
+<source lang="javascript"><div id="your-element" data-origID="your-element"   class="cx-icon" data-icon="chat">
      ...SVG icon will be inserted here
 </div>
 </source>
 When you pass the element into the '''CXCommon.populateAllPlaceholders( $("#your-element") )''' function—as a jQuery-wrapped set or an HTML string—Genesys Widgets inserts the appropriate SVG icons and returns the HTML to you.
 ====Fetching SVG icon markup====

@@ Line 4: / Line 4: @@
 |TocName=Customize appearance
 |Context=Use ''themes'' to change the appearance of Genesys Widgets. Themes allow you to apply colors and fonts to all of your widgets in a single operation.
 |ComingSoon=No
 |Platform=GenesysEngage-cloud
-|Role=
+|Role=Developer
 |Section={{Section
 |alignment=Vertical
 |structuredtext=Genesys Widgets includes two built-in themes: '''dark''' and '''light'''. The dark theme is active by default.
@@ Line 27: / Line 19: @@
 [[File:Lighttheme.png|500x500px]]
 |Status=No
 }}{{Section
 |sectionHeading=Set the active theme
 |alignment=Vertical
 |structuredtext=There are two ways to set the active theme:
@@ Line 49: / Line 36: @@
 window._genesys.widgets.bus.command("App.setTheme", {theme: "light"}); // or "dark"
 </source>
 |Status=No
 }}{{Section
 |sectionHeading=Create a custom theme
 |alignment=Vertical
 |structuredtext====Theme templates===
 Genesys Widgets uses special LESS files called ''theme templates'' to define themes. Use a theme template to create a new color palette and add custom styles. Everything is laid out clearly in the template file.
@@ Line 151: / Line 133: @@
 Be careful not to modify the structure and functionality of the CSS when you make your changes. Otherwise, it won't work right.<br/><br/>
 In particular, you must avoid setting the following CSS properties: height, width, thickness, size, and visibility; or any other properties that change the structure of widgets. These properties are not supported. Changing them can break widget stability and usability.|3}}{{NoteFormat|By default, the Widgets CSS uses the Roboto font, available at https://fonts.google.com/}}
 |Status=No
 }}{{Section
 |sectionHeading=Register a theme with Genesys Widgets
 |alignment=Vertical
 |structuredtext=The following example shows how to register themes in the Genesys Widgets configuration.
 <source lang="javascript">window._genesys.widgets.main.themes = {
@@ Line 172: / Line 149: @@
 window._genesys.widgets.bus.command("App.setTheme", {theme: "blue"});
 </source>
 |Status=No
 }}{{Section
 |sectionHeading=Change the appearance of a specific widget
 |alignment=Vertical
 |structuredtext=You can specify specific widgets—and even specific elements within a widget—by appending the widget's CSS classname to the theme classname.
@@ Line 236: / Line 208: @@
 </source>
 [[File:GWCCustomize SpecificTheme02.png|500x500px]]
 |Status=No
 }}{{Section
 |sectionHeading=Change the layout and structure of a widget
 |alignment=Vertical
 |structuredtext=You can only use themes to customize a limited set of styles for your version of Genesys Widgets. To create an alternate layout of your own design, disable the widget you want to customize and use the provided service plugins to build your own replacement.
@@ Line 259: / Line 226: @@
 {{NoteFormat|Genesys does not support changes to the layout of the official Genesys Widgets, as your changes can be overwritten when you upgrade to a newer version of Genesys Widgets.|3}}
 |Status=No
 }}{{Section
 |sectionHeading=Change fonts
 |alignment=Vertical
 |structuredtext=By default, Genesys Widgets downloads and uses Google's Roboto font. Use the following CSS to specify a different font:
@@ Line 281: / Line 243: @@
 {{NoteFormat|Use this configuration option if you have security concerns about including fonts from third-party sources, to optimize your page load time, or if you already include Roboto on your website.}}
-|structuredtextwide=
+|Status=No
-|FAQHeading=
+}}{{Section
 |Status=No
 }}{{Section
 |sectionHeading=Icons
 |alignment=Vertical
 |structuredtext=Genesys Widgets are provided in SVG format, which means you can apply color fills and other SVG CSS properties when you use them. SVG also supports the highest possible rendering quality on all devices, regardless of the zoom level or resolution. You can scale the icons to fit any container; use them either inline or as blocks; and animate their orientation, colors, and other styling.
@@ Line 308: / Line 270: @@
 ====Automatic HTML injection====
 Specify which icons you want and where you want them by applying the CSS '''cx-icon''' class and '''data-icon''' attribute to the appropriate elements:
-<source lang="javascript"><div id="your-element" data-origID="your-element"  class="cx-icon" data-icon="chat">
+<source lang="javascript"><div id="your-element" data-origID="your-element"  data-origID="your-element"  data-origID="your-element" class="cx-icon" data-icon="chat">
      ...SVG icon will be inserted here
 </div>
@@ Line 323: / Line 285: @@
 ===Outline icon set===
 [[File:Outline-icon-set1.png|600px]][[File:Outline-icon-set2.png|600px]][[File:Outline-icon-set3.png|600px]]
 |Status=No
 }}
 }}

@@ Line 7: / Line 7: @@
 |UseCase=
 |ComingSoon=No
-|Platform=GenesysEngage-onpremises
+|Platform=GenesysEngage-cloud
 |Role=
 |Application=

@@ Line 13: / Line 13: @@
 '''Dark Theme'''
-[[File:GWCCustomize DarkTheme.png|500x500px]]
+[[File:Darktheme.png|500x500px]]
 '''Light Theme'''
-[[File:GWCCustomize LightTheme.png|500x500px]]
+[[File:Lighttheme.png|500x500px]]
 |Status=No
 }}{{Section
@@ Line 63: / Line 63: @@
 @bg_color_5:		#4375D6; // Button primary gradient 2
 @bg_color_6:		#CCCCCC; // Button disabled / scrollbar color
 @txt_color_1: 		#FDFDFD; // Main text color
 @txt_color_2: 		#98A7B8; // footer text
 @txt_color_3: 		#FDFDFD; // Button default & primary / autocomplete text hover color
-@txt_color_4: 		#5081E1; // Hyperlink color
+@txt_color_4: 		#FDFDFD; // Hyperlink color
 @txt_color_5:		#C5CCD6; // Placeholder color
-@txt_color_6:		#EA4F6B; // Alert/error color
+@txt_color_6:		#F53131; // Alert/error color
 @icon_color_1:		#FDFDFD; // Base icon color
@@ Line 79: / Line 81: @@
 @icon_color_7: 		#5081E1; // Interactive icon color 1 (attach files, delete file, etc)
 @icon_color_8: 		#4AC764; // Positive Color (confirmation, availability, usually green)
-@icon_color_9: 		#EA4F6B; // Negative Color (error, exception, usually red)
+@icon_color_9: 		#F53131; // Negative Color (error, exception, usually red)
 @icon_color_10: 	#F8A740; // Warning Color (warning, pending, offline, usually yellow or orange)
 @border_color_1: 	#222529; // Main border color
@@ Line 86: / Line 89: @@
 @border_color_3:	transparent; // Button default
 @border_color_4:	transparent; // Button disabled
-@border_color_5:	#EA4F6B; // Alert/error color
+@border_color_5:	#F53131; // Alert/error color
 @outline_color_1: 	#75A8FF; // Form input focus outline / autocomplete hover background color
 </source>
@@ Line 268: / Line 273: @@
 ====Automatic HTML injection====
 Specify which icons you want and where you want them by applying the CSS '''cx-icon''' class and '''data-icon''' attribute to the appropriate elements:
-<source lang="javascript"><div id="your-element" data-origID="your-element"  class="cx-icon" data-icon="chat"> ...SVG icon will be inserted here </div>
+<source lang="javascript"><div id="your-element" data-origID="your-element"  data-origID="your-element"  data-origID="your-element"  data-origID="your-element"  class="cx-icon" data-icon="chat"> ...SVG icon will be inserted here </div>
 </source>

WID/Current/Developer/GWCCustomize - Revision history

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

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"