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

• deviceToken - device token

• orgID - organization id

• orgName - organization name

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:

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

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.

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. 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.

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

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

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

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

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

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.

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

Plan your UI layout so that it looks good even if widget is hidden.

Disable/Enable

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

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 for more details.

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()
}