Home Screen Widgets allow you to add interactive and intuitive widgets to your app’s home screen. WebToNative has a wide range of built-in templates with complete customization from text to icons. You can add multiple widgets to your app’s home screen with their own size, design, and customizations. Home Screen Widgets are available in the Pro and Premium plans for Android and iOS.
Navigate to Add-Ons → Others → Home Screen Widgets
QR on packaging
Scan a product box and instantly view its manual or demo
Table-side menu
Scan QR at the table — menu opens with no download
Parking / rental
Scan a bay tag and pay without installing the app
Step-By-Step Process to Integrate Home Screen Widgets
Choose a Widget Size
Click on Browse Templates. Select sizes as Small, Medium, and Large.
Pick the Widget Template
Click on the desired template to select it. The templates include an App Update, Orange Basket Cart Items, Weather Widget, Hiker Notification, Banking Widgets, Latest Blogs, and more.
If none of the available templates fit your widget requirements, click on Request Widget to contact the WebToNative support team for further assistance.
Edit Widget Information
Click on the Edit icon from the top left corner. You can edit the name and description of the widget. These two things are used to identify the widget inside the dashboard.
Customize the Widget
As the widget you selected is opened, tap on the element you want to customize inside the widget. As you start customizing the widget, a live preview is on the left side with a customization panel on the right for each element.
You can edit every element inside a widget, including:
1. Content
Click on any text element to change its content. You can set its color to Auto or Custom.
2. Color
You can select a background container color from the color palette or write a hex code. You should also adjust the corner radius for the container.
3. Image
You can either replace the default image or upload your specific image from your device.
4. Tap URL
Set where the widget takes the user when tapped. For example, an in-app screen using a scheme like app//:search or an external URL link.
As every layer is selected independently, you can rename any text, customize the color theme, or change the widget destination for each interactive part of the widget.
Click on Save Widget to make it live and save your widget.
Data Sources for Home Screen Widgets
1. Static Source (By Default)
A Static Source is used when you simply want a widget interaction to perform an action inside your app without fetching any data.
For example, suppose you have a chess app that allows users to play against the computer or in multiplayer.
Normally, a user would:
-
Open the app.
-
Tap Play with Computer.
-
Start a new match.
With a Home screen widget, you can create a "Play with Computer" button that launches the app and directly opens a new chess session, skipping the extra steps.
2. API Source
Click on the Settings icon inside the widget editor to configure the API configuration to show the live data inside the widget.
Set the toggle on the Enable API Data Source to allow the widget to fetch live data from your API endpoint.
- Under the Endpoint field, choose the GET or POST method. And enter the URL.
Use the GET method when your API only needs to return data without sending any additional information in the request body.
Use the POST method when your API expects data to be sent along with the requests, such as a user ID or filter values required to generate the response.
- Headers support dynamic variables. Under the Headers field, click + Add row to add a Key and Value pair for anything your API requires in the request headers. Your backend needs to know whether a request originated from the app or from a widget. You can attach custom HTTP headers as key-value pairs.
Example, api-source: webtonative-widget
- Query Params support dynamic variables. Under the Query Params, click + Add row to add a Key and Value pair to allow you to customize API responses without changing the endpoint.
- You should set the Refresh Interval to control how often the widget re-fetches data on the device. It includes every 15 minutes, 30 minutes, 1 hour, or 6 hours.
-
Inside API States, choose what the widget shows While Loading and When Unavailable. You have to select the text and image that will be displayed on the Widget. So it never looks broken while data is being fetched.
- While Loading
If your API is still fetching data, you can display placeholder text or placeholder images instead of leaving the widget empty.
- While Unavailable
If the API request fails or a specific field is missing, you can define fallback values for both text and images.
Click Apply Settings to save the API connection to the widget.