Usually MWA entry point is a simple card on the dashboard, with configurable Title, Background Image or Color and Icon:

img
Now it is possible to create a custom MWA widget entry point and keep close to native user experience at the same time.
Here is the example of the widget, created completely using MWA:

img
Here is a step-by-step guide explaining the nuances of how it was built, and source code as a reference could be found [here](https://github.com/egym/mwa-reference/blob/0d1b5b0b396b8ce82787d9e78b7f3856bad9e435/src/pages/LatestActivityWidgetPage):

## 1. Loading skeleton

### 1.1. Skeleton file location in build folder

It is important to keep the loading of widgets on the dashboard as smooth as possible. To achieve this, native apps support displaying custom loading skeletons.

A single shared loading skeleton is used by both the web app and the native app. It is implemented and maintained exclusively on the MWA side. The native app simply accesses the skeleton file and displays it, provided it is available, until a command to hide it is invoked.

[Here is example of skeleton html for custom widget.](https://github.com/egym/mwa-reference/blob/0d1b5b0b396b8ce82787d9e78b7f3856bad9e435/public/widgets-skeletons/workouts/latest-activity-widget.html)

It is IMPORTANT to place this file in the assets folder under a specific directory. The path to the HTML file should follow this format: `/widgets-skeletons/<the route to the page where the widget is placed>.html`

For example, in the mwa-reference project, the skeleton is saved under `/widgets-skeletons/workouts/latest-activity-widget.html`. The route URL for the widget’s page is `/workouts/latest-activity-widget`, as you can see, it matches the path in the assets folder.

The resulting html file should appear in your build under specific folder:

img
The native app will check the web app’s assets in the /widgets-skeletons folder and look for a file that matches the startingRoute configured for the feature.

### 1.2. Trigger skeleton hide event

If the corresponding html file exists web build, the skeleton is displayed automatically when the widget begins loading.

To hide the loading skeleton, MWA must notify the native app that the data loading from the backend API is complete. This is achieved using the `contentLoadingDidFinish` command.

[See here how it can be done from the source code.](https://github.com/egym/mwa-reference/blob/b4fe968ba3c763e6638077d4203f2fb13d12e36a/src/pages/LatestActivityWidgetPage/hooks/useLatestActivityWidgetPage.ts#L54)

## 2. Dynamic widget height

The native app does not know the height of the content inside the WebView, and it cannot be dynamically adjusted to fit the content’s height. That's why MWA has to tell the native app what should be the height of the respective widget on dashboard

### 2.1. Initial height for widget and skeleton

Default widget height set by the native app is 300px. You can change this default value for a corresponding widget by the specific startingRoute. The configuration is similar to sharing a skeleton html file.
Place `heights.json` file under `widgets-skeletons` folder inside public directory so it's available in the resulting build by the following path `/widgets-skeletons/heights.json`.
The json file has to have the following structure, where `<startingRoutePath>` is the starting route to your custom widget and number is the height of the widget in pixels.


```json
{
  "<startingRoutePath>": number
}
```

[Example of the heights.json file](https://github.com/egym/mwa-reference/blob/722c45ac443e9d0a847ce7b266bb1d53546d109d/public/widgets-skeletons/heights.json)

### 2.2. Dynamic widget height

Not all widgets may have a static height. It is possible that, depending on the API result, the height of the widget content may vary. That’s why there is a separate command to dynamically adjust the height: `contentLoadingDidFinish`.

[Here is an example of how to use this command.](https://github.com/egym/mwa-reference/blob/b4fe968ba3c763e6638077d4203f2fb13d12e36a/src/pages/LatestActivityWidgetPage/hooks/useLatestActivityWidgetPage.ts#L58)

## 3. Open fullscreen MWA feature from custom widget

Use `openFeature` event with specified startingRoute to open another page of the app but on the full screen.

## 4. Data refresh

### 4.1. Refresh data when returning back from fullscreen MWA to dashboard

### 4.2. Refresh data when returning back from background

## 5. Widget custom preferences

### 5.1. Custom title

### 5.2 Any other custom preferences as agreed with IMP

## 6. EGYM ID Linking from custom MWA widget