> 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="/files/1RwxaLlPZK2n8EaRnEYM" 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&#x20;
{% 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="/files/7sVFZjbq9USZlgNwefiW" 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="/files/RyQukdfTqRIFu8taniZe" 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="/files/ZQwvP1GKRn45FMj4o3lX" 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&#x20;
{% 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 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://docs.blynk.io/en/getting-started/template-quick-setup/set-up-web-dashboard.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.
