Deployment Guide

(34>%4>2090=,?0/1=:8,@?3:=4?,?4A0:97490.:9?09?,9/

4>;=:A4/0/1:=.:9A09409.0:97D(34>%.,99:?-0@>0/

1:=702,7;@=;:>0>:=,@?3:=4?,?4A0@9/0=>?,9/492:1B3,?

4>,9/4>9:?>@;;:=?0/,7B,D>@>0?30:97490.:9?09?(:

.:;D.:/0>,8;70>,7B,D>@>0?30:97490.:9?09?

'?D7492?30*4/20?>

0;7:D809?@4/0



Contents

F  '?D7492?30*4/20?>

F  (3080>

F  :B/:>0??30,.?4A0?3080

F  :B/:.=0,?08D:B9?3080>

F  :B/:=024>?0=8D?3080>B4?3090>D>*4/20?>

F  :B/:.3,920>?D70>1:=,>;0.4H.B4/20?

F  :B/:.3,920?307,D:@?,9/>?=@.?@=0:1B4/20?>

F  :B/:.3,9201:9?>

0;7:D809?@4/0 

Styling the Widgets

Themes

+:@.,9.3,920?30,;;0,=,9.0:1090>D>*4/20?>@>492 themes(3080>,77:BD:@?:.3,920

.:7:=>,9/1:9?>1:=,77B4/20?>

090>D>*4/20?>49.7@/0>?B:-@47?49?3080>/,=6,9/7423?(30/,=6?30804>,.?4A0-D

/01,@7?

Dark Theme

Light Theme

'?D7492?30*4/20?>

0;7:D809?@4/0 

How do I set the active theme?

(30=0,=0?B:80?3:/>1:=>0??492?30,.?4A0?3080

Con#guration

window._genesys.widgets.main.theme = "light"; // or "dark"

Widget Bus Command

window._genesys.widgets.bus.command("App.setTheme", {theme: "light"}); // or "dark"

How do I create my own themes?

(3080(08;7,?0>

090>D>*4/20?>@>0>>;0.4,7!''H70>.,770/(3080(08;7,?0>?:/0H90?3080>)>492?34>

(3080(08;7,?0D:@.,98:/41D?30.:7:=;,70??0,9/,//90B>?D70>A0=D?34924>7,4/:@?.70,=7D

49?30?08;7,?0H70

!''>D9?,C4>@>0/-0.,@>0B0.,9/0H907:.,7A,=4,-70>?3,?,77:B@>?:.=0,?0,.70,=.:7:=

'?D7492?30*4/20?>

0;7:D809?@4/0 

;,70??0(30!''H70.:7:=;,70??0.:9>4>?>:19:70>>?3,9>0;,=,?0.:7:=A,=4,-70>(30>0,=0

2=:@;0/-D?304=@>,20

F ,.62=:@9/:7:=>

F (0C?:7:=>

F .:9:7:=>

F :=/0=:7:=>

F $@?7490:7:=>

?,-,=084948@8D:@.,9.=0,?0,90B>?D70-D>48;7D.3,92492?30.:7:=A,7@0>49?30.:7:=

;,70??0+:@8,D,//:==08:A0.:7:=>1=:8?34>;,70??0,>D:@>00H?

Color Palette Example

/* Color Palette */

@bg_color_1: #33383D; // Main Background Color

@bg_color_2: #444A52; // Form Inputs

@bg_color_3: #222529; // Button default

@bg_color_4: #5081E1; // Button primary gradient 1

@bg_color_5: #4375D6; // Button primary gradient 2

@bg_color_6: #CCCCCC; // Button disabled

@bg_color_7: #212529; // Native scrollbar track color

@bg_color_8: #A3A8AE; // 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: #FDFDFD; // Hyperlink color

@txt_color_5: #C5CCD6; // Placeholder color

@txt_color_6: #F53131; // Alert/error color

@icon_color_1: #FDFDFD; // Base icon color

@icon_color_2: #8C8C8C; // Secondary icon color (multitone only)

@icon_color_3: #000000; // Icon shadow color (multitone only)

@icon_color_4: #000000; // Icon secondary shadow color (multitone only)

@icon_color_5: #98A7B8; // Window control icon color

@icon_color_6: #98A7B8; // Form input icon overlay color (e.g. "clear" icon)

@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: #F53131; // Negative Color (error, exception, usually red)

@icon_color_10: #F8A740; // Warning Color (warning, pending, offline, usually yellow

or orange)

@icon_color_11: #FDFDFD; // Icon color for primary buttons

@border_color_1: #222529; // Main border color

@border_color_2: #2E69DB; // Button primary

@border_color_3: transparent; // Button default

@border_color_4: transparent; // Button disabled

@border_color_5: #F53131; // Alert/error color

@border_color_6: #758384; // Form controls default state

@outline_color_1: #75A8FF; // Form input focus outline / autocomplete hover

background color

@outline_color_2: #DAE6FC; // Outline color for primary buttons

'?D7492?30*4/20?>

0;7:D809?@4/0 

C,8;70(3080(08;7,?0470>

Note74.6492?300C,8;70?08;7,?0H70>,@?:8,?4.,77D/:B97:,/>?308?:D:@=.:8;@?0=

?3080?08;7,?0/,=670>>

?3080?08;7,?07423?70>>

(3080(08;7,?0>,=0!''H70>B34.38@>?-0.:9A0=?0/?:''-01:=0-0492@>0/:9,B0->4?0

)>0,B0->4?0:=?::7?:.:9A0=??308B309D:@=0=0,/D?:?0>?,9/48;70809??308:9D:@=>4?0

D/01,@7??30(3080(08;7,?0B477:A0==4/0>?D70>1:=,77090>D>*4/20?>2090=,77D-@?D:@8,D

,//8:=0>;0.4H..3,920>?3,?,G0.?:97D,>;0.4H.B4/20?":=0491:=8,?4:9:9?34>4>;=:A4/0/

7,?0=:9?34>;,20

#,8492+:@=(3080

9?30/,=6?3080?08;7,?0H70?30H=>?.7,>>>070.?:=4>/0H90/,>

.cx-widget.cx-theme-dark

.cx-widget 4>?30-,>0.7,>>1:=,77090>D>*4/20?)(30:@?0=8:>?.:9?,490=:10A0=DB4/20?:=

>?,9/,7:90)070809?3,>?34>.7,>>,9/4>@>0/?:4/09?41D)070809?>?3,?-07:92?:090>D>

*4/20?>

.cx-theme-dark 4>?30.7,>>9,80.=0,?0/1:=?30/,=6?3080(3080>,=0,;;740/-D>0,=.3492

1:=,77070809?>B4?3?30 .cx-widget .7,>>,9/,;;09/492?30?3080>.7,>>9,80?:4?(3@>?30

.:8-490/.7,>>>070.?:=49/4.,?0>>?D70>?3,?B477-0,;;740/:97DB309D:@=.@>?:8?30804>,.?4A0

49?30.:9H2@=,?4:9:-50.?

+:@8,D9,80D:@=?3080.7,>>9,80,9D?3492D:@B4>3(30=0,=09:=0>?=4.?4:9>:=7484?,?4:9>

9,7,?0=>?0;D:@B477=024>?0=?34>?3080.7,>>9,8049D:@=.:9H2@=,?4:9

@>?:84E,?4:9@4/07490>

*309.=0,?492D:@=:B9?3080>?30D,=0=0>?=4.?0/?:?301:77:B492'';=:;0=?40>

F .:7:=

F -,.62=:@9/

F 1:9?1,847D

F 1:9?>?D70

F -:=/0=.:7:=

F -:=/0=>?D70

F ,9/:?30=9:9>?=@.?@=,7;=:;0=?40>

'?D7492?30*4/20?>

0;7:D809?@4/0 

*,=9492

*4/20?>;=48,=47D=0740>:9.7,>>9,80>1:=''>070.?:=>=,?30=?3,9HC0/9:/0;,?3

>070.?:=>)>492.7,>>9,80>,77:B>1:=?30("!>?=@.?@=0?:-0.3,920/B4?3:@?

-=0,6492>070.?:=>:=0C,8;70?30>070.?:=.CB0-.3,?.C80>>,204>,77?3,?>

900/0/?:?,=20?80>>,20-@--70>49>4/0*0-3,?)>492,HC0/9:/0;,?3

0<@4A,709?7460/4A.CB0-.3,?/4A.C-:/D/4A.C?=,9>.=4;?/4A.C80>>,20

2=:@;/4A.C80>>,20.=0,?0>,/0;09/09.D:9?30("!9:/0?D;0,9/>?=@.?@=0

1,9D.3,920>,=08,/0?:*0-3,?>("!>?=@.?@=0?34>''>070.?:=B477-=0,6

)>0?30>8,770>?90.0>>,=D>;0.4H.4?D49D:@=>070.?:=>,9/?=D?:@>0.7,>>9,80>

:97D

*,=9492

C0=.4>0.,@?4:9B309D:@8,60.3,920>?:?30''?:8,60>@=0>?=@.?@=0,9/

1@9.?4:9,74?D,=0=0?,490/

*,=9492

A:4/>0??492'';=:;0=?40>?3,?.3,92030423?B4/?3?34.690>>>4E0A4>4-474?D:=

:?30=;=:;0=?40>?3,?.3,920?30>?=@.?@=0:1B4/20?>(30>0;=:;0=?40>,=09:?

>@;;:=?0/,9/.3,92492?308.:@7/-=0,6B4/20?>?,-474?D,9/@>,-474?D

8;:=?,9?

D/01,@7??30*4/20?>''=010=>?:?30&:-:?:1:9?,A,47,-70,?

3??;>1:9?>2::270.:8

How do I register my themes with Genesys Widgets?

+:@.,9=024>?0=?3080>49?30090>D>*4/20?>.:9H2@=,?4:9

window._genesys.widgets.main.themes = {

"blue": "cx-theme-blue"

};

(309,80A,7@0;,4=@>0/30=0.:9>4>?>:1,60D-7@0,9/?30?3080>''.7,>>9,80.C?3080

-7@0

+:@.,9,//,>8,9D?3080>?:?34>74>?,>D:@900/,9/>070.??30,.?4A0?3080@>492:90:1?3060D

A,7@0>

'?D7492?30*4/20?>

0;7:D809?@4/0 

window._genesys.widgets.main.theme = "blue";

// OR

window._genesys.widgets.bus.command("App.setTheme", {theme: "blue"});

How do I change styles for a specic widget?

?4>;:>>4-70?:>;0.41D>;0.4H.B4/20?>,9/0A09>;0.4H.070809?>B4?349,B4/20?-D,;;09/492?30

B4/20?>''.7,>>9,80?:?30?3080.7,>>9,80

9?301:77:B4920C,8;70B00C?09/?30.C?3080-7@0.7,>>B4?3,B4/20?>;0.4H.09?=D?3,?

8,60>?30*0-3,?B4/20?>-,.62=:@9/.:7:=,/,=60=>3,/0

.cx-widget.cx-theme-blue, .cx-widget .cx-container{

color: #FDFDFD;

background: #1e5799;

}

.cx-widget.cx-theme-blue *{

border-color: #7DB9E8;

}

.cx-widget.cx-theme-blue.cx-webchat, .cx-widget.cx-theme-blue .cx-webchat{

background: #225897;

}

'?D7492?30*4/20?>

0;7:D809?@4/0 

8;:=?,9?

#:?4.0?30/@,7''>070.?:=@>0/B309>;0.41D492,B4/20?(34>4>=0<@4=0/?:8,60

>@=0D:@=>?D70>,7B,D>,;;7D;=:;0=7D

Widget-Speci#c and Element-Speci#c

9?3090C?0C,8;70B01@=?30=0C?09/?30.C?3080-7@0.7,>>B4?3,B4/20?,9/070809?>;0.4H.

09?=D?3,?.3,920>?30-,.62=:@9/.:7:=:1?3049;@?H07/>B4?349?30*0-3,?B4/20??:,7423?

>3,/0:1-7@0

.cx-widget.cx-theme-blue, .cx-widget .cx-container{

color: #FDFDFD;

background: #1e5799;

}

.cx-widget.cx-theme-blue *{

border-color: #7DB9E8;

}

.cx-widget.cx-theme-blue.cx-webchat, .cx-widget.cx-theme-blue .cx-webchat{

background: #225897; // Darker Shade

}

'?D7492?30*4/20?>

0;7:D809?@4/0 

.cx-widget.cx-theme-blue.cx-webchat .form input, .cx-widget.cx-theme-blue .cx-webchat .form

input{

background: #DCF5FF; // Lighter Shade

}

How do I change the layout and structure of widgets?

090>D>*4/20?>:97D>@;;:=?.@>?:84E492,7484?0/>0?:1>?D70>?3=:@23?3080>1D:@B4>3?:@>0

,9,7?0=9,?07,D:@?:1D:@=:B9/0>429D:@.,9/4>,-70?30B4/20?D:@B,9??:=0;7,.0,9/@?474E0

?30;=:A4/0/>0=A4.0;7@249>?:-@47/D:@=:B9

Choosing Which Plugins to Load

&010=?:?30;7@249>.:9H2@=,?4:9:;?4:930=0 ;;:9H2@=,?4:9

Service Plugins

'0=A4.0;7@249>;=:A4/0,342370A07%1:=<@4.67D49?02=,?492,)B4?3-,.609/>0=A4.0>,.3

B4/20?4>8,?.30/B4?3,.:==0>;:9/492>0=A4.0;7@249(34>>0;,=,?4:9,77:B>1:=,/A,9.0/

49?02=,?4:9>

F *0-3,?'0=A4.0

F '09/"0>>,20'0=A4.0

F ,77-,.6'0=A4.0

'?D7492?30*4/20?>

0;7:D809?@4/0 

F 9:B70/2009?0='0=A4.0

*,=9492

3,92492?307,D:@?:1:I.4,7090>D>*4/20?>4>9:?>@;;:=?0/*0.,99:?

2@,=,9?00?3,?D:@=.3,920>B477=08,49B309@;2=,/492?:,90B0=A0=>4:9:1

090>D>*4/20?>

How do I change fonts?

D/01,@7?090>D>*4/20?>/:B97:,/>,9/@>0>?30::2701:9?&:-:?:+:@.,9.3,920?301:9?

@>0/49090>D>*4/20?>-D@>492?301:77:B492''

.cx-widget{ font-family: name-of-font-here; }

3::>0B34.30A0=1:9?D:@B4>3?:@>0,9/4?B477?309,;;7D?3=:@23:@?090>D>*4/20?>

4>,-7492::270:9?:B97:,/

1D:@B:@7/7460?:;=0A09??30&:-:?:1:9?H701=:8-0492/:B97:,/0/,?>?,=?@;D:@.,9/4>,-70

?30/:B97:,/-D.3,92492?30.:9H2@=,?4:9:;?4:9 main.downloadGoogleFont ?: false

'?D7492?30*4/20?>

0;7:D809?@4/0 

_genesys.widgets.main.downloadGoogleFont = false;

'?D7492?30*4/20?>

0;7:D809?@4/0 

1>0??:false?30::2701:9?&:-:?:B4779:?-0/:B97:,/0/1>0??:true?30::2701:9?

&:-:?:B477-0/:B97:,/0/(30/01,@7?A,7@04>true

8;:=?,9?

)>0?34>.:9H2@=,?4:9:;?4:941D:@3,A0>0.@=4?D.:9.0=9>=02,=/49249.7@/4921:9?>

1=:8=/;,=?D>:@=.0>?::;?484E0D:@=;,207:,/?480:=41D:@,7=0,/D49.7@/0

&:-:?::9D:@=B0->4?0

'?D7492?30*4/20?>

0;7:D809?@4/0 