Jump to: navigation, search

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:

Gvg click2callwidget default.png

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.

Feedback

Comment on this article:

blog comments powered by Disqus
This page was last modified on 22 December 2016, at 15:17.