--- title: "Create Bottom Sheet" slug: "create-bottom-sheet" updated: 2026-08-06T15:35:43Z published: 2026-08-06T15:35:43Z canonical: "support.whatfix.com/create-bottom-sheet" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Create Bottom Sheet A Bottom Sheet is a Popup widget that covers the bottom part of the screen in an app. It works as a Full Screen, but does not block the entire screen. It can be used to grab user attention for things such as application updates, new offers, and more. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Bottom%20sheet%20mobile%20example.gif?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) Create and configure your Bottom Sheets using the following steps: - [Step 1: Create a Bottom Sheet project](/mobile/docs/create-bottom-sheet#create-bottomsheet) - [Step 2: Capture your Mobile app screens](/mobile/docs/create-bottom-sheet#connect-capture) - [Step 3: Identify the screen](/mobile/docs/create-bottom-sheet#identify-screen) - [Step 4: Design the Bottom Sheet](/mobile/docs/create-bottom-sheet#design-bottomsheet) ## Step 1: Create a Bottom Sheet project 1. On the Whatfix Mobile Dashboard, click the app in which you want to create your project. ![Mobile_Db_Select_App.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_Db_Select_App.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 2. To create a new project, click **+ New**. ![Mobile_new_Project.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_new_Project.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 1. Under the **In-app messages** section, click **Bottom Sheet**. ![2023-03-16_16-51-42.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2023-03-16_16-51-42.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 1. Enter a name for your project. ![Mobile_New_Project_Name.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_New_Project_Name.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 2. Enter the **App Version** or select the **App Version** using the dropdown. ![Mobile_app_version.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_app_version.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) Info: - Use the latest version of your app to create Whatfix Mobile content. For more information on app version, see [What is an App Version?](/mobile/docs/app-version) - Ensure that you add the correct app version from the app build that was integrated with the Whatfix Mobile SDK. 3. Click **Create**. ![Mobile_Click_Create.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_Click_Create.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 1. Your Bottom Sheet project gets created, and you are redirected to the Whatfix Mobile Studio. ![bottomsheetstudio.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/bottomsheetstudio%281%29.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) --- ## Step 2: Capture your Mobile app screens Capture screens as a one-time step using the Whatfix Creator widget. The widget enables you to capture app screens as screenshots and saves them to your Whatfix Mobile Dashboard to create in-app guidance content. It also enables you to preview your projects and test them before publishing. For more information on how to capture and add app screens, see [Capture Mobile app screens](/mobile/docs/capture-your-app-screen-using-new-screen-capture-experience). Use the following steps to add a screen: 1. On the **Identify Screen** window, click **+ Add screen**. ![new_add_screen.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/new_add_screen.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 2. Select the screen where you want to create the content and click **Add Screen**. ![select_screen_add_screen.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/select_screen_add_screen.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) ## Step 3: Identify the screen After capturing the screen, you need to identify the unique elements on the screen and tag the screen so that the in-app experience you create appears on the right page. 1. To identify the unique elements on the screen and to tag the right screen, click **+ Add Identifier**. ![Mobile_Add_Identifier.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_Add_Identifier.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 2. Click the desired element on the page. ![Mobile_identifier_Home.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_identifier_Home.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) Example: If you want to show a Bottom Sheet on the Home screen, choose the title Home, which can uniquely identify the screen and show the Bottom Sheet on the correct screen.          Info           Click **Add More** to select more elements on the page and then repeat step 2. ![add_more_identifier](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/add_more_identifier.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) ## Step 4: Design the Bottom Sheet Choose a template for your Bottom Sheet and then design the Bottom Sheet as per your requirement. Use the following steps to design your Bottom Sheet: 1. On the Whatfix Mobile Studio, in the navigation panel, select **Design**. ![element_design ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/element_design%20.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 2. Choose a template for your Bottom Sheet. ![template_bottomsheet](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/template_bottomsheet.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 3. The Bottom Sheet appears at the bottom of your screen. ![bottom_sheet_appears](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/bottom_sheet_appears.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 4. To add or generate the audio for the in-app experience in the language of your choice, go to the **LANGUAGE SUPPORT** section, and then select the language using the dropdown. ![languagehighlight.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/languagehighlight.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D) 5. Configure **AUTO DISMISS** if you want to dismiss an element automatically after an interval. Also configure the **TRIGGER EVENT** and **ELEMENT TERMINATION** events. ![autodismiss.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/autodismiss.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A19%3A12Z&se=2026-10-29T14%3A19%3A12Z&sr=c&sp=r&sig=49rCD2x6cUV8GBgxd8JxO9X7Joab%2FP92uds7vP9Hv10%3D)          Info           For more information on element trigger and termination conditions, see - [How to trigger an element to appear on the app screen?](/mobile/docs/how-to-trigger-an-element) - [How to terminate an element from appearing on the app screen?](/mobile/docs/how-to-make-an-element-stop-appearing-on-the-app-screen) The Bottom Sheet you create is automatically saved.          Note           - To configure and customize the Body, Media, Buttons and more on your Bottom Sheet, see [Customize Bottom Sheet](/mobile/docs/customize-bottom-sheet). - [Preview projects on a device](/mobile/docs/preview-projects-on-a-device) before making it live for your end users. - After creating and designing your Project, click **Publish** to make it live for your end users. For more information on publishing Whatfix Mobile content, see [Publish Whatfix Mobile content](/mobile/docs/publish-whatfix-content).