# WebPage Image Button

WebPage Image Button is a button that opens in-app browser with a provided URL. You can provide your own images for ON (pressed) and OFF (idle) states.

### Settings

**URL**: specifies which URL should be opened in the browser. 

You can use placeholders for URL:

`deviceID` - device ID in Blynk

`userID` -  ID of the user pressing the button

`userEmail` - email of the user pressing the button

Example URL with placeholders:

```
https://mywebapp.com/action?user=/userID/&device=/deviceID/
```

**Datastream**: optional parameter. Use if you plan to use set.Property commands

**Images**: specify URLs for images for ON (pressed) and OFF (idle) states

**Scaling:** 

**Fit** - will scale the image up or down to fit the widget. Proportions will be preseved

**Fill** - will scale the image up or down to fill the widget. Proportions will be preseved  

**Open in browser**: When ON, pressing the button will open the OS browser. User will leave the Blynk app 

### Widget Properties you can change from device

Examples below use Virtual Pin V01. Change to your pin. 

**URL.** Change the URL to be open. You can use placeholders described above.

```cpp
Blynk.setProperty(V1, "url", "https://mywebsite.com");
```

**ON/OFF Image URLs.** Change the URL to be opened

```cpp
Blynk.setProperty(V1, "onImageUrl", "https://mywebsite.com/on.png");
Blynk.setProperty(V1, "offImageUrl", "https://mywebsite.com/off.png");
```

**Disable/Enable**. Widget will be greyed out on UI and users won't be able to tap on it.

```cpp
Blynk.setProperty(V1, "isDisabled", true);
```

**Show/Hide**. Widget will be hidden from dashboard. 

{% hint style="warning" %}
Plan your UI layout so that it looks good even if widget is hidden.
{% endhint %}

```cpp
Blynk.setProperty(V1, "isHidden", true);
```


---

# 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.blynk.io/en/~/revisions/VogQMoqSfAjFiPWKwr6n/blynk.apps/widgets-app/webpage-image-button.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.