> For the complete documentation index, see [llms.txt](https://play.docs.nexx.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://play.docs.nexx.cloud/widgets/widget-react-plugin.md).

# Widget React Plugin

The nexxPLAY Widget System works also in any React Project. You can simply embed any iFrame Plugin to embed a nexxPLAY Widget instance directly.

For more Control, 3Q offers a dedicated React Plugin, that can be added to your Project easily. It supports Widgets and all Post-Message controlled Functionality.

You can find the Project here:

{% embed url="<https://github.com/3qnexx/nexxPLAY-React>" %}

## Integration

```javascript
npm install nexxplay-react
```

A very simple Usage could look like this:

```javascript
import {NexxWidget} from "nexxplay-react";

export default function TestWidget{

	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxWidget domain="999" widgetHash="ABCDEFG" params="{{launchMode:'none'}}" />
		</div>
	);

}
```

## Supported Attributes

You can use the following Attributes directly in your JSX - only "domain" and "widgetHash" are mandatory, the rest is optional (if you need any other Streamtype than "video", "streamtype" is also mandatory").

| Attribute           | Type                                                                                        | Description                                                                                                                |
| ------------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **domain**          | int                                                                                         | your 3Q nexx Domain ID                                                                                                     |
| **widgetHash**      | String                                                                                      | the "Hash" of the Widget, you want to include                                                                              |
| **secret**          | String                                                                                      | if the Widgets Feed is protected by a secret, enter it here.                                                               |
| **deliveryPartner** | String                                                                                      | if the Media Reporting should be connected to a Delivery Partner, add its Code here.                                       |
| **embedHost**       | String                                                                                      | if you use a custom Embed Domain, enter the Domain (without protocol and Slashes) here. It defaults to "embed.nexx.cloud". |
| **protocol**        | String                                                                                      | if you want to force "http" Usage, set this to "http". It defaults to "https".                                             |
| **params**          | Object with the following possible Keys \[language, affiliatePartner, launchMode, userHash] | if you need additional Parameters, that would be appended via GET Parameters, set them here.                               |

## Interacting with the Widget

If you want to interact with the Widget, you must set "launchMode" to "none" and add a "onWigetClick" Listener to the Component.

This Function will then get all available Details of the clicked Media Item, and your App can process this in any desired Way.

```javascript
import {useRef,useEffect} from 'react';
import {NexxWidget} from "nexxplay-react";

class test extends React.Component{
	
	const widget=useRef(null);

        useEffect(() => {
 		if(widget.current){
 			widget.current.setEventListener(onEvent);
 		}
    	}, []);
    
    	function onEvent(event){
    		console.log(event);
    	}
	
	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexXWidget domain="999" widgetHash="ABCDEFG" secret="ABCABCABC"
			 ref={widget}	
			/>
		</div>
	);

}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://play.docs.nexx.cloud/widgets/widget-react-plugin.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.