# Integrate External Web Application/UI With DIGIT UI

## Overview

This document provides the steps on how to integrate another UI into the DIGIT UI using iframe.

## **Steps**

1. Enable the [Utilities](https://www.npmjs.com/package/@egovernments/digit-ui-module-utilities/v/0.0.6) module.
   * [x] [Add these MDMS](https://core.digit.org/guides/developer-guide/ui-developer-guide/citizen-module-setup/install-dependency#add-mdms-master-data-management-service-configuration) configurations to enable the Utilities module.
   * [x] Add the [mentioned change](https://core.digit.org/guides/developer-guide/ui-developer-guide/citizen-module-setup/write-citizen-module-code#enable-module-in-the-ui-framework)s in your web/src/App.js and web/package.json to enable the module in the Build.
2. Once the Utilities module is enabled, add the following changes to the master (file path given below).

[Reference](https://github.com/egovernments/works-mdms-data/blob/DEV/data/pg/common-masters/uiCommonConstants.json) Master details: data/pg/commonmasters/uiCommonConstants.json

```
  "uiCommonConstants": [
      {
         "shg": {
            "iframe-routes": {
               "home": {
                  "routePath": "/works-shg-app/",
                  "isOrigin": true
               }
            }
         }
      }
   ]
```

Here -

* **shg** is the path name to access inside digit-ui;
* **home** is the route to access it;
* whatever is mentioned inside **routePath** should be the Application/Pod name that is expected to be shown inside the digit-ui;

3. Once the MDMS changes are applied, access the new application using the following route - `<SERVER_URL>/digit-ui/employee/utilities/iframe/<PATH_NAME>/<ROUTE_NAME>`

**Examples: New Web Application (UI - any framework)**

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2Fgit-blob-ffd899d0840ec6ba77b42550dfc9601c18604f53%2FScreenshot%202023-07-25%20at%2010.55.25%20AM.png?alt=media" alt=""><figcaption><p>shg app built through flutter</p></figcaption></figure>

**DIGIT UI**

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2Fgit-blob-3dbcd2451e7ff3780ffc3256e47aa4578d7a2d93%2FScreenshot%202023-07-25%20at%2010.54.28%20AM.png?alt=media" alt=""><figcaption><p>integrated the other app through iframe</p></figcaption></figure>


---

# 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.digit.org/platform/guides/developer-guide/ui-developer-guide/customisation/integrate-external-web-application-ui-with-digit-ui.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.