Cisco WebEx Integration

Last modified on 2022/05/28 10:50

About this integration

SAS_IntegrationNotRESTIntroduction

You can integrate third-party systems with Service Apps in many ways. The method you select will depend on business requirements, architectural and security constraints as well as the characteristics specific to each third-party application or service. You can use the REST, CSV, Online CSV data sources and the HTML Script widget.

This document describes a standard integration process that has already been implemented in a customer context.

To find out more about this integration, please do not hesitate to contact your EasyVista contact, or your service provider and integrator.

Integration Summary

This easy-to-implement integration is used to redirect Product name - ev sas.png app users to specific pages on your WebEx site using the Button or Menu widget.

     Example documentation icon EN.png  Direct access to a WebEx page to view a list of scheduled meetings, plan a meeting, or join a meeting.
 

Integration Data Feed (direction) Authentication Type Integration Connector Options

Product name - ev sas - big.png

Up arrow.png

Logo - Cisco WebEx.png

N/A

Menu widget   Apps - Widget - Menu icon.png

Button widget   Apps - Widget - Button icon.png

SaaS Version of Third-Party Product

On-premise Version of Third-Party Product

Check icon.png

Not check icon.png

Step-by-step integration process

     Open url.png To find out more about the different ways of integrating Cisco WebEx Conferencing in apps using APIs, see WebEx Developer.

Cisco provides developers with three APIs for integrating WebEx Conferencing in third-party applications:

  • URL API: Based on HTTP(S), this API offers functions that can be called by third-party applications.
  • XML API: This API provides a comprehensive set of services supporting most aspects of WebEx Conferencing services. The service responds to XML request messages sent via HTTP Post operations from third-party applications.
  • Teleconference Service Provider (TSP) API: This API enables teleconferencing service providers to integrate their audio conferencing services in WebEx.

Cisco also integrates an interesting functionality called WebEx Common Entry Point (CEP), also referred to as URL link, which enables users to navigate directly to specific pages on your WebEx site to perform different actions.
    Example documentation icon EN.png  View a list of scheduled meetings, plan a meeting, or join a meeting

With this functionality, you can integrate WebEx Conferencing in Product name - ev sas.png in two easy steps:

Note: WebEx does not allow you to display WebEx CEPs and WebEx pages in third-party applications using the X-Frame-Options parameter with the value of SAMEORIGIN. For this reason:

  • You cannot use the HTML Script or Secured HTML widget with an iframe tag, e.g. <iframe src="https:~/~/yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=MO"></iframe> to integrate direct access to WebEx pages in your Product name - ev sas.png apps.
  • This integration therefore uses the Button and Menu widgets. Your WebEx pages will appear in a new tab in your Web browser instance.


Step 1: Identify the URL (WebEx CEP) for redirecting users.

    Open url.png Find out more about WebEx Common Entry Points (CEP).

  • The WebEx CEPs provided by Cisco are used to expose or include WebEx Conferencing functionalities directly in third-party applications without having to modify their interface, and use the URL API or the XML API.
  • Most WebEx CEPs include a frameset displaying a navigation bar at the top and a banner to the left, usually with the logo of your company. 

Note: From the app design viewpoint:

  • WebEx CEPs with the frameset enable users to browse through the entire Cisco WebEx Conferencing interface and access other functionalities directly. Use this option for devices with larger screens.
  • WebEx CEPs without the frameset integrate a unique WebEx Conferencing functionality (with its interface) and occupy less space. Use this option for devices with smaller screens, such as mobiles and smartphones, or if you do not want users to access other functionalities.
With the frameset Without the frameset
WebEx CEP - frameset on.png WebEx CEP - frameset off.png
  • The root URL for WebEx CEPs is http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/.
        Example documentation icon EN.png  https://easyvista.webex.com/easyvista
  • There are four easy and useful WebEx CEPs:
    • My WebEx Meetings:  Presents the list of scheduled meetings for the user and for the current date.
      • With the frameset: http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=MO
      • Without the frameset: http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=MONF
    • My WebEx - Scheduling Meetings: Enables users to schedule a meeting or start an unplanned meeting.
          http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=CM
    • My WebEx - Joining a Meeting: Enables users to join a meeting by providing their meeting key.
          http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?JM
    • My WebEx Home Page: Presents the home page of your WebEx site defined using the Site Admin tool.
          Example documentation icon EN.png  Start a meeting page
      • With the frameset: http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=MH
      • Without the frameset: http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=MHNF

Note: Apart from the Joining a Meeting CEP, users must log in to their WebEx account in their Web browser instance to access the specified URL directly. If users are not logged in, they will automatically be redirected to the WebEx Conferencing login page defined in the WebEx CEP.
         Example documentation icon EN.png  WebEx Conferencing - login.png


Step 2: Integrate the selected URL (WebEx CEP) in an Product name - ev sas.png app.

You can integrate a link to a WebEx CEP in different ways depending on various factors, such as the type of app (usability, role and functionalities), the number of WebEx CEPs to be integrated, user browsing habits, etc.
The three examples of integration below illustrate the different possibilities using the IT Portal template:


Example 1: Integrate a link to a WebEx CEP in the main Menu widget of the app.

Description: The last element in the Knowledge Base menu on the Home page IT Portal template is replaced by an element from the My WebEx menu to redirect users to their list of scheduled meetings.

Description Representation
Click My WebEx in the main Menu widget of the app. WebEx CEP - Example 1 - step 1.png
A new tab will open in the Web browser and display the My WebEx Meetings page of your WebEx site. WebEx CEP - Example 1 - step 2.png

Implementation procedure:

1. Open Product name - ev sas.png.

  • Define an app using the IT Portal template.
  • Change the name of the Knowledge Base menu element to My WebEx.

2. Integrate the link to the My WebEx Meetings CEP.

  • In the Design pane, click the main Menu widget of the app.
  • Click Apps - Edit icon.png next to the My WebEx menu element. In the Properties Inspector:
    • Select Href (New Window) from the Link Type drop-down list. This will open a new tab in the Web browser.
    • In the Link field below, enter the My WebEx Meetings CEP in the following format: http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=MO
    • Click [ OK ].

3. Click EVApps - GUI - Execute icon.png to switch to preview mode and check the visual layout and workability of the app.

 


Example 2: Integrate several links to different WebEx CEPs available from within an app page.

Description: The last element in the Knowledge Base menu on the Home page IT Portal template is replaced by an element from the My WebEx menu to redirect users to an app page containing the Menu widget to enable users to access different pages on your WebEx site.

Description Representation
Click My WebEx in the main Menu widget of the app. WebEx CEP - Example 2 - step 1.png
The My WebEx (Multi Links) page of the app will open. This page contains different menu elements (images) that, when selected, will redirect users to different pages of your WebEx site. WebEx CEP - Example 2 - step 2.png
Click the My WebEx - Scheduling Meetings image to open the WebEx page for scheduling a new meeting. WebEx CEP - Example 2 - step 3.png

Implementation procedure:

1. Open Product name - ev sas.png.

  • Define an app using the IT Portal template.
  • Change the name of the Knowledge Base menu element to My WebEx.

2. Create a My WebEx (Multi Links) page and integrate the links to your WebEx site.

  • Click Apps - Add widget icon.png in the Objects pane. Open the Basic category and click and drag the Menu widget to the Design pane.
  • For each redirection link:
    • In the Data section, click [ ADD ITEM ]
    • In the Label field, enter the name of the menu element. Click O to associate an icon with the name.
    • Click Apps - Edit icon.png. In the Properties Inspector, integrate the link to the WebEx CEP.
      • Select Href (New Window) from the Link Type drop-down list. This will open a new tab in the Web browser.
      • In the Link field below, enter the WebEx CEP you want.
                 Example documentation icon EN.png  My WebEx Meetings CEP in the following format: http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=MO
      • Click [ OK ].

3. Define the link to the My WebEx (Multi Links) page.

  • Select the main page of the app. 
  • Click the main Menu widget in the Design pane.
  • Click Apps - Edit icon.png next to the My WebEx menu element. In the Properties Inspector:
    • Select Page Link from the Link Type drop-down list. This will open an app page.
    • In the Select Page field below, select the My WebEx (Multi Links) page.
    • Click [ OK ].

4. Click EVApps - GUI - Execute icon.png to switch to preview mode and check the visual layout and workability of the app.

 

Best Practice icon.png  To organize menu elements on the page optimally, you can define empty cells.

  • Specify the total number of columns in the Column Number field.
  • For each empty cell, enter &nbsp in the Label field. This value identifies a space in HTML code.
  • Click Apps - Edit icon.png next to the menu element. In the Properties Inspector, select Disabled from the Link Type drop-down list to disable the link associated with the menu element.
     

Example documentation icon EN.png  The Menu widget contains three columns:

  • Active buttons (1) display an image and point to WebEx CEP links. 
  • The button in the center (2) displays the Cisco WebEx logo and points to an inactive link. 
  • Empty cells (3) contain the value &nbsp and point to an inactive link.
             WebEx CEP - Example 2 - Best Practice.png

 


Example 3: Integrate a link to a WebEx CEP in a Button widget.

Description: The YouTube widget on the Home page IT Portal template is replaced by the My WebEx Meetings Button widget to redirect users to their list of scheduled meetings.

Description Representation
Click My WebEx Meetings in the app. WebEx CEP - Example 3 - step 1.png
A new tab will open in the Web browser and display the My WebEx Meetings page of your WebEx site. WebEx CEP - Example 3 - step 2.png

Implementation procedure:

1. Open Product name - ev sas.png.

  • Define an app using the IT Portal template.
  • Delete the YouTube widget.

2. Integrate the link to the My WebEx Meetings CEP.

  • Click Apps - Add widget icon.png in the Objects pane. Open the Basic category and click and drag the Button widget to the Design pane to the free spot previously occupied by the YouTube widget. Change its name to My WebEx Meetings.
  • Change the name of the button to My WebEx Meetings in the Label field. If required, add an image and apply the style you want.
  • In the URL to Load field, enter the My WebEx Meetings CEP in the following format: http(s)://yourWebExHostedName.webex.com/yourWebExHostedName/e.php?AT=MO
  • Select New Window in the Target field to open a new tab in the Web browser.

3. Click EVApps - GUI - Execute icon.png to switch to preview mode and check the visual layout and workability of the app.

Tags:
Powered by XWiki © EasyVista 2022