<commit_before># Spark Space Widget _(@ciscospark/widget-space)_

* THIS WIDGET CONTAINS EXPERIMENTAL CODE *

> The Spark Space widget allows developers to easily incorporate Cisco Spark Space messaging into an application.


## Table of Contents
-   [Background](#background)
-   [Install](#install)
    -   [CDN](#cdn)
    -   [Build from Source](#build-from-source)
-   [Usage](#usage)
    -   [Quick Start](#quick-start)
    -   [HTML](#html)
      -   [Data API](#data-api)
      -   [Browser Globals](#browser-globals)
    -   [JSX](#jsx)
    -   [Events](#events)
-   [Browser Support](#browser-support)


## Background

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

Our widget is built using React <https://github.com/facebook/react>, Redux <https://github.com/reactjs/redux>, and the Spark Javascript SDK <https://github.com/ciscospark/spark-js-sdk>.

This widget supports:
-  1 on 1 messaging
-  1 on 1 video calling
-  Space messaging
-  Inline Markdown
-  Sharing of files and documents
-  Preview and download of files and documents
-  Flagging messages for follow up


## Install

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 (<https://developers.ciscospark.com>) 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 `spark:all` scope.

Head over to the Spark for Developers Documentation for more information about how to setup OAuth for your app: <https://developer.ciscospark.com/authentication.html>

### CDN

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="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>
```

### Build from Source

1.  Follow these instructions to checkout and build the `react-ciscospark` repo <https://github.com/ciscospark/react-ciscospark/blob/master/README.md>

1.  To build the Space Widget, run the following from the root directory:

  ```sh
  npm run build:package widget-space
  ```


## Usage

### 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 React project with the following lines, replacing the Xs with the appropriate value:

    ```
    CISCOSPARK_ACCESS_TOKEN=AN_ACCESS_TOKEN
    SPACE_ID=XXXXX@XXXXXXXXX
    TO_PERSON_EMAIL=XXXXX@XXXXXXXXX
    ```
1.  From the root directory run: `npm run start:package widget-space`

### HTML

The easiest way to get the Spark Space Widget into your web site is to add the built resources and attach data attributes to your a container.<commit_msg>docs(widget-space): Remove @ symbol from space_id<commit_after># Spark Space Widget _(@ciscospark/widget-space)_

* THIS WIDGET CONTAINS EXPERIMENTAL CODE *

> The Spark Space widget allows developers to easily incorporate Cisco Spark Space messaging into an application.


## Table of Contents
-   [Background](#background)
-   [Install](#install)
    -   [CDN](#cdn)
    -   [Build from Source](#build-from-source)
-   [Usage](#usage)
    -   [Quick Start](#quick-start)
    -   [HTML](#html)
      -   [Data API](#data-api)
      -   [Browser Globals](#browser-globals)
    -   [JSX](#jsx)
    -   [Events](#events)
-   [Browser Support](#browser-support)


## Background

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

Our widget is built using React <https://github.com/facebook/react>, Redux <https://github.com/reactjs/redux>, and the Spark Javascript SDK <https://github.com/ciscospark/spark-js-sdk>.

This widget supports:
-  1 on 1 messaging
-  1 on 1 video calling
-  Space messaging
-  Inline Markdown
-  Sharing of files and documents
-  Preview and download of files and documents
-  Flagging messages for follow up


## Install

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 (<https://developers.ciscospark.com>) 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 `spark:all` scope.

Head over to the Spark for Developers Documentation for more information about how to setup OAuth for your app: <https://developer.ciscospark.com/authentication.html>

### CDN

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="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>
```

### Build from Source

1.  Follow these instructions to checkout and build the `react-ciscospark` repo <https://github.com/ciscospark/react-ciscospark/blob/master/README.md>

1.  To build the Space Widget, run the following from the root directory:

  ```sh
  npm run build:package widget-space
  ```


## Usage

### 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 React project with the following lines, replacing the Xs with the appropriate value:

    ```
    CISCOSPARK_ACCESS_TOKEN=AN_ACCESS_TOKEN
    SPACE_ID=XXXXXXXXXXXXXXX
    TO_PERSON_EMAIL=XXXXX@XXXXXXXXX
    ```
1.  From the root directory run: `npm run start:package widget-space`

### HTML

The easiest way to get the Spark Space Widget into your web site is to add the built resources and attach data attributes to your a container.
{'fraction_non_alphanumeric': 0.09107303877366997, 'fraction_numerical': 0.003005710850616171, 'mean_word_length': 3.911439114391144, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 27, 'https://': 16, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 4, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4889342', 'n_tokens_mistral': 1945, 'n_tokens_neox': 1837, 'n_words': 795}