Widget: SIP Call Design and Components
This article will guide you through the steps to add and configure a SIP Call Widget (along with all of its components) to create a fully functional SIP interface. A complete SIP sign can be broken down into two main components:
- SIP Call Widget- used to establish connection with the Cisco Unified Communication Manager (CUCM) server and to act as a video display for video conferencing.
- Function Buttons – used for interactions between users and the SIP client for telephony functions (i.e. ending a call, muting the microphone) The following sections in this article will guide you through the creation and configuration of a sign that will be comprised of both components described above to provide an interface for users to interact with.
The following is an example overview of those components that make up the SIP widget:
This article provides the instructions on how and configure the SIP Call widget.
- Adding and Configuring a SIP Call Widget
- Creating a Numeric Keypad and Display
- Creating an End Call Button
- Creating On/Off Speaker Buttons
- Creating Mute/Unmute Microphone Buttons
- Creating Contact Buttons
The following prerequisites must be met/followed in order for all elements of the SIP widget to function properly:
- Appspace server version 5.1.x
- Cisco Unified Communication Manager (CUCM) credentials
- All image files to be used for the operational interface
- Images for each numeric keypad number (0 to 9)
- Images for keypad symbols (* and #)
- Images for functional buttons (mute/unmute, speaker on/off, end call)
Adding and Configuring a SIP Call Widget
This section goes through the steps to configure the SIP call widget. It should be noted that the SIP call widget itself will act/perform as a video zone whenever a video conference has been detected to be available on the receiving end.
From the Signs extension begin by creating a sign with one layout. Give the layout a name (i.e. SIP Client). From the Playout Duration drop-down menu, select Forever.
Click on the Visual Editor button to enter the edit page.
Once the Visual Editor has been loaded, click on the + ADD WIDGET button.
Find the SIP Call widget from the widget list and click Add Widget to continue.
Once the SIP Call widget has been added, size and position the widget appropriately. Make sure to leave enough room for the other widget elements that will also be inserted.
The SIP widget will act/perform as a video zone whenever a video conference has been detected to be available on the receiving end. It is important to ensure and allocate an appropriate size to perform that function. Baseline coordinates and size that can be used for reference: Left: 588, Top: 202, Width: 494, Height: 395
Double-click the SIP widget to access additional property fields that will allow you to enter CUCM credentials (this can also be accessed by clicking on the Properties button on the right-hand side menu). Slide both the Microphone and Audio levels up to to 100. Click the Apply button and then Save to finish adding the widget.
Please refer to your Admin for more information or configuration for CUCM.
Creating a Numeric Keypad and Display
The numeric keypad is used in the event DTMF (dual-tone multi-frequency) signalling or IVR (interactive voice response) input is necessary. Each number or symbol on the keypad is essentially an image that will be mapped to the SIP widget’s built-in actions that will execute a number of possible functions within the widget.
In the above example, the numeric display will be a plain text widget while all keypad buttons will be media zones. Using media zones for keypad buttons will give users the creative flexibility in designing a keypad that can be customized to match their own sign theme.
Each individual keypad button may have a number of actions associated to it. In the above example, there are two actions per keypad button. The first action sends the DTMF tone for IVF usage, while the second action appends the clicked number to the numeric display – thus granting the user a display of clicked numbers.
From within the Visual Editor, click on the + ADD WIDGET button and select the Plain Text widget. Give the widget a name (i.e. Num_Display).
Baseline coordinates and size that can be used for reference: Left: 1352, Top: 119, Width: 457, Height: 79
Double-click the Plain Text widget to access additional property fields (this can also be accessed by clicking on the Properties button on the right-hand side menu). Delete the default text content and click the Apply button and then Save.
Click on the + ADD WIDGET button and select the Media Zone widget. Give the widget a name (i.e. Num1).
Baseline coordinates and size that can be used for reference: Left: 1408, Top: 238, Width: 90, Height: 90
Double-click the Media Zone widget to access additional property fields (this can also be access by clicking on the Properties button on the right-hand side menu). Click on the Content tab and click Add Media in the middle of the page. Select the desired media to represent this particular keypad button (in this example, the button for 1) and click the APPLY button.
Click the Actions tab and click New Action in the middle of the page.
Configure the event Actions and click OK and then Save.
- From the When drop-down menu: select Mouse Click/touch
- From the Select drop-down menu: select SIP Call: SIPWidget
- From the Do drop-down menu: select send DTMF
- In the DTMF field, fill in with the desired tone (in this example, the tone for 1)
On the Actions tab, click New Action to add another action and configure the event Actions. When finished, click OK. Return to the Visual Editor and click the Save icon in the upper left.
- From the When drop-down menu: select Mouse Click/touch
- From the Select drop-down menu: select Numdisplay: Plain Text
- From the Do drop-down menu: select Append Text
- In the Text field, fill in with the action to append (in this example, the number 1)
From within the Visual Editor, select the Appearance tab. Click the Apply button. Repeat Steps #1 through #7 for all needed buttons such as numbers 1 through 9, hash/pound (#), and asterisk (*).
Ensure that all media zones created for the keypad buttons are of the same size.