DocumentationBlogSupport
Log inSign up
Log inSign up
BlogSupport
Build
Getting StartedPlatform Introduction
Embedded Apps
OverviewDeveloper GuideSubmission Checklist for Embedded Apps
Design Guidelines
MeetingsMessagingDevices
API Reference
BotsButtons and CardsIntegrationsLogin with WebexWidgetsGuest IssuerWebex ConnectInstant Connect Meeting LinksDeveloper SandboxSubmit Your AppSupport PolicyFAQs
APIs
XML API DeprecationGetting StartedREST API BasicsComplianceWebhooksWebex APIs
Admin
OverviewAdmin APIsAuthentication
Guides
Hybrid ServicesWebhooksReal-time File DLP Basics
Reference
Admin Audit EventsAuthorizationsEventsGroupsHistorical AnalyticsHybrid ClustersHybrid ConnectorsLicensesLocationsMeeting QualitiesOrganizationsPeopleRecording ReportRecordingsReport TemplatesReportsResource Group MembershipsResource GroupsRolesSecurity Audit EventsSession TypesSpace ClassificationsTracking CodesWebex Calling Organization SettingsWebex Calling Person SettingsWebex Calling Workspace SettingsWholesale Billing ReportsWorkspace LocationsWorkspace MetricsWorkspaces
Calling
Overview
Guides
Integrations and AuthorizationWebex for BroadWorksWebex for WholesaleWholesale and Broadworks Common Guide
Reference
BroadWorks Billing ReportsBroadWorks Device ProvisioningBroadWorks EnterprisesBroadWorks SubscribersCall ControlsLocationsPeopleRecording ReportVideo MeshWebex Calling Detailed Call HistoryWebex Calling Organization SettingsWebex Calling Person SettingsWebex Calling Voice MessagingWebex Calling Workspace SettingsWholesale Billing ReportsWholesale CustomersWholesale Subscribers
Contact Center
Overview
Devices
Overview
Guides
DevicesWorkspace Integrations Guide
Reference
Device ConfigurationsDevicesWorkspace LocationsWorkspace MetricsWorkspace PersonalizationWorkspacesxAPI
Meetings
Overview
Guides
Integrations and AuthorizationWebhooksWebinar GuideMeeting Resource Guide
Reference
Meeting ChatsMeeting Closed CaptionsMeeting InviteesMeeting MessagesMeeting ParticipantsMeeting PollsMeeting PreferencesMeeting Q and AMeeting QualitiesMeeting TranscriptsMeetingsMeetings Summary ReportPeopleRecording ReportRecordingsSession TypesTracking CodesVideo MeshWebhooks
Messaging
Overview
Guides
BotsIntegrations and AuthorizationWebhooksButtons and Cards
Reference
Attachment ActionsEventsMembershipsMessagesPeopleRoom TabsRoomsTeam MembershipsTeamsTracking CodesWebhooks
Webex Assistant Skills
Guides
Skills SDK GuideSkills Developer PortalSkills Reference GuideSkills UX Guide
Overview
FedRAMP
Overview
Guides
Create a BotCreate an IntegrationNotes on API Support
Webex Status API
Full API Reference
Admin Audit EventsAttachment ActionsAuthorizationsBroadWorks Billing ReportsBroadWorks Device ProvisioningBroadWorks EnterprisesBroadWorks SubscribersCall ControlsDevice ConfigurationsDevicesEventsGroupsHistorical AnalyticsHybrid ClustersHybrid ConnectorsLicensesLocationsMeeting ChatsMeeting Closed CaptionsMeeting InviteesMeeting MessagesMeeting ParticipantsMeeting PollsMeeting PreferencesMeeting Q and AMeeting QualitiesMeeting TranscriptsMeetingsMeetings Summary ReportMembershipsMessagesOrganizationsPeopleRecording ReportRecordingsReport TemplatesReportsResource Group MembershipsResource GroupsRolesRoom TabsRoomsSecurity Audit EventsSession TypesSiteSpace ClassificationsTeam MembershipsTeamsTracking CodesVideo MeshWebex Calling Detailed Call HistoryWebex Calling Organization SettingsWebex Calling Person SettingsWebex Calling Voice MessagingWebex Calling Workspace SettingsWebhooksWholesale Billing ReportsWholesale CustomersWholesale SubscribersWorkspace LocationsWorkspace MetricsWorkspace PersonalizationWorkspacesxAPI
API Changelog
SDKs
iOSAndroidBrowserNode.jsJava
Developer CommunityCertifications

Embedded Apps Overview

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

anchorAbout the Embedded Apps Framework
anchor

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:

  • Overview of the embedded app experience in Meetings and Spaces
  • Developer quick start
  • Embedded Apps Framework API Reference
  • Design guidelines and considerations for apps running in meeting and messaging contexts.

Create an Embedded App

If you are not currently a Webex customer you can request a developer sandbox to start developing embedded apps. Free Webex user accounts cannot be used to create embedded apps.

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 for all 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.

anchorIn-Meeting App Experience
anchor

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 for all button to appear in the initiator app's window.

Open for all 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 Close for all, which has replaced the Open for all button.

Initiator app viewing  poll results

The initiator app calls clearShareUrl() to hide the Open for all button.

app.clearShareUrl();

Notes:

  • The meeting host or co-host(s) will see the Close for all button when a sharing session is in progress, even if they did not click Open for all 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().

anchorIn-Space App Experience
anchor

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:

  • Developer quick start — Walks you through the steps to create your first embedded app and test it with the Open for all feature in a meeting, and the Add to tab feature in a space.
  • Responding to events — Explains how to register event handlers for various events generated by the framework.
  • Embedded Apps Framework API Reference — Complete API reference for embedded app developers.
  • Design guidelines and considerations for in-meeting and in-space embedded apps.
  • About the Embedded Apps Framework
  • Why Embedded Apps?
  • About Embedded Apps in Spaces and Meetings
  • In-Meeting App Experience
  • In-Space App Experience
  • More Information

Connect

Support

Developer Events

Contact Sales

Handy Links

Webex Ambassadors

Webex App Hub

Resources

Open Source Bot Starter Kits

Download Webex

DevNet Learning Labs

Terms of Service

Privacy Policy

Cookie Policy

Trademarks

© 2023 Cisco and/or its affiliates. All rights reserved.