# WebPage Button

Web Page Button is a button that opens in-app browser with a provided URL.

### Examples of use

* Show any web page inside of Blynk app: documentation, online store, etc
* Open your web app (check the placeholders below)
* Payment URL

### Settings

**Link Name:** text to be displayed on the button

**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/
```

**Lock Size:** when On, size of the button will be relative to the text

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

### Change Button Properties

You can change certain properties of the Widget from your hardware. For that, use this command: 

```cpp
Blynk.setProperty(vPin, "widgetProperty", "propertyValue"); 
```

Where: 

* `vPin` is: virtual pin number the widget is assigned to
* `widgetProperty`: property you want to change
* `propertyValue`: value of the property you want to change

{% hint style="danger" %}
Don't put **`Blynk.setProperty()`**into the **`void loop()`** as it can cause a flood of messages and your hardware will be disconnected. Send such updates only when necessary, or use timers.
{% endhint %}

### Widget Properties you can change from device

You can change the properties *onLabel*, *offLabel*, *onColor*, *offColor*, *onBackColor*, *offBackColor*, *label*, *color*, *isDisabled*, *isHidden*, and *page* of the widget from your hardware, or via an [HTTP API](/en/~/revisions/ALsZL4ielzatIAwAwHQo/blynk.cloud/device-https-api.md). The color hexadecimal values in the HTTP API URL must include the hash # character urlencoded as %23. 

#### **URL**

Change the URL to be open. You can use placeholders described [above](#settings).

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

#### Set a custom ON/OFF background color associated with the widget state

```cpp
Blynk.setProperty(V1, "onBackColor", "#73D13D");  // green
Blynk.setProperty(V1, "offBackColor", "#ED9D00");  // orange
```

#### Set a custom ON/OFF label text color associated with the widget state

```cpp
Blynk.setProperty(V1, "onColor", "#73D13D");  // green
Blynk.setProperty(V1, "offColor", "#ED9D00");  // orange
```

#### Set a custom ON/OFF label associated with the widget state

```cpp
Blynk.setProperty(V1, "onLabel", "Playing");
Blynk.setProperty(V1, "offLabel", "Idle");
```

#### **Show/Hide**

Widget will be hidden from dashboard. Design your UI so that it doesn't look weird when there is no widget.

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

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

#### **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);
```

### **Sync to the latest known state** 

You can update your hardware to the latest datastream value from Blynk.Cloud after your hardware went offline, and then came online again. Use `Blynk.syncVirtual()` to update a single virtual pin, or `Blynk.syncAll()` to update all virtual pins. See [State Syncing](/en/~/revisions/ALsZL4ielzatIAwAwHQo/blynk-library-firmware-api/state-syncing.md) for more details.

```cpp
BLYNK_CONNECTED() { 
  // Called when hardware is connected to Blynk.Cloud  

  // get the latest value for V1
  Blynk.syncVirtual(V1); 

  // Request Blynk server to re-send latest values for all pins
  Blynk.syncAll()
}
```


---

# 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/ALsZL4ielzatIAwAwHQo/blynk.apps/widgets-other/webpage-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.