Cisco Spark

Widgets

Web components written in React

Features

Integrate Spark 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 Spark 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 Spark into your existing web applications! With Spark Widgets, it's as easy as including some simple code in your app. Here's one way to add the Space Widget:

<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-ciscospark-widget" style="width: 500px; height: 500px;"/>
    <script>
      var widgetEl = document.getElementById('my-ciscospark-widget');
      // Init a new widget
      ciscospark.widget(widgetEl).spaceWidget({
        accessToken: 'YOUR_ACCESS_TOKEN',
        spaceId: 'SPACE_ID'
      });
    </script>
  </body>
</html>

Content Security Policy

Cisco Spark 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 Cisco Spark:

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 *.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 https://*.clouddrive.com/;