# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.escs.io/plugins/js-watchthis.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.