# Widget

Widgets is often used in conjunction with agents or applications in plugin. A widget is a component that is rendered inside a popover component with an icon of the plugin `thumbnail || graphic` image and it's only rendered once in the upper right corner of the Dashboard header *(widget bar)*, even if you have multiple instances of the same application.

You can build your own Widget by exporting a custom react component or by extending the Widget base from Plugin-API

## What does Widget look like?

```jsx
import { GUI } from '@root'
import { forwardRef } from 'react'

import {
    Wrapper
} from './style'

const WidgetComponent = (props, ref) => {
    return (
        <Wrapper ref={ref}>
            <GUI.ListItem
                asMenuItem
                label={'Hello world!'}
                onClick={() => window.open('https://www.google.se/?gws_rd=ssl#q=hello+world')}
            />
        </Wrapper>
    )
}

const Widget = forwardRef(WidgetComponent)

export {
    Widget
}
```

In this example we create a simple widget that renders a list of items that will fit nicely in widget popover component.

#### Result

![Screenshot of a example widget](https://camo.githubusercontent.com/b891f1ab186d3d60a7e7b4230bc619720ea61dff/68747470733a2f2f73332d65752d776573742d312e616d617a6f6e6177732e636f6d2f64617368626f6172642d67726170686963732f44617368626f6172642b5769646765742b69636f6e2e706e67)

## How to register a Widget?

Like any other main component, from your main `index.js` file where you register your plugin, import your Widget and pass it down with the register() method from Plugin-API

```jsx
import DashboardPlugin from 'Dashboard/plugin'

const Plugin = new DashboardPlugin('@plugin_bundle')

const registerPlugin = () => {
    const { Widget } = require('@components/Widget')
    
    Plugin.register({
        widget: Widget
    }
}

registerPlugin()

export {
    Plugin
}
```