> 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/~/revisions/ALsZL4ielzatIAwAwHQo/blynk.console/widgets-console/web-page-image-button.md).
# Web Page Image Button
Available only for PRO users
{% hint style="warning" %}
***Note:*** please remember that web and mobile app widgets are set up separately in the Web Dashboard and Mobile App Dashboard sections correspondingly. They can still use the same datastreams to access the same data (Map widget is an exception – a different codebase is used for Map on mobile and web).
{% endhint %}
This widget allows you to display any image and open any external or even Blynk Console internal page in the new tab on click.
You need to provide a http/s URL for the image. The URL should be a valid endpoint to the binary data of the image. URL shortener will not work.
You can set up two images representing the pressed/unpressed state of the button and an URL field for the external page address.
### Datastream
When you click on the image, the widget doesn't send any values to the server but datastream is still required as it is used for **setProperty** actions. Only Integer datastream can be used here.
### Mode
The button operates in push mode: on finger released — the button will switch to the default state.
### Widget Settings
#### **URL**
URL to the web page that is opened on click
#### **Images**
**Off Image** - for default button state\
**On Image** - for pressed button state
#### Display options
As of now, the image button widget supports 2 display options:
* **Fit:** The image will be scaled to fit the height or width of the widget size
* **Fill:** The image will be scaled to fill the widget area. Cropping may occur
### Settings via setProperty function
For example, just use V1 datastream.
You can set **url** via setProperty function (in these examples V1 pin is used as an illustration. You should use your own configuration):
```
Blynk.setProperty(V1, "url", "https://blynk.cloud");
```
You can set **onImageUrl** via setProperty function:
```
Blynk.setProperty(V1, "onImageUrl", "https://blynk.cloud/static/icon.png");
```
You can set **offImageUrl** via setProperty function:
```
Blynk.setProperty(V1, "offImageUrl", "https://blynk.cloud/static/icon.png");
```
---
# 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/~/revisions/ALsZL4ielzatIAwAwHQo/blynk.console/widgets-console/web-page-image-button.md?ask=&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.