--- title: "Footer Module" slug: "footer-module" updated: 2025-09-26T02:34:44Z published: 2025-09-26T02:34:44Z canonical: "docs.unqork.io/footer-module" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Footer Module UDesignerClassic Designer ## Overview A **footer** **module** displays at the bottom of an application in Express View. In a footer module, you might display a logo, contact information, social media links, a sitemap, or insert a CTA. Footers exist in a separate [module](/v1/docs/introduction-to-the-module-builder), which you connect to your [application](/v1/docs/introduction-to-unqork-applications) in the [App Details](/v1/docs/introduction-to-unqork-applications) settings. > [!WARNING] > Footer module RBAC is defined by the [RBAC](/v1/docs/introduction-to-express-role-based-access-control-rbac) of the embedded components. ### Creating a Footer Module You'll need to create a footer module before connecting it to your application. The best way to achieve this task is to add your footer module to the Library. After adding your module to the Library, you can share it with all other applications in your environment. > [!WARNING] > If you plan to create a footer, be mindful when naming components. Both the header and footer modules cannot have components with the same Property ID. Otherwise, neither display in Express View. It's a best practice to differentiate components with a descriptive name—for example, `dwFooterOutput`. 1. At the top right of the Unqork Designer Platform, click the **Librar****y** drop-down. 2. Select **Library Elements**. 3. Click **+ Create New**. 4. In the **Module** **Name** field, enter a name for your footer module. > [!WARNING] > To make it easier to locate your footer later, begin your module name with **Footer**. For example, **Footer: Acme Corp**. 5. Click **Create**. From here, open the module and customize your footer. Here are the following supported components: - [**Primary Fields**](/v1/docs/primary-fields): All components. - [**Secondary Fields**](/v1/docs/secondary-fields): [**Button**](/v1/docs/button-component) and [**Hidden**](/v1/docs/hidden-component) components. - [**Display & Layout**](/v1/docs/display-layout): [**Columns**](/v1/docs/columns-component), [**Field Group**](/v1/docs/field-group-component), [**HTML Element**](/v1/docs/html-element-component), and [**Panel**](/v1/docs/panel-component) components. - [**Data & Event Processing**](/v1/docs/data-event-processing): [**Data Workflow**](/v1/docs/data-workflow-component), [**Decisions**](/v1/docs/decisions-component), [**Initializer**](/v1/docs/initializer-component), and [Plug-In](/v1/docs/plug-in-component) components. ### Connecting a Footer Module to an Application Now that you have a footer, connect it to your application. To connect a footer module to your application: 1. Navigate to your workspace and locate your application tile. 2. Click the ![Inline image of an ellipsis icon.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(ellipsis)** button. 3. Select **![Settings Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) Settings**. 4. From the **Footer** **Module** drop-down, enter or select a footer module. [![A static image displaying the App Details modal, the Header Module drop-down is selected, and an existing header module is highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Footer_module_connectExisting_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Footer%20module%20connectExisting.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) 5. Click **Save**. ### Previewing a Footer Module It's important to note that all modules you plan to have navigate to using your footer module must exist in the same application. Otherwise, you'll receive a 403 error. The following image shows you how to preview a module at the Application level: [![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/App_Preview_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/App%20Preview.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) To successfully preview your footer module, you must preview it at the Application level. Otherwise, you must manipulate the browser URL to consider any redirects. The URL looks like the following:` https://www.{your-environment}.io/app/{appPath}#/display/{moduleId}/{submissionId}/{moduleId}`. ### Disconnecting a Footer Module If you decide you do not want a footer in your application anymore, you can remove it. To remove a footer module from an application: 1. Navigate to your workspace and locate your application. 2. Click the ![Inline image of an ellipsis icon.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(ellipsis)** button. 3. Select **![Settings Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) Settings**. 4. From the **Footer** **Module** drop-down, click the **X** next to the Footer Module’s name. [![A static image displaying the App Details modal. The Header Module field displays a X button to disconnect an existing header module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Footer_module_disconnect_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Footer%20module%20disconnect.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) 5. Click **Save**. ## Overview A **footer** **module** displays at the bottom of an application in Express View. In a footer module, you might display a logo, contact information, social media links, a sitemap, or insert a CTA. Footers exist in a separate [module](/v1/docs/introduction-to-the-module-builder), which you connect to your [application](/v1/docs/introduction-to-unqork-applications) in the [App Details](/v1/docs/introduction-to-unqork-applications) settings. > [!WARNING] > Footer module RBAC is defined by the [RBAC](/v1/docs/introduction-to-express-role-based-access-control-rbac) of the embedded components. ### Creating a Footer Module Footers are FE front-end modules assigned to the **Footer** **Module** drop-down in Application settings. To create and assign a footer module at the Application level: 1. Navigate to your application. 2. Click **+ Create New**. 3. Select **Module**. 4. In the **Module** **Name** field, enter a name for your footer module. The **Module****-Path** field autopopulates. > [!TIP] > To make it easier to locate your footer later, begin your module name with **Footer**. For example, **Footer: Acme Corp**. 5. From the **Module** **Type** drop-down select **Front-End**. > [!WARNING] > Footer Modules are a [front-end element](/v1/docs/what-is-a-module), an application might experience unintended consequences when the Module Type is API or Other. [![A static image displaying the Create Module modal with the Module Name, Path, and Type fields populated.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/footerModule_Create_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/footerModule%20Create.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) 6. Click **Create**. From here, open the module and customize your footer. Here are the following supported components: - [**Primary Fields**](/v1/docs/primary-fields): All components. - [**Secondary Fields**](/v1/docs/secondary-fields): [**Button**](/v1/docs/button-component) and [**Hidden**](/v1/docs/hidden-component) components. - [**Display & Layout**](/v1/docs/display-layout): [**Columns**](/v1/docs/columns-component), [**Field Group**](/v1/docs/field-group-component), [**HTML Element**](/v1/docs/html-element-component), and [**Panel**](/v1/docs/panel-component) components. - [**Data & Event Processing**](/v1/docs/data-event-processing): [**Data Workflow**](/v1/docs/data-workflow-component), [**Decisions**](/v1/docs/decisions-component), [**Initializer**](/v1/docs/initializer-component), and [Plug-In](/v1/docs/plug-in-component) components. > [!WARNING] > Avoid naming components with common values. Header and footer modules cannot have components with the same Property ID. Otherwise, neither display in Express View. It's a best practice to differentiate components with a descriptive name—for example, dwFooterOutput. ### Connecting a Footer Module to an Application Now that you have a footer module, connect it to your application. To connect a footer at the Application level: 1. Navigate to the application that contains your footer module. 2. At the top of the page, click ![Inline image of an ellipsis icon.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(ellipsis)**. 3. Select **Settings**. 4. From the **Footer** **Module** drop-down, enter or select the footer module. [![A static image displaying the App Details modal, the Footer Module drop-down is selected, and an existing footer module is highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/footerModule_Connect_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/footerModule%20Connect.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) 5. Click **Save & Close**. ### Previewing a Footer Module It's important to note that all modules you plan to have navigate to using your footer module must exist in the same application. Otherwise, you'll receive a [403 error](/v1/docs/http-status-codes). To preview the footer module at the Application level: 1. Navigate to the application that contains your footer module. 2. At the top of the page, click ![Inline image of an ellipsis icon.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(ellipsis)**. 3. Select **Preview**. The application displays on a new page with the footer module present at the bottom. [![A static image displaying the Application page, the options button and Preview buttons are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule_preview_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule%20preview.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) To successfully preview your footer module, you must preview it at the Application level. Otherwise, you must manipulate the browser URL to consider any redirects. The URL looks like the following:` https://www.{your-environment}.io/app/{appPath}#/display/{{moduleId}}/{{submissionId}}/{{moduleId}}`. ### Disconnecting a Footer Module If you decide you do not want a footer in your application anymore, you can remove it. To disconnect a footer at the Application level: 1. Navigate to the application that contains your footer module. 2. At the top of the page, click ![Inline image of an ellipsis icon.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(ellipsis)**. 3. Select **Settings**. 4. From the **Footer** **Module** drop-down, click the **X** next to the Footer Module’s name. [![A static image displaying the App Details modal. The Footer Module field displays a X button to disconnect an existing footer module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/footerModule_disconnect_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/footerModule%20disconnect.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) 5. Click **Save & Close**. > [!NOTE] > Disconnecting a footer module does not delete it. ## ## Resources - [Learn about Login modules](/v1/docs/login-module). - [Learn about Logout modules](/v1/docs/logout-module). - [Implement Header modules](/v1/docs/header-module). Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. Call To Action (CTA) is a piece of content designed to persuade an end-user to perform a specific act. An example of a common CTA is a "Buy Now" button. RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network.