Click-to-Call Widget

Introduction

Use the Click-to-Call (C2C) Widget to add a small customizable widget to a web page. This widget displays up to two buttons, each of which allows you to make a call. One button creates a video call, while the other is for voice-only calls. When you select a button, it opens a new window that makes the appropriate type of call.

The code for the widget is located on the server at /opt/zenon/public_html/ZMobile_JS/ZMobile_JS/lib/SDK/sdk/C2CWidget.js. The demo code is located on the server at /opt/zenon/public_html/user/demo/index2.jsp and /opt/zenon/public_html/user/demo/index3.jsp.

A patch that includes some improvements is available, along with a Readme that explains how to apply the patch. Click here to download the patch.

You can customize the widget by passing parameters to it. For example, the voice-only and video call buttons can be disabled. This is what the default widget looks like:

link=

Supported Parameters

The C2C widget supports the following parameters:

uiParent	The C2C widget will add HTML to an element with this ID. This is meant to be used with a <div> element.
widgetStyle	This is CSS that can be applied to the widget. If not specified, a default style is used instead.
closeStyle	This is CSS that can be applied to the close button of the widget. If not specified, a default style is used instead. If the close button is disabled, then this has no effect.
topImage	The C2C widget can have an image displayed on the top section. This specifies the image to be shown. By default, there is no image.
text	The C2C widget can have text displayed on the top section, below an image. This specifies the text to be shown. The default value is "Welcome to Genesys".
videoCallButtonImage	An image can be used as the video call button instead of a default button. This specifies which image to use.
voiceCallButtonImage	An image can be used as the voice call button instead of a default button. This specifies which image to use.
buttonStyle	This is CSS that can be applied to the buttons. It has no effect if videoCallButtonImage and voiceCallButtonImage are not specified.
iconStyle	This is CSS that can be applied to the button icons. It has no effect if videoCallButtonImage and voiceCallButtonImage are not specified.
enableVideoButton	If this is false, then the video call button is disabled. Otherwise, the button is enabled.
enableVoiceButton	If this is false, then the voice call button is disabled. Otherwise, the button is enabled.
disableCloseButton	If this is true, then the close button will be disabled on the widget. Otherwise, the widget will have a close button.
hideLeftPosn	This, along with hideTopPosn, specifies where the widget will go when the close button is pressed. This parameter specifies where on the screen the left side of the widget will be when hidden.
hideTopPosn	This, along with hideLeftPosn, specifies where the widget will go when the close button is pressed. This parameter specifies where on the screen the top side of the widget will be when hidden.
showLeftPosn	This, along with showTopPosn, specifies where the widget will go when the widget is revealed. This parameter specifies where on the screen the left side of the widget will be when shown.
showTopPosn	This, along with showLeftPosn, specifies where the widget will go when the widget is revealed. This parameter specifies where on the screen the top side of the widget will be when shown.
showC2CImmediately	If this is true, then the C2C widget is shown immediately. Otherwise, the C2C widget's initial position will be the same as the element specified by uiParent.
callPageToOpen	This is the URL of the page that will be opened when the voice-only or video call button is clicked. A new window will be opened and then go to this page. This is intended to be specific pages (for example, /user/demo/sdki.html) hosted by the ZAS, but could in theory be used with any web page. If another web page is to be used, it should support the parameters that will be passed to the newly created window.
callWindowLeft	This specifies the left position of the newly opened window.
callWindowTop	This specifies the top position of the newly opened window.
callWindowWidth	This specifies the width of the newly opened window.
callWindowHeight	This specifies the height of the newly opened window.
service	This specifies which service will be used when retrieving configurations. It passes the value of this parameter to the service parameter of the newly opened window.
destination	This specifies the destination of the call. It passes the value of this parameter to the destination parameter of the newly opened window.
customSipHeader	This can be specified to add a custom SIP header to the call. It passes the value of this parameter to the arg1 parameter of the newly opened window.
forceFlash	This can be specified to force the call to use flash. It passes the value of this parameter to the forceFlash parameter of the newly opened window.
windowName	This can be used to specify the window name. It has no direct effect on the functionality, but the window name can be used to get a reference to the newly opened window.
IeCompatibilityModeErrorMessage	If a user is using Internet Explorer in compatibility mode, this message will be shown to the user.
webRTCVideoWidth	If the user is using WebRTC, this specifies the width of the video.
webRTCVideoHeight	If the user is using WebRTC, this specifies the height of the video.
flashVideoWidth	If the user is using Flash, this specifies the width of the video.
flashVideoHeight	If the user is using Flash, this specifies the height of the video.
videoFPS	This specifies the frame rate of the video.
webRTCEnableSFU	This specifies whether SFU will be used for WebRTC.
webRTCVideoBandwidth	This specifies the video bandwidth of a WebRTC call.
flashMinVideoBandwidth	This specifies the minimum video bandwidth of a flash call.
flashMaxVideoBandwidth	This specifies the maximum video bandwidth of a flash call.

Requirements

The C2C widget requires that you include jQuery, Zenon JavaScript SDK, and Underscore on the client page that uses it. If no styles are specified, the widget uses default styles. In that case, you must also include the default CSS.