Widgets

Embed Webex Teams functionality directly in your web apps with Widgets.

GitHubDemo

anchorWidgets Explained
anchor

Each Webex Teams Widget represents a single product feature of the Webex Teams clients. They are built with React and Redux, and use the Browser SDK to communicate with the Webex Platform.

Widgets can be included directly in your web applications, giving you the ability to customize the Webex collaboration experience. They come pre-built with the Webex Teams User Interface (UI) and may be styled to tailor them to your brand.

We have two different widgets available: Space Widget, Recents Widget

anchorWidget Example
anchor

To add widgets to your web application, it's as easy as including some simple code in your app. In this example, we'll add the Space Widget to a page and join a Webex Teams space.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <title>Space Widget Demo</title>
    <script src="https://code.s4d.io/widget-space/production/bundle.js"></script>
    <link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css">
  </head>
  <body>
    <div id="my-webexteams-widget" style="width: 500px; height: 500px;"/>
    <script>
      var widgetEl = document.getElementById('my-webexteams-widget');
      // Init a new widget
      ciscospark.widget(widgetEl).spaceWidget({
        accessToken: 'ACCESS_TOKEN',
        destinationId: 'SPACE_ID',
        destinationType: 'spaceId'
      });
    </script>
  </body>
</html>

To try this example, replace ACCESS_TOKEN with a valid OAuth token for the Webex Teams API and SPACE_ID with the ID of the space you'd like to open. Upload the code to a webserver, or use a local webserver such as httpster, to see the Space Widget in action.

For more information about using the widgets, see below.

anchorSpace Widget
anchor

Include Webex Teams space functionality in your app. This widget provides the calling, meeting, messaging, and content sharing features related to spaces. Join 1:1 or group spaces to collaborate via messaging, calling, or start and join meetings, all with the familiar Webex Teams UI.

Space Widget Features
  • Calling:
    • Audio and video 1:1 and group calling
    • Dial by email address or SIP address
  • Messaging:
    • 1:1 and group messaging
    • Markdown support
    • File sharing
    • Message flags and ability to delete messages
    • Read receipts
    • Persistent chat
    • Roster list and @mention
Space Widget Usage

To use this widget, you'll first need to create an integration with the following scopes: spark:all.

Using our CDN requires the least amount of work to get started. Add the following to your HTML file:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-space/production/bundle.js"></script>

You can then instantiate the widget by providing an ACCESS_TOKEN and SPACE_ID:

<div id="my-space-widget" />
<script>
  var widgetEl = document.getElementById('my-space-widget');
  // Init a new widget
  ciscospark.widget(widgetEl).spaceWidget({
    accessToken: 'ACCESS_TOKEN',
    destinationType: 'spaceId',
    destinationId: 'SPACE_ID'
  });
</script>

For more usage and configuration information, see the Space Widget Usage documentation in GitHub.

Space Widget Requirements

Supported Desktop Browsers: Chrome (latest), Firefox (latest), and Safari (latest)

anchorRecents Widget
anchor

Display a list of Webex Teams spaces and respond to real-time events. This widget includes a list of recent Webex Teams spaces and can act as a central event processing hub for events happening within the Webex Platform.

Recents Widget Features
  • Recent Webex Teams conversation list (spaces & people)
  • Hooks to open a conversation with the Space Widget
  • Unread space highlighting
  • Event hooks for messages, calls, and memberships
  • Incoming call notifications
Recents Widget Usage

To use this widget, you'll first need to create an integration with the following scopes: spark:all.

Using our CDN requires the least amount of work to get started. Add the following to your HTML file:

<!-- Production compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-recents/production/main.css">

<!-- Production compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-recents/production/bundle.js"></script>

You can then instantiate the widget by providing an ACCESS_TOKEN:

<div id="my-recents-widget" />
<script>
  var widgetEl = document.getElementById('my-recents-widget');
  // Init a new widget
  ciscospark.widget(widgetEl).recentsWidget({
    accessToken: 'ACCESS_TOKEN'
  });
</script>

For more usage and configuration information, see the Recents Widget Usage documentation in GitHub.

Recents Widget Events

The Recents Widget exposes a few events for hooking into widget functionality. When instantiating the widget, you can provide a callback parameter that will fire whenever an event occurs. You can then filter the actions and perform actions:

<div id="my-recents-widget" />
<script>
  var widgetEl = document.getElementById('my-recents-widget');
  // Init a new widget
  ciscospark.widget(widgetEl).recentsWidget({
    accessToken: 'ACCESS_TOKEN',
    onEvent: callback
  });

  function callback(name, detail) {
    if (name === 'messages:created') {
      // Perform an action if a new message has been created
    }
  }
</script>

See the Recents Widget Events documentation in GitHub for more information about event handling.

Recents Widget Requirements

Supported Desktop Browsers: Chrome (latest), Firefox (latest), and Safari (latest)

anchorContent Security Policy
anchor

Webex Teams Widgets can be used on websites which implement a Content Security Policy (CSP) via the Content-Security-Policy HTTP header. Consult your webserver's documentation for more information about configuring CSP. If you're using CSP, use these individual policy directives and their associated values to enable access to the widgets and to allow connectivity to the Webex Platform:

Policy DirectiveValue
script-src'self' 'unsafe-inline' code.s4d.io;
style-src'self' 'unsafe-inline' code.s4d.io;
media-src'self' code.s4d.io *.giphy.com *.clouddrive.com data: blob:;
font-src'self' code.s4d.io;
img-src'self' code.s4d.io *.clouddrive.com data: blob: *.rackcdn.com;
connect-src'self' localhost wss://*.wbx2.com *.wbx2.com wss://*.wbx.com *.webex.com *.code.s4d.io *.ciscospark.com *.giphy.com https://*.clouddrive.com/;
Last updated: December 4, 2018