APIs
Getting StartedREST API BasicsComplianceWebhooksWebex APIs
Admin
Calling
Contact Center
Devices
imiconnect
Meetings
Messaging
Webex Assistant Skills
Full API Reference
API Changelog

Embedded Apps Overview

The Webex Embedded Apps Framework allows Webex users to seamlessly interact with your third party application from within Webex.

The Webex Embedded Apps Framework lets you easily integrate your existing web applications into Webex meetings and spaces. Webex Embedded Apps present a seamless user experience, and, as with Webex itself, can run across multiple platforms, including Windows, Mac, Linux, iOS, Android, and any popular web browser.

This guide provides the following:

Create an Embedded App

Currently, embedded apps require developers to be provisioned in a Control Hub organization. If you are logged in via a self-signup account, contact devsupport@webex.com to get started developing by getting access to a Webex test organization.

anchorWhy Embedded Apps?
anchor

Webex users collaborate with each other both in real-time during Webex meetings and on an ongoing basis in Webex spaces. However, the information that they need to reference often resides in other web-based applications, requiring them to switch contexts and their focus between the meeting or in-space discussion and the external application. Webex Embedded Apps facilitate surfacing those other applications directly within the Webex in-meeting and in-space interfaces, making it frictionless for users to reference specific 3rd party application content and enabling other participants to access and interact with it directly:

Webex embedded app collaboration

anchorAbout Embedded Apps in Spaces and Meetings
anchor

This section provides a high-level overview of the user experience for using embedded apps in Webex meetings and spaces. In each case the process starts with a meeting participant clicking the Apps button (in a meeting) or tab (in a space) to view the list of available apps, and then opening your app.

Buttons to open list of embedded apps in meeting and spaces

The app the user opens is called the initiator app and is the one specified by your app's "Start Page URL" when you create a new embedded app in the Developer Portal. The purpose of the initiator app is to share the URL of an app — the shared app — that is either opened with meeting participants in real-time, or added as a tab to a space.

This URL is passed the framework's setShareUrl() method, which causes an Open together or Add to tab button to appear in the initiator app's window, depending if the app is running in a meeting or space, respectively. Read more the user experience of in-meeting and in-space embedded apps.

In-Meeting App Experience

For purposes of discussion we'll look at an app for an online polling service. The initiator app in this example (shown below) lets the user create poll questions that are shared with meeting participants. Participants can select an option and send their answer. The initiator app also provides a view for observing live poll results.

Initiator app being configured to share poll

When the user is ready to share the poll they click Create poll, which invokes the setShareUrl() method, passing it the unique URL for the poll and a string for the window title. The initiator app obtains the poll URL from a custom polling service and passes it to setShareUrl():

function createPoll() {
    // Custom app code to get poll instance for given configuration
    var pollURL = pollService.getPollUrl(pollConfig);
    app.setShareUrl(pollUrl, "", "Proposal Poll");
}

Calling setShareUrl() also causes the Open together button to appear in the initiator app's window.

Open together button in meeting

Clicking this button opens the shared URL in a sidebar window for all meeting participants, as shown below. Participants can also click a button in the window's title bar to open it in a separate window. In this case the app lets participants select a poll option and submit their answer.

Meeting participant viewing poll

In the initiator app the user can view poll results as they are tabulated. To end the sharing session — that is, close the app window for all meeting participants — the user of the initiator app clicks Stop session, which has replaced the Open Together button.

Initiator app viewing  poll results

After clicking Stop session the Open Together button remains visible until the initiator app calls clearShareUrl().

app.clearShareUrl();

Notes:

  • The meeting host or co-host(s) will see the Stop session button when a sharing session is in progress, even if they did not click Open together to start the session. This provides hosts with the ability to end a sharing sessions even if they didn't start it themselves.

  • For a given meeting, only one sharing session can be started at a time. If a meeting participant starts a sharing session via one initiator app, and then tries to start another session with a different initiator app, the participant is prompted if they would like to stop the current session and start a new one.

    Dialog to swap sharing sessions

    If a meeting participant starts a sharing session and a second user tries to start another session, the second user will see the following error dialog.

    Sharing session already in progress error

    Apps can avoid the latter scenario by checking if a sharing session is in progress before calling setShareUrl().

In-Space App Experience

The same initiator app can be used for both meetings and spaces, or you can specify a unique URL for each context (see Creating your Embedded App). There are some differences in the user experience of in-space compared to in-meeting apps to consider, as discussed below.

The screenshot below is of the initiator app open in a Webex messaging space. As with the in-meeting experience the user enters the poll questions and clicks Create poll which invokes setShareUrl(), causing an Add to tab button to appear.

Add to Tab button in Space

Clicking Add to tab adds the specified URL as a tab to the space, as shown below. At the time the initiator app window closes. For this reason the in-space app design is slightly different than the in-meeting version: the poll results are provided in a separate tab of the shared app rather than in the initiator app.

App added as tab to space

A feature unique to in-space apps is that you can optionally pass setShareUrl() the URL of a version of the shared app that's meant for use outside of the Webex client. For example, the following call to setShareUrl() includes the external URL "https://www.example.com/poll_123_ext" for the poll.

app.setShareUrl("https://www.example.com/poll_123", "https://www.example.com/poll_123_ext", "Proposal Poll"`

The external URL is exposed to users via the Open in browser and Copy URL space tab menu items, as discussed in Space tab menu items.

Space tab menu

To clear the shared URL the initiator app calls clearShareUrl().

app.clearShareUrl();
Space tab menu items

The following lists the menu items displayed for an embedded app's space tab. Note that some of the menu items are only available to space moderators, as noted.

  • Expand — Opens embedded app in a new window.
  • Copy link — Copies external URL of embedded app to the clipboard. Only appears if a URL was provided as the second parameter to the setShareUrl() method call.
  • Open in browser — Opens embedded app in the system's default web browser. Only appears if a URL was provided as the second parameter to the setShareUrl() method call.
  • Edit — Opens a dialog where a user can edit the name the embedded app's tab. In moderated spaces, only moderators can edit an app; in unmoderated spaces any user can edit an app.
  • View information — Lists basic information about the embedded app, including its URL, the user who added the app to the Space, the last edited date and the user who made the most recent edits.
  • Remove — Removes the app from the Space. In moderated spaces, only moderators can remove apps; in unmoderated spaces any user can remove an app.
anchorMore Information
anchor

For more information about developing embedded apps, see the following topics: