# 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
}
```


---

# 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.navigaglobal.com/dashboard-plugin/components/widget.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.