> For the complete documentation index, see [llms.txt](https://docs.blynk.io/en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blynk.io/en/getting-started/template-quick-setup/set-up-web-dashboard.md).

# Set Up Web Dashboard

Now we need to to setup a dashboard template to interact with our device and visualize data from it.

Go to [Web Dashboard](/en/blynk.console/templates/dashboard.md) Tab, click Edit button in the top right corner and drag-n-drop these widgets to the canvas:

* [Switch](/en/blynk.console/widgets-console/switch.md)
* [Label](/en/blynk.console/widgets-console/label.md)
* [Chart](/en/blynk.console/widgets-console/chart.md)

Drag and drop them to Dashboard Preview window:

![](https://gblobscdn.gitbook.com/assets%2F-MBFTVMf7L6S67HOuqVC%2F-MVMYDq0TRdqW29XdjDl%2F-MVN7FVW7Np3NfDOn3a3%2Fadd_widgets.gif?alt=media\&token=b1f61faa-acc1-46a8-ad65-5dff6b4039bc)

After widgets are added you can apply the following **actions**:

* **Arrange** – drag the widgets to an areas you want so you can form desired dashboard view
* **Resize** – hover widget's bottom right corner until cursor changes to resize pictogram, hold left mouse button so you can change widget's size and/or shape
* **Delete** – permanently deletes the widget. Hover the widget and navigate to top right, click bin pictogram.
* **Clone** – clones the selected widget (also it can be applied to configured widget). Hover the widget and navigate to top right, click clone pictogram.
* **Configure** – opens widget configuration window.

![](https://gblobscdn.gitbook.com/assets%2F-MBFTVMf7L6S67HOuqVC%2F-MVMYDq0TRdqW29XdjDl%2F-MVNG7AC55GueGyh3LsB%2Fwidget_ext_actions.gif?alt=media\&token=b3652d5e-eff2-4187-97fd-58a588151e3b)

You'll get a Dashbord view like this one as result:

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2FnWXS4iGDDY2sZhrKKzPP%2F12-templ%20quick%20setup-web%20dashboard%201.png?alt=media&amp;token=d88848ea-dedb-40a1-b791-b17efc7cca69" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**IMPORTANT!** At this stage you have set up a dashboard *template* only and it will not yet connect to your actual devices. You will need to save the template and apply it to actual devices.

In order to see actual data and interact with your device, you need to go to your devices: Search -> My Devices -> Device
{% endhint %}

## Switch Widget Settings

Hover on the widget and you will see a **Configure** (gear) button. Click it and it will open widget settings. Set up widget as in the picture below:

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2Fce2KQtYN5GYpVlMFs4wU%2F13-templ%20quick%20setup-web%20dash-switch%20set%201.png?alt=media&amp;token=1b7bd054-940d-4f8a-bb70-9f8b1a12583f" alt=""><figcaption></figcaption></figure>

## Label Widget Settings

On this widget, we will be showing data from the device in real-time from the `V0` Datastream.

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2FB0vmuTPgHNYs7Y5BFwqj%2F14-templ%20quick%20set-web%20dash-label%20set%201.png?alt=media&amp;token=642325bf-09ad-4e33-a5b1-ebd98bd44c18" alt=""><figcaption></figcaption></figure>

## Chart Widget Settings

On this widget, we will be showing historical data from the device from the `V0` Datastream.

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2F2xcUfMbhPadUECTp3vgV%2F15-templ%20quick%20set-web%20dash-chart%20set%201.png?alt=media&amp;token=b57940c2-c6b3-42ab-866a-78c3b4a4cff8" alt=""><figcaption></figcaption></figure>

Click **Save** button at top right of the screen to save all the changes made to the Template.

{% hint style="warning" %}
**IMPORTANT!** At this stage you have set up a dashboard *template* only and it will not yet connect to your devices. You will need to save the template and apply it to actual devices.

In order to see actual data and interact with your device, you need to go to your devices: Search -> My Devices -> Device
{% endhint %}

A more detailed guide on how to configure/manage a more robust Web Dashboard for your device you can find here:

{% content-ref url="/pages/-MRUg9tfJCNCnjvroaND" %}
[Web Dashboard](/en/blynk.console/templates/dashboard.md)
{% endcontent-ref %}

Now you can proceed to [Blynk.Apps dashboard setup](/en/getting-started/template-quick-setup/set-up-mobile-app-dashboard.md) or [Prepare Your Code](/en/getting-started/template-quick-setup/prepare-code.md)


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.blynk.io/en/getting-started/template-quick-setup/set-up-web-dashboard.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
