This package has been deprecated

    Author message:

    WARNING: We renamed this module to @webex/widget-space. Please install it instead. See <> for more information.


    0.7.75 • Public • Published

    Spark Message and Meet Widget (widget-message-meet)


    The Spark Message Meet widget allows developers to easily incorporate Cisco Spark 1 on 1 messaging into an application.

    Table of Contents


    This widget handles the heavy lifting of coordinating between your application and the Spark APIs, and provides components of the Spark messaging experience without having to build all front end UI yourself.

    Our widget is built using React, Redux, and the Spark Javascript SDK

    This widget supports:

    • 1 on 1 messaging
    • Inline Markdown
    • Sharing of files and documents
    • Preview and download of files and documents
    • Flagging messages for follow up


    Depending on how comfortable you are with these frameworks, there are are a number of ways you can "install" our code.

    Spark for Developers

    If you haven't already, go to the Spark for Developers Portal ( and sign up for an account. Once you've created an account you can get your developer access token by clicking on your avatar at the top right of the screen.

    When you want to eventually create an integration and have your own users take advantage of the widget, you'll need to create an integration with the following scopes:


    Head over to the Spark for Developers Documentation for more information about how to setup OAuth for your app:


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

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="">
    <!-- Latest compiled and minified JavaScript -->
    <script src=""></script>

    Build from Source

    1. Follow these instructions to checkout and build the SDK
    2. Be sure to run npm install and npm run bootstrap from the root of the sdk repo. You will want to run this every time you pull down any new updates for the sdk.
    3. From the root of the sdk repo, run the following to build the widget:
    PACKAGE=widget-message-meet npm run grunt:package -- build
    1. The built bundles are located at package/widget-message-meet/dist.


    Quick Start

    If you would just like to get running immediately follow these instructions to get a webpack-dev-server running with the widget.

    1. Create a .env file in the root of the SDK project with the following lines, replacing the Xs with the appropriate value:

    2. From the root directory run: PACKAGE=widget-message-meet npm run grunt:package serve


    The easiest way to get the Spark Message and Meet Widget into your web site is to add the built resources and attach data attributes to your a container.

    1. If you're using our CDN, skip to step 2.
    • Copy the resources in the dist directory to own project.
    • Add a <script /> tag to your page to include the bundle.js
    • Add a <link /> tag to include main.css
    1. Create a container where you would like to embed the widget and add the following attributes to configure the widget:
    • data-toggle="spark-message-meet": (required)

    • data-access-token: (required) Access token for the user account initiating the messaging session. For testing purposes you can use a developer access token from

    • Include one of the following attributes:

      • data-to-person-email: Email of the message recipient.
      • data-to-person-id: User Id of the message recipient.


    Because our widgets are built using React, you'll be able to directly import the modules and components into your React app.

    Replace YOUR_ACCESS_TOKEN with the access token of the user who is going to be sending the messages (for development purposes this can just be your Developer Access Token), TARGET_USER_EMAIL with the email of the user who is receiving the messages, and ELEMENT with the ID of the element you want to inject into.

    If you have the User ID of the recipient, you may provide that in the property toPersonId of MessageMeetWidget instead of using toPersonEmail.

    import MessageMeetWidget from '@ciscospark/widget-message-meet';
      <MessageMeetWidget accessToken="YOUR_ACCESS_TOKEN" toPersonEmail="TARGET_USER_EMAIL" />,

    Browser Support

    This widget supports the follow browsers:

    • Current release of Chrome
    • Current release of Firefox
    • Internet Explorer 11 or later


    Please see for more details.


    © 2016-2017 Cisco and/or its affiliates. All Rights Reserved.




    npm i @ciscospark/widget-message-meet

    DownloadsWeekly Downloads






    Last publish


    • adamweeks
    • webex-jenkins