Webex Teams

Widgets

Web components written in React

Features

Integrate Webex Teams functionality into your existing web apps with Widgets written in React:

  • Audio and/or video 1:1 calling
  • Group space calling new
  • Dial by email address or SIP address new
  • Call and event controls
  • Audio and video call control
  • 1:1 and group space messaging
  • Roster list and @mention new
  • Responsive 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

Requirements

  • Supported Browsers: Google Chrome (latest) and Mozilla Firefox (latest)
  • This Widget requires the spark:all scope
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

Requirements

  • Supported Browsers: Google Chrome (latest) and Mozilla Firefox (latest)
  • This Widget requires the spark:all scope
Getting Started

Quickly incorporate Webex Teams into your existing web applications! With Webex Teams Widgets, it's as easy as including some simple code in your app. Here's one way to add the Space Widget:

<!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: 'YOUR_ACCESS_TOKEN',
        destinationId: 'SPACE_ID',
        destinationType: 'spaceId'
      });
    </script>
  </body>
</html>

Replace YOUR_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.

See the Space Widget Usage or Recents Widget Usage documentation in GitHub for more information about using the widgets.

Content Security Policy

Webex Teams Widgets can be used on websites which implement a Content Security Policy (CSP) via the Content-Security-Policy HTTP header. Incorporate these individual policy directives and their associated values into your webserver's policy to enable access to the widgets and their connections to Webex Teams:

Policy Directive Value
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/;