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

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.

The editor uses a layered structure shown as a breadcrumb at the top, for example Widget > C2 > Inner > Container. Clicking on any part of the widget preview selects that layer so you can edit it directly. The breadcrumb depth changes depending on how the element is nested, for example a text element may show as Widget > C1 > Text or as Widget > C1 > Inner > Text.

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.

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

Preview API States

Once the API is configured, use the Success, Loading, and Fallback tabs below the phone preview to see exactly how the widget will look in each state.

• Success shows the widget as it appears when the API call returns data successfully.

• Loading shows the shimmer animation or image for the while loading state.

• Fallback shows the fallback text or image you set for the when unavailable state.

Using Dynamic Variables in Content

When editing a text element, you can bind it directly to a field from your API response using the format {{api.fieldName}}, for example {{api.username}}. Once the API is configured and connected, the widget replaces this variable with the actual live value from your endpoint.

Managing Your Widgets

Each widget you create appears as a card in the list form, showing the name of the widget, size, name of the platform, and when it was last updated, with a status badge such as Active or Disabled.

As you click on the three dots, three options appear:

Edit

Click on the option that opens a widget editor to edit the content, color, API configuration, and image.

Activate or Disable

Click on the option that either activates or disables the widget.

Delete

Click on this option to permanently delete the widget.

When a new widget is created, by default it is Disabled. So, activate once you are ready for it to appear on the home screen.