> For the complete documentation index, see [llms.txt](https://docs.escs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.escs.io/plugins/js-watchthis.md).

# JS WatchThis

## Connecting plugin to your project.

To obtain the plugin please connect with us.

Then you can import it in your js project's package.json dependency section:

```
"@escs/react-escs-plugin": "https://username@bitbucket.org/repo_name"
```

If you are using react, then just import these:

```javascript
import { service, ESCSButton, ESCSWebView } from '@escs/react-escs-plugin' 
import '@escs/react-escs-plugin/dist/styles.css'
```

You can use ESCSButton and ESCSWebView as your regular react components in JSX like this:

```jsx
<ESCSWebView></ESCSWebView>
<ESCSButton visible={true}></ESCSButton>
```

Otherwise, if you are using plain vanilla js or any other js framework, you need to use vanilla js imports:

```javascript
import { service, renderReact } from '@escs/react-escs-plugin' 
import '@escs/react-escs-plugin/dist/styles.css'
```

Then in your main js file you need to initialize react render:&#x20;

```javascript
renderReact('app', callback);
```

Where 'app' is the id of the root DOM element.

and in your callback you can instantiate two ESCS WatchThis components:

```javascript
window.Loader.load("ESCSButton", {
    visible: true
}, divEscsButton, () => {
    console.log("ESCSButton Loaded");
});

window.Loader.load("ESCSWebView", null, divEscsWebView, () => {
    console.log("ESCSWebView Loaded");
});
```

where **divEscsButton** and **divEscsWebView** are your DOM elements, where Escs Button and Escs WebView will be rendered

Also, for your convenience, you can inject service in the global window scope, to be able to access it in all parts of your game:

```javascript
window.escsService = service;
```

After this all you need is to initialize the plugin to get WatchThis overlay in your app.

### Initialization

To start using your plugin you need first initialize it:

```javascript
service.invokeManaged({
    public_key: 'XXXX-XXXX',
    base_url: 'https://example1.com',
    player_base_url: 'https://example2.com',
    analyticsEnv: 'prod'
})
```

where:&#x20;

* **`public_key`** - a key that you've obtained from us
* **`base_url`** - url for the core ESCS service. You can obtain it from us
* **`player_base_url`** - url for the player's ESCS service. You can obtain it from us
* **`analyticsEnv`**- environment to use for analytics reporting

## Sending shared events for party participants

It's very easy to send shared stream of events between party participants. All the events send from any of the participant's app instance will be broadcasted to everyone in the party:

```javascript
service.sendEvent(eventName, eventParams);
```

where **eventName** is string and **eventParams** is an object containing params for that event.

To subscribe to an event stream coming from each participant you can use this method:

```javascript
service.addEventListener(eventName, params => {
    console.log("[event log]:", eventName, params)			    
 });
```

where again **eventName** is the name of the event you want to listen for and **params** are params send along with it. Thus using these two methods you can easily sync any state between all the participants in your party.