After successfully logging in, the user can navigate to the App Banners module from the left-side navigation panel. Follow the steps below to create a Modal using the Template method.

Steps to Create a Modal

Step 1: Open App Banners Module
Click App Banners from the left-side navigation panel.

Step 2: Create a New App Banner
Click the Create App Banner button. The App Banner Details form will appear on the screen.

Step 3:Fill App Banner Details and Select Modal Type

Step 4: Select Template Method
Select theTemplatemethod.

Once the Template method is selected, the user is redirected to theVisual Editor, where the selected modal template can be customized by editing the available design blocks.

Screen: App Banner Method

Step 5: Edit the selected Template

Hover the cursor on canvas on selected template area and Select the required block or edit the existing blocks,content of the selected template.

Step 6: Save Changes
Click theSave Changesbutton to save the modal.

Step 7: Preview Modal
ClickPreviewto view the modal before publishing.

Step 8: Publish Modal
ClickPublish.

Step 9: Review Publish Details

APublishpopup appears displaying the app banner details. Review the publish settings such asStart Date,End Date,Run Forever, andShow Only Once. Update the settings as required before publishing.

Step 10: Publish the App Banner

Click the Publish button to make the app banner live.

Create a Modal – By Scratch Method

A Modal is a popup window displayed on top of the webpage content with a dimmed background. It is commonly used for forms, login/signup, offers, alerts, announcements, and user actions.

After successfully logging in, navigate to the App Banners module from the left-side navigation panel and follow the steps below.

Step 1: Open the App Banners Module

Click App Banners from the left-side navigation panel.

Step 2: Create a New App Banner

Click the Create App Banner button. The App Banner Details form appears.

Enter the required details such asName,Device,Language, and selectModalas theApp Banner Type.

and continue to the Next Step

Click the Next button.

Screen – Create App Banner

Select the Start from Scratch method.

The Visual Editor opens with a blank canvas to create the modal from scratch.

Step 5: Open the Design Block Panel

Click the Plus (+) button on the canvas or the Layout tab to open the Design Block Panel.

Screen – Open Design Block Panel

Step 6: Add Design Blocks and Modal Content

Add the text, images, styling, and other properties by selecting the required design block, such as Heading,Text,Image,Button (CTA), or any other available element to build the modal.

Screen – Add Modal Design Blocks

Step 7: Save the Modal

Click Save Changes to save the modal.

Step 8: Preview the Modal

Click Preview to review the modal before publishing.

Step 9: Publish the Modal

Click Publish. A popup appears to enable or disable the App Banner.

A Publish popup appears displaying the app banner details. Review the publish settings such as Start Date, End Date, Run Forever, and Show Only Once. Update the settings as required before publishing.

Step 10: Publish the App Banner

Click the Publish button to make the app banner live.

After saving or publishing, the Modal App Banner appears on the App Banner Dashboard. Once integrated with the web application, users can view the modal on the website.