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
  • Dial by email address
  • Call and event controls
  • Audio and video call control
  • 1:1 and group space messaging
  • Responsive UI
Space Widget

Features

  • Calling:
    • Audio and video 1:1 calling
  • Messaging:
    • Space and 1:1 messaging
    • Markdown support
    • File sharing
    • Message flags and ability to delete messages
    • Read receipts
    • Persistent chat

Requirements

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

Important Notes

  • Calls made between Chrome and the iOS SDK or iOS client are not supported
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/;