Difference between revisions of "WID/Current/SDK/Engagement-combined"

From Genesys Documentation
Jump to: navigation, search
(Published)
m (Text replacement - "Genesys Engage" to "Genesys Multicloud CX")
 
(13 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
|DisplayName=Engage
 
|DisplayName=Engage
 
|TocName=Engage
 
|TocName=Engage
−
|Context=Learn how to use the Genesys Engage plugin to integrate any Engage solution with Genesys Widgets.
+
|Context=Learn how to use the Genesys Multicloud CX plugin to integrate any Engage solution with Genesys Widgets.
 
|ComingSoon=No
 
|ComingSoon=No
−
|Platform=PureEngage
+
|Platform=GenesysEngage-cloud
 +
|Role=Developer
 
|Section={{Section
 
|Section={{Section
−
|alignment=Vertical
 
−
|structuredtext=[[File:Desktop_Engage_Offer_Overlay_View_with_Text_on_left_v1.png|center|frameless|400x400px]]
 
−
The Genesys Engage plugin is generic and contains commands that automate customer engagement within Genesys Widgets. Starting with version [https://docs.genesys.com/Documentation/PSAAS/Public/RN/GW#Nov292019 9.0.015.11], the Engage plugin includes Offers, which allows a customer to view a product or promotion on a page. It comes with many display modes and rendering options, such as overlay/toaster mode with text or image-only layouts, or both.
 
−
[[File:Engage_Invite_Dark_v1.png|center|frameless|400x400px]]
 
−
|Status=No
 
−
}}{{Section
 
 
|sectionHeading=Overview
 
|sectionHeading=Overview
 +
|anchor=overview
 
|alignment=Vertical
 
|alignment=Vertical
−
|structuredtext====Usage===
+
|structuredtext=[[File:Desktop_Engage_Offer_Overlay_View_with_Text_on_left_v1.png|center|frameless|alt=An example of an Engage Offer in overlay view and text on the left side]]
 +
The Genesys Multicloud CX plugin is generic and contains commands that automate customer engagement within Genesys Widgets. Starting with version {{#Widget:ExtLink|link=https://docs.genesys.com/Documentation/PSAAS/Public/RN/GW#Nov292019|displaytext=9.0.015.11}}, the Engage plugin includes Offers, which allows a customer to view a product or promotion on a page. It comes with many display modes and rendering options, such as overlay/toaster mode with text or image-only layouts, or both.
 +
[[File:Engage Invite Dark v2.png|center|frameless|525x525px|alt=An example of an Engage invite offering the customer agent help]]
 +
===Usage===
 
Use the Engage plugin to show either an invite or an offer via the following methods:
 
Use the Engage plugin to show either an invite or an offer via the following methods:
  
−
*Calling the Engage.invite command
+
*Calling the {{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=invite|display text=Engage.invite}} command
−
*Calling the Engage.offer command
+
*Calling the {{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=offer|display text=Engage.offer}} command
  
 
===Namespaces===
 
===Namespaces===
Line 27: Line 26:
 
!Namespace
 
!Namespace
 
{{!}}-
 
{{!}}-
−
{{!}}i18n - Localization
+
{{!}}i18n - {{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=localize|display text=Localization}}
 
{{!}}Engage
 
{{!}}Engage
 
{{!}}-
 
{{!}}-
−
{{!}}CXBus - API Commands and API Events
+
{{!}}CXBus - {{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=commands|display text=API commands}} & {{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=events|display text=API events}}
 
{{!}}Engage
 
{{!}}Engage
 
{{!}}-
 
{{!}}-
Line 39: Line 38:
 
===Screenshots===
 
===Screenshots===
 
'''Engage Invite'''
 
'''Engage Invite'''
−
<gallery>
+
 
−
Engage_Invite_Mobile_Dark_theme.png|Mobile mode Engage Invite view with dark theme
+
[[File:Engage_Invite_Mobile_Dark_theme_v1.png|150x150px|Mobile mode Engage Invite view with dark theme]]
−
Engage_Invite_Mobile_Light_theme.png|Mobile mode Engage Invite view with light theme
+
[[File:Engage_Invite_Mobile_Light_theme_v1.png|150x150px|Mobile mode Engage Invite view with light theme]]
−
</gallery>
 
  
 
'''Engage Offer'''
 
'''Engage Offer'''
−
<gallery>
+
 
−
Desktop_Engage_Offer_toaster_mode.png|Desktop Toast view with both image and text
+
[[File:Desktop_Engage_Offer_toaster_mode.png|150x150px|alt=Desktop Toast view with both image and text]]
−
Desktop_Engage_Offer_modal_overlay_view_with_text_on_top.png|Desktop Modal Overlay view with text on top
+
[[File:Desktop_Engage_Offer_modal_overlay_view_with_text_on_top.png|150x150px|alt=Desktop Modal Overlay view with text on top]]
−
Desktop_Engage_Offer_overlay_view_with_text_at_bottom.png|Desktop Overlay view with text at bottom
+
[[File:Desktop_Engage_Offer_overlay_view_with_text_at_bottom.png|150x150px|alt=Desktop Overlay view with text at bottom]]
−
Desktop_Engage_Offer_Toast_view_with_text_content_on_right.png|Desktop Toast view with text content on right side
+
[[File:Desktop_Engage_Offer_Toast_view_with_text_content_on_right.png|150x150px|alt=Desktop Toast view with text content on right side]]
−
Desktop_Engage_Offer_Toast_view_with_text_content_on_left.png|Desktop Toast view with text content on left side
+
[[File:Desktop_Engage_Offer_Toast_view_with_text_content_on_left.png|150x150px|alt=Desktop Toast view with text content on left side]]
−
Desktop_Engage_Offer_overlay_view_-_Right_text.png|Desktop Overlay view with text on right side
+
[[File:Desktop_Engage_Offer_overlay_view_-_Right_text_v1.png|150x150px|alt=Desktop Overlay view with text on right side]]
−
Desktop_Engage_Offer_modal_Overlay_View_with_Text_on_left.png|Desktop Modal Overlay view with text on left side
+
[[File:Desktop_Engage_Offer_modal_Overlay_View_with_Text_on_left.png|150x150px|alt=Desktop Modal Overlay view with text on left side]]
−
Mobile_Engage_Offer_inserted_onto_the_top_of_a_webpage.png|Mobile Offer inserted onto the top of a web page
+
[[File:Mobile_Engage_Offer_inserted_onto_the_top_of_a_webpage.png|150x150px|alt=Mobile Offer inserted onto the top of a web page]]
−
Mobile_mode_Engage_Offer_view_in_modal_overlay_with_background_greyed_out.png|Mobile Offer view in modal overlay with background area grayed out
+
[[File:Mobile_mode_Engage_Offer_view_in_modal_overlay_with_background_greyed_out_v1.png|150x150px|alt=Mobile Offer view in modal overlay with background area grayed out]]
−
Mobile_modee_Engage_Offer_view_in_modal_overlay.png|Mobile Offer view in modal overlay
+
[[File:Mobile_mode_Engage_Offer_view_in_modal_overlay_v1.png|150x150px|alt=Mobile Offer view in modal overlay]]
−
</gallery>
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 
|sectionHeading=Configuration
 
|sectionHeading=Configuration
 +
|anchor=config
 
|alignment=Vertical
 
|alignment=Vertical
−
|structuredtext=The Genesys Engage plugin doesn't have any configuration options.
+
|structuredtext=The Genesys Multicloud CX plugin doesn't have any configuration options.
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 
|sectionHeading=Localization
 
|sectionHeading=Localization
 +
|anchor=localize
 
|alignment=Vertical
 
|alignment=Vertical
−
|structuredtext=The Genesys Engage plugin doesn't have any localization options.
+
|structuredtext=The Genesys Multicloud CX plugin doesn't have any localization options.
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
−
|sectionHeading=API Commands
+
|sectionHeading=API commands
 +
|anchor=commands
 
|alignment=Vertical
 
|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.
 
|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-AnywhereElse|product=WID|version=Current|manual=SDK|topic=GWCBusExtensions}} 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-SomewhereInThisVersion|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');
 
<source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
  
 
oMyPlugin.command('Engage.invite');</source>
 
oMyPlugin.command('Engage.invite');</source>
 +
{{AnchorDiv|invite}}
 
===invite===
 
===invite===
−
Opens the Engage Widget and renders the text based on the options provided. If no options are provided, it doesn't open.
+
Opens the Engage Widget and renders the text based on the options provided. If no options are provided, the widget doesn't open.
  
 
===Example===
 
===Example===
−
<nowiki>oMyPlugin.command('Engage.invite', {
+
<source lang="javascript">oMyPlugin.command('Engage.invite', {
−
'type':'toast',
+
'type':'toast',
−
'timeout':3000,
+
'timeout':3000,
−
'title':'Engage Title',
+
'title':'Engage Title',
−
'body':'Engage invite body content',
+
'ariaTitle':'Engage Invite',
−
'accept':'Yes',
+
'body':'Engage invite body content',
−
'decline':'No, thanks',
+
'accept':'Yes',
−
'command': 'WebChat.open',
+
'decline':'No, thanks',
−
'options':{'proactive'; true, 'userData': {'category': 'shoes'}}
+
'ariaAccept':'Yes',
−
});
+
'ariaDecline':'No, thanks',
−
+
'ariaClose':'Close',
−
oMyPlugin.command('Engage.invite',{
+
'command': 'WebChat.open',
−
'type':'toast',
+
'options':{'proactive': true, 'userData': {'category': 'shoes'}}
−
'timeout':3000,
+
});
−
'title':'Engage Title',
+
 
−
'body':'Engage invite body content',
+
oMyPlugin.command('Engage.invite',{
−
'accept':'Yes',
+
'type':'toast',
−
'decline':'No, thanks'
+
'timeout':3000,
−
}).done(function(response){
+
'force': true,
−
+
'title':'Engage Title',
−
// Act upon the received response code  
+
'ariaTitle':'Engage Invite',
−
+
'body':'Engage invite body content',
−
switch(response){
+
'accept':'Yes',
−
case 'accepted':oMyPlugin.command('WebChat.open');  
+
'decline':'No, thanks',
−
break;
+
'ariaAccept':'Yes',
−
case 'declined': break;
+
'ariaDecline':'No, thanks',
−
case 'closed': break;
+
'ariaClose':'Close'
−
case 'timeout': break;
+
}).done(function(response){
−
}
+
 
−
+
// Act upon the received response code  
−
});</nowiki>
+
 
 +
switch(response){
 +
case 'accepted':oMyPlugin.command('WebChat.open');  
 +
break;
 +
case 'declined': break;
 +
case 'closed': break;
 +
case 'timeout': break;
 +
}
 +
 
 +
});
 +
</source>
  
−
=== Options ===
+
===Options===
 
{{{!}} class="wikitable"
 
{{{!}} class="wikitable"
 
!Option
 
!Option
 
!Type
 
!Type
 
!Description
 
!Description
−
!Accepted Values
+
!Accepted values
 +
!Default
 +
!Introduced/updated
 
{{!}}-
 
{{!}}-
 
{{!}}type
 
{{!}}type
Line 125: Line 138:
 
{{!}}Widget display type.
 
{{!}}Widget display type.
 
{{!}}toast
 
{{!}}toast
 +
{{!}}
 +
{{!}}
 
{{!}}-
 
{{!}}-
 
{{!}}timeout
 
{{!}}timeout
Line 130: Line 145:
 
{{!}}Timeout integer in milliseconds.
 
{{!}}Timeout integer in milliseconds.
 
{{!}}n/a
 
{{!}}n/a
 +
{{!}}
 +
{{!}}
 
{{!}}-
 
{{!}}-
 
{{!}}title
 
{{!}}title
Line 135: Line 152:
 
{{!}}String for widget title.
 
{{!}}String for widget title.
 
{{!}}n/a
 
{{!}}n/a
 +
{{!}}
 +
{{!}}
 +
{{!}}-
 +
{{!}}ariaTitle
 +
{{!}}string
 +
{{!}}Aria label text for the Engage invite window.
 +
{{!}}n/a
 +
{{!}}
 +
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}body
 
{{!}}body
Line 140: Line 166:
 
{{!}}String for offer body text.
 
{{!}}String for offer body text.
 
{{!}}n/a
 
{{!}}n/a
 +
{{!}}
 +
{{!}}
 
{{!}}-
 
{{!}}-
 
{{!}}accept
 
{{!}}accept
Line 145: Line 173:
 
{{!}}String for Accept button text.
 
{{!}}String for Accept button text.
 
{{!}}n/a
 
{{!}}n/a
 +
{{!}}
 +
{{!}}
 +
{{!}}-
 +
{{!}}ariaAccept
 +
{{!}}string
 +
{{!}}Aria label text for the Accept button.
 +
{{!}}n/a
 +
{{!}}
 +
{{!}}9.0.016.10
 
{{!}}-
 
{{!}}-
 
{{!}}decline
 
{{!}}decline
Line 150: Line 187:
 
{{!}}String for Decline button text.
 
{{!}}String for Decline button text.
 
{{!}}n/a
 
{{!}}n/a
 +
{{!}}
 +
{{!}}
 +
{{!}}-
 +
{{!}}ariaDecline
 +
{{!}}string
 +
{{!}}Aria label text for the Decline button.
 +
{{!}}n/a
 +
{{!}}
 +
{{!}}9.0.016.10
 +
{{!}}-
 +
{{!}}ariaClose
 +
{{!}}string
 +
{{!}}Aria label text for the Engage Close button.
 +
{{!}}n/a
 +
{{!}}
 +
{{!}}9.0.016.10
 
{{!}}-
 
{{!}}-
 
{{!}}command
 
{{!}}command
Line 155: Line 208:
 
{{!}}Command to execute.
 
{{!}}Command to execute.
 
{{!}}n/a
 
{{!}}n/a
 +
{{!}}
 +
{{!}}
 
{{!}}-
 
{{!}}-
 
{{!}}options
 
{{!}}options
Line 160: Line 215:
 
{{!}}Options related to the command provided.
 
{{!}}Options related to the command provided.
 
{{!}}n/a
 
{{!}}n/a
 +
{{!}}
 +
{{!}}
 +
{{!}}-
 +
{{!}}priority
 +
{{!}}number
 +
{{!}}Replace the active lower priority Engage invite with the higher priority Engage invite.
 +
{{!}}n/a
 +
{{!}}0
 +
{{!}}9.0.015.11
 +
{{!}}-
 +
{{!}}force
 +
{{!}}boolean
 +
{{!}}Replace the active Engage invite with the new Engage invite irrespective of priorities.
 +
{{!}}n/a
 +
{{!}}false
 +
{{!}}9.0.015.11
 +
{{!}}-
 
{{!}}}
 
{{!}}}
  
−
=== Resolutions ===
+
===Resolutions===
 
{{{!}} class="wikitable"
 
{{{!}} class="wikitable"
 
!Status
 
!Status
Line 169: Line 241:
 
{{!}}-
 
{{!}}-
 
{{!}}resolved
 
{{!}}resolved
−
{{!}}When engage invite is accepted by user.
+
{{!}}Engage invite is accepted by user.
 
{{!}}accepted
 
{{!}}accepted
 
{{!}}-
 
{{!}}-
 
{{!}}resolved
 
{{!}}resolved
−
{{!}}When engage invite is declined by user.
+
{{!}}Engage invite is declined by user.
 
{{!}}declined
 
{{!}}declined
 
{{!}}-
 
{{!}}-
 
{{!}}resolved
 
{{!}}resolved
−
{{!}}When engage invite widget is closed by user.
+
{{!}}Engage invite widget is closed by user.
 
{{!}}closed
 
{{!}}closed
 
{{!}}-
 
{{!}}-
 
{{!}}resolved
 
{{!}}resolved
−
{{!}}When engage invite widget closes due to timeout.
+
{{!}}Engage invite widget closes due to timeout.
 
{{!}}timeout
 
{{!}}timeout
 +
{{!}}-
 
{{!}}}
 
{{!}}}
−
 
+
{{AnchorDiv|offer}}
 
===offer===
 
===offer===
−
Opens an Offer Widget using the data sent through the command options provided below. It can include both rendering options and the actual data that needs to be displayed in the Offer Widget. If no options are provided, it will not open.
+
Opens a widget for a product offer using the data sent through the command options provided below. The widget can include both rendering options and the actual data that needs to be displayed in the Offer Widget. If no options are provided, the widget will not open.
  
 
===Example===
 
===Example===
−
  <nowiki>oMyPlugin.command('Engage.offer', {
+
<source lang="javascript">
−
 
+
oMyPlugin.command('Engage.offer', {
−
mode:'overlay',
+
−
modal:true,
+
mode:'overlay',
−
layout:'leftText',
+
modal:true,
−
title: 'GRAB WHAT YOU NEED!!',
+
layout:'leftText',
−
headline:'We Got All!',
+
title: 'GRAB WHAT YOU NEED!!',
−
description:'Get free NextDay delivery on orders of $35 or more. Start shopping now!',
+
ariaTitle: 'Offers',
−
 
+
headline:'We Got All!',
−
cta:{
+
description:'Get free NextDay delivery on orders of $35 or more. Start shopping now!',
−
text:'Join',
+
−
url:'https://www.genesys.com',
+
cta:{
−
target:'_blank'
+
text:'Join',
−
},
+
url:'https://www.genesys.com',
−
 
+
target:'_blank'
−
image:{
+
},
−
src:'https://picsum.photos/id/237/300/300',
+
−
alt:'Alternate Text for Image'
+
image:{
−
},
+
src:'https://picsum.photos/id/237/300/300',
−
 
+
alt:'Alternate Text for Image'
−
styles:{
+
},
−
closeButton:{
+
−
'color':'red'
+
styles:{
−
}
+
closeButton:{
−
}
+
'color':'red'
−
}); </nowiki>
+
}
−
 
+
},
 +
        ariaCTA:'Join',
 +
ariaClose:'Close Offer'
 +
});
 +
</source>
 
===Options===
 
===Options===
 
{{{!}} class="wikitable"
 
{{{!}} class="wikitable"
Line 223: Line 300:
 
!Accepted values
 
!Accepted values
 
!Default
 
!Default
−
!Introduced/Updated
+
!Introduced/updated
 
{{!}}-
 
{{!}}-
 
{{!}}mode
 
{{!}}mode
 
{{!}}string
 
{{!}}string
−
{{!}}Display type of Offer Widget
+
{{!}}The display type of the Offer widget.
 
{{!}}overlay, toaster
 
{{!}}overlay, toaster
 
{{!}}toaster
 
{{!}}toaster
Line 241: Line 318:
 
{{!}}layout
 
{{!}}layout
 
{{!}}string
 
{{!}}string
−
{{!}}Additional layout options supported for all modes.
+
{{!}}Additional layout options are supported for all modes.
 
{{!}}minimal, leftText, rightText, topText, bottomText
 
{{!}}minimal, leftText, rightText, topText, bottomText
 
{{!}}leftText
 
{{!}}leftText
Line 248: Line 325:
 
{{!}}headline
 
{{!}}headline
 
{{!}}string
 
{{!}}string
−
{{!}}Offer title header text.
+
{{!}}The Offer title header text.
 +
{{!}}n/a
 +
{{!}}n/a
 +
{{!}}9.0.015.04
 +
{{!}}-
 +
{{!}}ariaTitle
 +
{{!}}string
 +
{{!}}Aria label text for the Offer window.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 255: Line 339:
 
{{!}}description
 
{{!}}description
 
{{!}}string
 
{{!}}string
−
{{!}}Offer body description text.
+
{{!}}The Offer body description text.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 262: Line 346:
 
{{!}}cta
 
{{!}}cta
 
{{!}}object
 
{{!}}object
−
{{!}}An object containing html attributes and/or CXBus command for the CTA (call to action) button.
+
{{!}}An object containing HTML attributes and/or CXBus commands for the CTA (call to action) button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 269: Line 353:
 
{{!}}cta.text
 
{{!}}cta.text
 
{{!}}string
 
{{!}}string
−
{{!}}CTA button text.
+
{{!}}The CTA button text.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 276: Line 360:
 
{{!}}cta.url
 
{{!}}cta.url
 
{{!}}string
 
{{!}}string
−
{{!}}URL string for the CTA button.
+
{{!}}The URL string for the CTA button.
−
Note: The URL must be properly defined with the complete Protocol URL Address. For example, [https://www.genesys.com/ https://www.genesys.com].
+
Note: The URL must be properly defined with the complete Protocol URL Address. For example, https://www.genesys.com.
 
{{!}}_blank, _parent, _self, _top, framename
 
{{!}}_blank, _parent, _self, _top, framename
 
{{!}}n/a
 
{{!}}n/a
Line 284: Line 368:
 
{{!}}cta.target
 
{{!}}cta.target
 
{{!}}string
 
{{!}}string
−
{{!}}To specify where the URL should be opened.
+
{{!}}Specifies where the URL is opened.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 312: Line 396:
 
{{!}}image.src
 
{{!}}image.src
 
{{!}}string
 
{{!}}string
−
{{!}}URL of the image.
+
{{!}}The URL of the image.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 323: Line 407:
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 +
{{!}}-
 +
{{!}}image.title
 +
{{!}}string
 +
{{!}}To indicate the screen reader user whether the image opens the URL in a new window.
 +
{{!}}n/a
 +
{{!}}n/a
 +
{{!}}9.0.016.10
 
{{!}}-
 
{{!}}-
 
{{!}}insertAfter
 
{{!}}insertAfter
 
{{!}}string
 
{{!}}string
−
{{!}}Applicable only in mobile mode. An id or class name of an html selector from the host page. The Offer will be inserted after this element. The value mentioned here should be preceded with the standard Class ('.') and ID selector ('#') character.
+
{{!}}Applicable only in mobile mode. An ID or class name of an HTML selector from the host page. The offer will be inserted after this element. Precede the value mentioned here with the standard Class ('.') and ID selector ('#') character.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 333: Line 424:
 
{{!}}insertBefore
 
{{!}}insertBefore
 
{{!}}string
 
{{!}}string
−
{{!}}Applicable only in mobile mode. An id or class name of an html selector from the host page. The Offer will be inserted before this element. The value mentioned here should be preceded with the standard Class ('.') and ID selector ('#') character.
+
{{!}}Applicable only in mobile mode. An ID or class name of an HTML selector from the host page. The offer will be inserted before this element. Precede the value mentioned here with the standard Class ('.') and ID selector ('#') character.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 340: Line 431:
 
{{!}}insertInto
 
{{!}}insertInto
 
{{!}}string
 
{{!}}string
−
{{!}}Applicable only in mobile mode. An id or class name of an html selector from the host page. The Offer will be appended inside this element. The value mentioned here should be preceded with the standard Class ('.') and ID selector ('#') character.
+
{{!}}Applicable only in mobile mode. An ID or class name of an HTML selector from the host page. The offer will be appended inside this element. Precede the value mentioned here with the standard Class ('.') and ID selector ('#') character.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 347: Line 438:
 
{{!}}styles
 
{{!}}styles
 
{{!}}object
 
{{!}}object
−
{{!}}An Object containing styles for the Offer content.
+
{{!}}An object containing styles for the offer content.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 354: Line 445:
 
{{!}}styles.closeButton
 
{{!}}styles.closeButton
 
{{!}}object
 
{{!}}object
−
{{!}}An Object containing styles for the close button.
+
{{!}}An object containing styles for the close button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 361: Line 452:
 
{{!}}styles.closeButton.color
 
{{!}}styles.closeButton.color
 
{{!}}string
 
{{!}}string
−
{{!}}Color of the close button.
+
{{!}}The color of the close button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 368: Line 459:
 
{{!}}styles.closeButton.opacity
 
{{!}}styles.closeButton.opacity
 
{{!}}number
 
{{!}}number
−
{{!}}CSS 'opacity' property for the close button.
+
{{!}}The CSS 'opacity' property for the close button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 375: Line 466:
 
{{!}}styles.overlay
 
{{!}}styles.overlay
 
{{!}}object
 
{{!}}object
−
{{!}}An Object containing styles for the overlay container.
+
{{!}}An object containing styles for the overlay container.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 382: Line 473:
 
{{!}}styles.overlay.top
 
{{!}}styles.overlay.top
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'top' property for the overlay container.
+
{{!}}The CSS 'top' property for the overlay container.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 389: Line 480:
 
{{!}}styles.overlay.right
 
{{!}}styles.overlay.right
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'right' property for the overlay container.
+
{{!}}The CSS 'right' property for the overlay container.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 396: Line 487:
 
{{!}}styles.overlay.bottom
 
{{!}}styles.overlay.bottom
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'bottom' property for the overlay container.
+
{{!}}The CSS 'bottom' property for the overlay container.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 403: Line 494:
 
{{!}}styles.overlay.left
 
{{!}}styles.overlay.left
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'left' property for the overlay container.
+
{{!}}The CSS 'left' property for the overlay container.
−
Note: When all the position values are provided, the order of precedence will be Top, Right, Bottom and Left.
+
Note: When all the position values are provided, the order of precedence will be top, right, bottom, and left.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 411: Line 502:
 
{{!}}styles.overlay.center
 
{{!}}styles.overlay.center
 
{{!}}boolean
 
{{!}}boolean
−
{{!}}Aligns overlay container to the center of the screen.
+
{{!}}Aligns the overlay container to the center of the screen.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}true
 
{{!}}true
Line 418: Line 509:
 
{{!}}styles.offer
 
{{!}}styles.offer
 
{{!}}object
 
{{!}}object
−
{{!}}An Object containing styles for the Offer window.
+
{{!}}An object containing styles for the Offer window.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 425: Line 516:
 
{{!}}styles.offer.backgroundColor
 
{{!}}styles.offer.backgroundColor
 
{{!}}string
 
{{!}}string
−
{{!}}Background color of the Offer.
+
{{!}}The background color of the offer.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 432: Line 523:
 
{{!}}styles.offer.color
 
{{!}}styles.offer.color
 
{{!}}string
 
{{!}}string
−
{{!}}Text color of the Offer.
+
{{!}}The text color of the offer.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 439: Line 530:
 
{{!}}styles.offer.padding
 
{{!}}styles.offer.padding
 
{{!}}string
 
{{!}}string
−
{{!}}Padding for the Offer container.
+
{{!}}The padding for the offer container.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}0
 
{{!}}0
Line 446: Line 537:
 
{{!}}styles.title
 
{{!}}styles.title
 
{{!}}object
 
{{!}}object
−
{{!}}An Object containing styles for the title.
+
{{!}}An object containing styles for the title.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 453: Line 544:
 
{{!}}styles.title.font
 
{{!}}styles.title.font
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'font' property for the title.
+
{{!}}The CSS 'font' property for the title.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 460: Line 551:
 
{{!}}styles.title.textAlign
 
{{!}}styles.title.textAlign
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'text-align' property for the title.
+
{{!}}The CSS 'text-align' property for the title.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 467: Line 558:
 
{{!}}styles.headline
 
{{!}}styles.headline
 
{{!}}object
 
{{!}}object
−
{{!}}An Object containing styles for the header text.
+
{{!}}An object containing styles for the header text.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 474: Line 565:
 
{{!}}styles.headline.font
 
{{!}}styles.headline.font
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'font' property for the header text.
+
{{!}}The CSS 'font' property for the header text.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 481: Line 572:
 
{{!}}styles.headline.textAlign
 
{{!}}styles.headline.textAlign
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'text-align' property for the header text.
+
{{!}}The CSS 'text-align' property for the header text.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 488: Line 579:
 
{{!}}styles.description
 
{{!}}styles.description
 
{{!}}object
 
{{!}}object
−
{{!}}An Object containing styles for the Offer description text.
+
{{!}}An object containing styles for the offer description text.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 495: Line 586:
 
{{!}}styles.description.font
 
{{!}}styles.description.font
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'font' property for the description text.
+
{{!}}The CSS 'font' property for the description text.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 502: Line 593:
 
{{!}}styles.description.textAlign
 
{{!}}styles.description.textAlign
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'text-align' property for the description text.
+
{{!}}The CSS 'text-align' property for the description text.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 509: Line 600:
 
{{!}}styles.ctaButton
 
{{!}}styles.ctaButton
 
{{!}}object
 
{{!}}object
−
{{!}}An Object containing styles for call to action button in the Offer window.
+
{{!}}An object containing styles for call to action button in the offer window.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 516: Line 607:
 
{{!}}styles.ctaButton.font
 
{{!}}styles.ctaButton.font
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'font' property for the text in call to action button.
+
{{!}}The CSS 'font' property for the text in CTA button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 523: Line 614:
 
{{!}}styles.ctaButton.textAlign
 
{{!}}styles.ctaButton.textAlign
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'text-align' property for the text in call to action button.
+
{{!}}The CSS 'text-align' property for the text in CTA button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 530: Line 621:
 
{{!}}styles.ctaButton.background
 
{{!}}styles.ctaButton.background
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'background' property for the call to action button.
+
{{!}}The CSS 'background' property for the CTA button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 537: Line 628:
 
{{!}}styles.ctaButton.color
 
{{!}}styles.ctaButton.color
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'color' property for the text in call to action button.
+
{{!}}The CSS 'color' property for the text in CTA button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
Line 544: Line 635:
 
{{!}}styles.ctaButton.fontSize
 
{{!}}styles.ctaButton.fontSize
 
{{!}}string
 
{{!}}string
−
{{!}}CSS 'font-size' property for the text in call to action button.
+
{{!}}The CSS 'font-size' property for the text in CTA button.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 +
{{!}}-
 +
{{!}}ariaCTA
 +
{{!}}string
 +
{{!}}Aria label text for the Offer CTA button.
 +
{{!}}n/a
 +
{{!}}n/a
 +
{{!}}9.0.016.10
 +
{{!}}-
 +
{{!}}ariaClose
 +
{{!}}string
 +
{{!}}Aria label text for the Offer Close button.
 +
{{!}}n/a
 +
{{!}}n/a
 +
{{!}}9.0.016.10
 +
{{!}}-
 +
{{!}}priority
 +
{{!}}number
 +
{{!}}Replace the active lower priority Engage Offer with the higher priority Engage Offer.
 +
{{!}}n/a
 +
{{!}}0
 +
{{!}}9.0.015.11
 +
{{!}}-
 +
{{!}}force
 +
{{!}}boolean
 +
{{!}}Replace the active Engage Offer with the new Engage Offer irrespective of priorities.
 +
{{!}}n/a
 +
{{!}}false
 +
{{!}}9.0.015.11
 +
{{!}}-
 
{{!}}}
 
{{!}}}
−
<br />
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
−
|sectionHeading=API Events
+
|sectionHeading=API events
 +
|anchor=events
 
|alignment=Vertical
 
|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.
+
|structuredtext=Once you've {{Link-SomewhereInThisVersion|manual=SDK|topic=GWCBusAPIOverview|anchor=regplugin|display text=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-AnywhereElse|product=WID|version=Current|manual=SDK|topic=GWCBusExtensions}} 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}} for more information about extending Genesys Widgets.|1}}
 
<source lang="javascript">
 
<source lang="javascript">
 
  var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
 
  var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
Line 566: Line 686:
 
!Description
 
!Description
 
!Data
 
!Data
−
!Introduced/Updated
+
!Introduced/updated
 
{{!}}-
 
{{!}}-
 
{{!}}ready
 
{{!}}ready
−
{{!}}The Engage Widget is initialized and ready to accept commands on the bus.
+
{{!}}The Engage widget is initialized and ready to accept commands on the bus.
 
{{!}}n/a
 
{{!}}n/a
 
{{!}}
 
{{!}}
 
{{!}}-
 
{{!}}-
 
{{!}}opened
 
{{!}}opened
−
{{!}}The Engage Widget has opened.
+
{{!}}The Engage widget opens.
 
  Note: Applicable only to Engage.offer command
 
  Note: Applicable only to Engage.offer command
−
{{!}}[https://all.docs.genesys.com/Draft:WID/Current/SDK/Engagement-combined#Metadata Metadata]
+
{{!}}{{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=metadata|display text=Metadata}}
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}CTA
 
{{!}}CTA
−
{{!}}When the user clicks on the CTA button in Engage Widget.
+
{{!}}When the user clicks the CTA button in the Engage widget.
 
  Note: Applicable only to Engage.offer command
 
  Note: Applicable only to Engage.offer command
−
{{!}}[https://all.docs.genesys.com/Draft:WID/Current/SDK/Engagement-combined#Metadata Metadata]
+
{{!}}{{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=metadata|display text=Metadata}}
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}hover
 
{{!}}hover
−
{{!}}When the user first hovers over the Engage Widget.
+
{{!}}When the user first hovers over the Engage widget.
 
  Note: Applicable only to Engage.offer command
 
  Note: Applicable only to Engage.offer command
−
{{!}}[https://all.docs.genesys.com/Draft:WID/Current/SDK/Engagement-combined#Metadata Metadata]
+
{{!}}{{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=metadata|display text=Metadata}}
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}dismissed
 
{{!}}dismissed
−
{{!}}When the user closes the Engage Widget by clicking on the close button.
+
{{!}}When the user closes the Engage widget by clicking the Close button.
 
  Note: Applicable only to Engage.offer command
 
  Note: Applicable only to Engage.offer command
−
{{!}}[https://all.docs.genesys.com/Draft:WID/Current/SDK/Engagement-combined#Metadata Metadata]
+
{{!}}{{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=metadata|display text=Metadata}}
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}closed
 
{{!}}closed
−
{{!}}The Engage Widget has closed.
+
{{!}}The Engage widget closes.
 
  Note: Applicable only to Engage.offer command
 
  Note: Applicable only to Engage.offer command
−
{{!}}[https://all.docs.genesys.com/Draft:WID/Current/SDK/Engagement-combined#Metadata Metadata]
+
{{!}}{{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=metadata|display text=Metadata}}
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}}
 
{{!}}}
−
|Status=No
 
−
}}{{Section
 
−
|sectionHeading=Metadata
 
−
|Status=No
 
−
}}
 
 
{{NoteFormat|Applicable only for Engage.offer command.|1}}
 
{{NoteFormat|Applicable only for Engage.offer command.|1}}
 
===Interaction Lifecycle===
 
===Interaction Lifecycle===
−
Every Offer Engage interaction has a sequence of events we describe as the 'Interaction Lifecycle'. This is a sequence of events that tracks progress and choices from the beginning of an interaction (opening Engage Offers), to the end (closing Offers), and every step in between.
+
Every offer interaction has a sequence of events we describe as the ''Interaction Lifecycle''. These events track progress and user choices from the beginning of an interaction (opening Offers), to the end (closing Offers), and every step in between.
  
−
The following events are part of the Interaction Lifecycle:
+
The following events comprise the Interaction Lifecycle:
−
<source lang="LANGUAGE">ready
+
<source lang="javascript">ready
 
opened
 
opened
 
CTA
 
CTA
Line 619: Line 734:
 
dismissed
 
dismissed
 
closed</source>
 
closed</source>
−
===Lifecycle Scenarios===
+
===Lifecycle scenarios===
−
An Interaction Lifecycle can vary based on each user's intent and experience with the Offer Engage Widget. Here are several sequences of events in the lifecycle that correspond to different scenarios.
+
An Interaction Lifecycle can vary based on each user's intent and experience with the Offer widget. Here are several sequences of events in the lifecycle that correspond to different scenarios.
  
−
The user opened the Offer Engage Widget but changed their mind and closed it without seeing the Offer details:
+
The user opened the Offer widget but changed their mind and closed it without seeing the offer details:
 
<source lang="LANGUAGE">ready -> opened -> dismissed -> closed
 
<source lang="LANGUAGE">ready -> opened -> dismissed -> closed
 
</source>
 
</source>
−
The user opened the Offer Engage Widget, hovered over Offer details then closed it:
+
The user opened the Offer widget, hovered over the offer details, and then closed it:
 
<source lang="LANGUAGE">ready -> opened -> hover -> dismissed -> closed
 
<source lang="LANGUAGE">ready -> opened -> hover -> dismissed -> closed
 
</source>
 
</source>
−
The user opened the Offer Engage Widget and clicked on the button, which triggers CTA:
+
The user opened the Offer widget and clicked on the button, which triggers CTA:
 
<source lang="LANGUAGE">ready -> opened -> CTA -> closed
 
<source lang="LANGUAGE">ready -> opened -> CTA -> closed
 
</source>
 
</source>
−
{{NoteFormat|For a list of all Offer Engage events, see [https://all.docs.genesys.com/Draft:WID/Current/SDK/Engagement-combined#API_Events API Events].|2}}
+
{{NoteFormat|For a list of all Offer events, see {{Link-SomewhereInThisVersion|manual=SDK|topic=Engagement-combined|anchor=events|display text=API events}}.|2}}
−
===Metadata===
+
|Status=No
−
Each event in the Interaction Lifecycle includes the following block of metadata. By default, all values are set to false. As the user progresses through the lifecycle of an Offer Engage interaction, these values are updated.
+
}}{{Section
 +
|sectionHeading=Metadata
 +
|anchor=metadata
 +
|alignment=Vertical
 +
|structuredtext=Each event in the Interaction Lifecycle includes the following block of metadata. By default, all values are set to false. As the user progresses through the lifecycle of an Offer Engage interaction, these values are updated.
  
−
The metadata block contains boolean state flags, timestamps, and elapsed times. These values can be used to track and identify trends or issues with interactions. During run-time, the metadata can help you offer a smart and dynamic experience to your users.
+
The metadata block contains Boolean state flags, timestamps, and elapsed times. These values can be used to track and identify trends or issues with interactions. During runtime, the metadata can help you offer a smart and dynamic experience to your users.
 
===Reference===
 
===Reference===
 
{{{!}} class="wikitable"
 
{{{!}} class="wikitable"
Line 641: Line 760:
 
!Type
 
!Type
 
!Description
 
!Description
−
!Introduced/Updated
+
!Introduced/updated
 
{{!}}-
 
{{!}}-
 
{{!}}opened
 
{{!}}opened
 
{{!}}integer (timestamp)
 
{{!}}integer (timestamp)
−
{{!}}Timestamp indicating when the Offer was opened.
+
{{!}}Timestamp indicating when the offer was opened.
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}closed
 
{{!}}closed
 
{{!}}integer (timestamp)
 
{{!}}integer (timestamp)
−
{{!}}Timestamp indicating when the Offer was closed.
+
{{!}}Timestamp indicating when the offer was closed.
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}dismissed
 
{{!}}dismissed
 
{{!}}integer (timestamp)
 
{{!}}integer (timestamp)
−
{{!}}Timestamp indicating when the user dismissed the Offer by clicking the close button.
+
{{!}}Timestamp indicating when the user dismissed the offer by clicking the close button.
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
Line 665: Line 784:
 
{{!}}timeBeforeCTA
 
{{!}}timeBeforeCTA
 
{{!}}integer (milliseconds)
 
{{!}}integer (milliseconds)
−
{{!}}Total time in milliseconds from when the user opened the Offer to when the CTA is triggered.
+
{{!}}Total time in milliseconds from when the user opened the offer to when the CTA is triggered.
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}timeFirstHover
 
{{!}}timeFirstHover
 
{{!}}integer (timestamp)
 
{{!}}integer (timestamp)
−
{{!}}Timestamp indicating when the user first hovered over Offer.
+
{{!}}Timestamp indicating when the user first hovered over the offer.
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}timeBeforeHover
 
{{!}}timeBeforeHover
 
{{!}}integer (milliseconds)
 
{{!}}integer (milliseconds)
−
{{!}}Total time in milliseconds from when the user opened the Offer to when the user first hovered over Offer.
+
{{!}}Total time in milliseconds from when the user opened the offer to when the user first hovered over the offer.
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}timeElapsedHover
 
{{!}}timeElapsedHover
 
{{!}}integer (milliseconds)
 
{{!}}integer (milliseconds)
−
{{!}}Total time in milliseconds when the user hovered over Offer.
+
{{!}}Total time in milliseconds when the user hovered over the offer.
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}-
 
{{!}}-
 
{{!}}elementClicked
 
{{!}}elementClicked
 
{{!}}string
 
{{!}}string
−
{{!}}Name of CTA element that was clicked ('button').
+
{{!}}Name of CTA element that was clicked.
 
{{!}}9.0.015.04
 
{{!}}9.0.015.04
 
{{!}}}
 
{{!}}}
−
});
+
|Status=No
 +
}}
 
}}
 
}}

Latest revision as of 21:12, November 9, 2021

This topic is part of the manual Widgets API Reference for version Current of Widgets.

Learn how to use the Genesys Multicloud CX plugin to integrate any Engage solution with Genesys Widgets.

Related documentation:

Overview

An example of an Engage Offer in overlay view and text on the left side

The Genesys Multicloud CX plugin is generic and contains commands that automate customer engagement within Genesys Widgets. Starting with version 9.0.015.11, the Engage plugin includes Offers, which allows a customer to view a product or promotion on a page. It comes with many display modes and rendering options, such as overlay/toaster mode with text or image-only layouts, or both.

An example of an Engage invite offering the customer agent help

Usage

Use the Engage plugin to show either an invite or an offer via the following methods:

Namespaces

The Engage plugin uses the following namespaces.

Type Namespace
i18n - Localization Engage
CXBus - API commands & API events Engage
CSS .cx-engage

Screenshots

Engage Invite

Mobile mode Engage Invite view with dark theme Mobile mode Engage Invite view with light theme

Engage Offer

Desktop Toast view with both image and text Desktop Modal Overlay view with text on top Desktop Overlay view with text at bottom Desktop Toast view with text content on right side Desktop Toast view with text content on left side Desktop Overlay view with text on right side Desktop Modal Overlay view with text on left side Mobile Offer inserted onto the top of a web page Mobile Offer view in modal overlay with background area grayed out Mobile Offer view in modal overlay

Configuration

The Genesys Multicloud CX plugin doesn't have any configuration options.

Localization

The Genesys Multicloud CX plugin doesn't have any localization options.

API commands

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.

Important
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 Genesys Widgets extensions for more information about extending Genesys Widgets.
var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

oMyPlugin.command('Engage.invite');

invite

Opens the Engage Widget and renders the text based on the options provided. If no options are provided, the widget doesn't open.

Example

oMyPlugin.command('Engage.invite', {
	'type':'toast',
	'timeout':3000,
	'title':'Engage Title',
	'ariaTitle':'Engage Invite',
	'body':'Engage invite body content',
	'accept':'Yes',
	'decline':'No, thanks',
	'ariaAccept':'Yes',
	'ariaDecline':'No, thanks',
	'ariaClose':'Close',
	'command': 'WebChat.open',
	'options':{'proactive': true, 'userData': {'category': 'shoes'}}
});

oMyPlugin.command('Engage.invite',{
	'type':'toast',
	'timeout':3000,
	'force': true,
	'title':'Engage Title',
	'ariaTitle':'Engage Invite',
	'body':'Engage invite body content',
	'accept':'Yes',
	'decline':'No, thanks',
	'ariaAccept':'Yes',
	'ariaDecline':'No, thanks',
	'ariaClose':'Close'
}).done(function(response){

	// Act upon the received response code 

	switch(response){
	case 'accepted':oMyPlugin.command('WebChat.open'); 
			break;
	case 'declined': break;
	case 'closed': break;
	case 'timeout': break;
}

});

Options

Option Type Description Accepted values Default Introduced/updated
type string Widget display type. toast
timeout number Timeout integer in milliseconds. n/a
title string String for widget title. n/a
ariaTitle string Aria label text for the Engage invite window. n/a 9.0.015.04
body string String for offer body text. n/a
accept string String for Accept button text. n/a
ariaAccept string Aria label text for the Accept button. n/a 9.0.016.10
decline string String for Decline button text. n/a
ariaDecline string Aria label text for the Decline button. n/a 9.0.016.10
ariaClose string Aria label text for the Engage Close button. n/a 9.0.016.10
command string Command to execute. n/a
options object Options related to the command provided. n/a
priority number Replace the active lower priority Engage invite with the higher priority Engage invite. n/a 0 9.0.015.11
force boolean Replace the active Engage invite with the new Engage invite irrespective of priorities. n/a false 9.0.015.11

Resolutions

Status When Returns
resolved Engage invite is accepted by user. accepted
resolved Engage invite is declined by user. declined
resolved Engage invite widget is closed by user. closed
resolved Engage invite widget closes due to timeout. timeout

offer

Opens a widget for a product offer using the data sent through the command options provided below. The widget can include both rendering options and the actual data that needs to be displayed in the Offer Widget. If no options are provided, the widget will not open.

Example

 oMyPlugin.command('Engage.offer', {
 
 	mode:'overlay',
 	modal:true,
 	layout:'leftText',
 	title: 'GRAB WHAT YOU NEED!!',
	ariaTitle: 'Offers',
 	headline:'We Got All!',
 	description:'Get free NextDay delivery on orders of $35 or more. Start shopping now!',
 
 	cta:{
 		text:'Join',
 		url:'https://www.genesys.com',
 		target:'_blank'
 	},
 
 	image:{
 		src:'https://picsum.photos/id/237/300/300',
 		alt:'Alternate Text for Image'
 	},
 
 	styles:{
 		closeButton:{
 			'color':'red'
 		}
 	},
        ariaCTA:'Join',
	ariaClose:'Close Offer'
 });

Options

Option Type Description Accepted values Default Introduced/updated
mode string The display type of the Offer widget. overlay, toaster toaster 9.0.015.04
modal boolean Applicable only when mode is 'overlay'. A smokescreen will be shown in the background of overlay modal window. This window can be dismissed by clicking anywhere in the smokescreen area. n/a false 9.0.015.04
layout string Additional layout options are supported for all modes. minimal, leftText, rightText, topText, bottomText leftText 9.0.015.04
headline string The Offer title header text. n/a n/a 9.0.015.04
ariaTitle string Aria label text for the Offer window. n/a n/a 9.0.015.04
description string The Offer body description text. n/a n/a 9.0.015.04
cta object An object containing HTML attributes and/or CXBus commands for the CTA (call to action) button. n/a n/a 9.0.015.04
cta.text string The CTA button text. n/a n/a 9.0.015.04
cta.url string The URL string for the CTA button.

Note: The URL must be properly defined with the complete Protocol URL Address. For example, https://www.genesys.com.

_blank, _parent, _self, _top, framename n/a 9.0.015.04
cta.target string Specifies where the URL is opened. n/a n/a 9.0.015.04
cta.command string A CXBus command to execute. n/a n/a 9.0.015.04
cta.commandOptions string Options related to CXBUs command. n/a n/a 9.0.015.04
image object An object containing image tag attributes. n/a n/a 9.0.015.04
image.src string The URL of the image. n/a n/a 9.0.015.04
image.alt string Alternate text for the image. n/a n/a 9.0.015.04
image.title string To indicate the screen reader user whether the image opens the URL in a new window. n/a n/a 9.0.016.10
insertAfter string Applicable only in mobile mode. An ID or class name of an HTML selector from the host page. The offer will be inserted after this element. Precede the value mentioned here with the standard Class ('.') and ID selector ('#') character. n/a n/a 9.0.015.04
insertBefore string Applicable only in mobile mode. An ID or class name of an HTML selector from the host page. The offer will be inserted before this element. Precede the value mentioned here with the standard Class ('.') and ID selector ('#') character. n/a n/a 9.0.015.04
insertInto string Applicable only in mobile mode. An ID or class name of an HTML selector from the host page. The offer will be appended inside this element. Precede the value mentioned here with the standard Class ('.') and ID selector ('#') character. n/a n/a 9.0.015.04
styles object An object containing styles for the offer content. n/a n/a 9.0.015.04
styles.closeButton object An object containing styles for the close button. n/a n/a 9.0.015.04
styles.closeButton.color string The color of the close button. n/a n/a 9.0.015.04
styles.closeButton.opacity number The CSS 'opacity' property for the close button. n/a n/a 9.0.015.04
styles.overlay object An object containing styles for the overlay container. n/a n/a 9.0.015.04
styles.overlay.top string The CSS 'top' property for the overlay container. n/a n/a 9.0.015.04
styles.overlay.right string The CSS 'right' property for the overlay container. n/a n/a 9.0.015.04
styles.overlay.bottom string The CSS 'bottom' property for the overlay container. n/a n/a 9.0.015.04
styles.overlay.left string The CSS 'left' property for the overlay container.

Note: When all the position values are provided, the order of precedence will be top, right, bottom, and left.

n/a n/a 9.0.015.04
styles.overlay.center boolean Aligns the overlay container to the center of the screen. n/a true 9.0.015.04
styles.offer object An object containing styles for the Offer window. n/a n/a 9.0.015.04
styles.offer.backgroundColor string The background color of the offer. n/a n/a 9.0.015.04
styles.offer.color string The text color of the offer. n/a n/a 9.0.015.04
styles.offer.padding string The padding for the offer container. n/a 0 9.0.015.04
styles.title object An object containing styles for the title. n/a n/a 9.0.015.04
styles.title.font string The CSS 'font' property for the title. n/a n/a 9.0.015.04
styles.title.textAlign string The CSS 'text-align' property for the title. n/a n/a 9.0.015.04
styles.headline object An object containing styles for the header text. n/a n/a 9.0.015.04
styles.headline.font string The CSS 'font' property for the header text. n/a n/a 9.0.015.04
styles.headline.textAlign string The CSS 'text-align' property for the header text. n/a n/a 9.0.015.04
styles.description object An object containing styles for the offer description text. n/a n/a 9.0.015.04
styles.description.font string The CSS 'font' property for the description text. n/a n/a 9.0.015.04
styles.description.textAlign string The CSS 'text-align' property for the description text. n/a n/a 9.0.015.04
styles.ctaButton object An object containing styles for call to action button in the offer window. n/a n/a 9.0.015.04
styles.ctaButton.font string The CSS 'font' property for the text in CTA button. n/a n/a 9.0.015.04
styles.ctaButton.textAlign string The CSS 'text-align' property for the text in CTA button. n/a n/a 9.0.015.04
styles.ctaButton.background string The CSS 'background' property for the CTA button. n/a n/a 9.0.015.04
styles.ctaButton.color string The CSS 'color' property for the text in CTA button. n/a n/a 9.0.015.04
styles.ctaButton.fontSize string The CSS 'font-size' property for the text in CTA button. n/a n/a 9.0.015.04
ariaCTA string Aria label text for the Offer CTA button. n/a n/a 9.0.016.10
ariaClose string Aria label text for the Offer Close button. n/a n/a 9.0.016.10
priority number Replace the active lower priority Engage Offer with the higher priority Engage Offer. n/a 0 9.0.015.11
force boolean Replace the active Engage Offer with the new Engage Offer irrespective of priorities. n/a false 9.0.015.11

API events

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.

Important
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 Genesys Widgets extensions for more information about extending Genesys Widgets.
 var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
 
 oMyPlugin.subscribe('Engage.ready', function(e){});
Name Description Data Introduced/updated
ready The Engage widget is initialized and ready to accept commands on the bus. n/a
opened The Engage widget opens. 
Note: Applicable only to Engage.offer command
Metadata 9.0.015.04
CTA When the user clicks the CTA button in the Engage widget. 
Note: Applicable only to Engage.offer command
Metadata 9.0.015.04
hover When the user first hovers over the Engage widget. 
Note: Applicable only to Engage.offer command
Metadata 9.0.015.04
dismissed When the user closes the Engage widget by clicking the Close button. 
Note: Applicable only to Engage.offer command
Metadata 9.0.015.04
closed The Engage widget closes. 
Note: Applicable only to Engage.offer command
Metadata 9.0.015.04
Important
Applicable only for Engage.offer command.

Interaction Lifecycle

Every offer interaction has a sequence of events we describe as the Interaction Lifecycle. These events track progress and user choices from the beginning of an interaction (opening Offers), to the end (closing Offers), and every step in between.

The following events comprise the Interaction Lifecycle: 

ready
opened
CTA
hover
dismissed
closed

Lifecycle scenarios

An Interaction Lifecycle can vary based on each user's intent and experience with the Offer widget. Here are several sequences of events in the lifecycle that correspond to different scenarios.

The user opened the Offer widget but changed their mind and closed it without seeing the offer details: 

ready -> opened -> dismissed -> closed

The user opened the Offer widget, hovered over the offer details, and then closed it: 

ready -> opened -> hover -> dismissed -> closed

The user opened the Offer widget and clicked on the button, which triggers CTA: 

ready -> opened -> CTA -> closed
Tip
For a list of all Offer events, see API events.

Metadata

Each event in the Interaction Lifecycle includes the following block of metadata. By default, all values are set to false. As the user progresses through the lifecycle of an Offer Engage interaction, these values are updated.

The metadata block contains Boolean state flags, timestamps, and elapsed times. These values can be used to track and identify trends or issues with interactions. During runtime, the metadata can help you offer a smart and dynamic experience to your users.

Reference

Name Type Description Introduced/updated
opened integer (timestamp) Timestamp indicating when the offer was opened. 9.0.015.04
closed integer (timestamp) Timestamp indicating when the offer was closed. 9.0.015.04
dismissed integer (timestamp) Timestamp indicating when the user dismissed the offer by clicking the close button. 9.0.015.04
triggeredCTA integer (timestamp) Timestamp indicating when the CTA was triggered. 9.0.015.04
timeBeforeCTA integer (milliseconds) Total time in milliseconds from when the user opened the offer to when the CTA is triggered. 9.0.015.04
timeFirstHover integer (timestamp) Timestamp indicating when the user first hovered over the offer. 9.0.015.04
timeBeforeHover integer (milliseconds) Total time in milliseconds from when the user opened the offer to when the user first hovered over the offer. 9.0.015.04
timeElapsedHover integer (milliseconds) Total time in milliseconds when the user hovered over the offer. 9.0.015.04
elementClicked string Name of CTA element that was clicked. 9.0.015.04
Retrieved from "https://all.docs.genesys.com/WID/Current/SDK/Engagement-combined (2025-06-19 21:13:28)"
Comments or questions about this documentation? Contact us for support!