> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# HTML Nudge Templates
> Use HTML nudge templates in MoEngage to show non-intrusive in-app messages at the top or bottom of the screen without blocking user interactions.
Nudges are non-intrusive templates embedded within the app at the top or bottom or appearing on the screen. Unlike pop-ups, they allow your users to continue interacting with the app. You can use these templates to alert users about new information, sale days, and similar updates.
The In-app HTML editor offers customizing [pre-built nudge templates](#h_01JM9AFRX8GZ7VS4X08G5WRBEB) and [creating nudge templates](#h_01JJBQ5BEWN6C6WP3HXTJ1EBT1) from scratch.
HTML nudge templates are supported for the following SDKs:
* In-App Android SDK version 8.8.0 or later
* In-App iOS SDK version 6.00.3 or later
# Pre-Built Nudge Templates
Perform the following steps to find and use the pre-built HTML nudge templates:
1. In the **Content** section of the campaign creation page, select the filters shown below to find the pre-built HTML nudge templates. 
MoEngage provides the following pre-built HTML nudge templates to help you get started:
* [Nudge - Emoji rating](#h_01JMEGTVFY4EZCCD0K4TDRKAJ6)
* [Nudge - Notification with two buttons](#h_01JMEXQASKKV1YE4EBRZ3A6HDE)
* [Nudge - Feature announcement](#h_01JMEZ8Y8954AVSF53EHYDFZJT)
* [Nudge - Countdown timer](#h_01JMF0B4GK74C2Q8KG8VF6K0WY) 
2. Hover over a desired template and click **Select Template**. The HTML code of the template is populated in the **Code View** section, where you can edit the template's elements. 
## Nudge - Emoji Rating
You can use this template to collect feedback from your users. By default, it has emojis for rating and a button to submit feedback.
You can make the following changes to the elements in the **Code View** of the HTML template:
* **Change color**: You can specify custom color codes for various elements. Scroll to lines **159** and **170** of the HTML code and replace them with the color codes of your liking, as shown below, to modify the background color of the nudge container and the submit button, respectively. 
* **Change emojis**: You can change the emojis and their feedback message by modifying the values under `const emojiData` on line **177**. 
* **Track data**: Clicks and data tracking have been added by default to the template. If you add more buttons, make sure to add click tracking. For more information about tracking, refer [here](/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps). 
## Nudge - Notification with Two Buttons
You can use this template to nudge users about a new offer. By default, the template contains a text body and two buttons.
You can make the following changes to the elements in the **Code View** of the HTML template:
* **Change color**: You can specify custom color codes for various elements. Scroll to line **172** of the HTML code and replace the color codes in the highlighted places below to modify the colors of the elements. 
* **Edit links**: On line **201**, you can modify the link assigned to the **BUY MEMBERSHIP NOW** button, which redirects the user to a custom URL. 
## Nudge - Feature Announcement
You can use this nudge template to spotlight a new feature on your app. By default, this template contains a text body and a button.
You can make the following changes to the elements in the **Code View** of the HTML template:
* **Change color**: You can specify custom color codes for various elements. Replace a color code, as shown below, to modify the colors of the elements.
* **Change text**: You can also edit the text body on line **163** based on your needs. 
* **Adjust**: You can adjust the nudge size based on the content of the nudge, as shown below. 
## Nudge - Countdown Timer
You can use this nudge template to create a sense of urgency among your users for sale days. By default, this template contains a countdown timer with text.
You can make the following changes to the elements in the **Code View** of the HTML template:
* **Change color**: You can specify custom color codes for various elements. Scroll to line **93** of the HTML code and replace color codes in the highlighted places below to modify the colors of the elements. 
* **Modify timer**: You can modify the timer on line **108** based on your needs, as shown below. 
# Create Nudge Template
Perform the following steps to create a nudge template:
1. On the **Content** section of the campaign creation page, click the **Start from scratch** tab. 
You can create a template using the following options:
* [Custom HTML upload](#h_01JJBQHFZFB4A7WA027EY33MGK)
* [Zip upload](#h_01JJBQHZTJDT1KP9TZF3MFS2Q3)
2. Hover over **Custom HTML upload** or **Zip upload** and click **Create nudge**, as shown below.
## Custom HTML Upload
Follow the steps outlined to create a nudge using custom HTML:
1. Hover over **Custom HTML Upload** and click **Create nudge**. You will be redirected to the **Code View** editor section.
2. Use your custom HTML code in the **Code View** section and upload assets as needed.
## Zip upload
Using this method, you can upload your HTML and assets together as a single ZIP file.
Ensure to follow the guidelines mentioned below before uploading your file:
* Ensure that your .zip file is less than 5MB.
* Files inside the Zipx should not contain \*, /, `\`, &, \~, \"e; in their names.
* All images should be in JPG, JPEG, PNG, or SVG formats.
* You cannot upload GIF files, but you can add them to the template via URLs.
* The relative path specified for images should match the zip folder structure, including case sensitivity.
Perform the following steps to create a nudge using Zip upload:
1. Hover over **Zip Upload** and click **Create nudge.** The **Zip template** dialog box appears.
2. Drag and drop your ZIP file or upload it from your computer and click **Done**.
# Customize the Nudge Template
Once you have uploaded your HTML code or the zip file, you can customize your nudge template for orientation, position, device types, and more. To customize, click **Template Settings**.
You can perform the following actions in the **Template Settings** section:
* **Change orientation**: In the **Allowed Device Orientation** section, you can adjust the orientation type of the nudge.
* **Select device types**: In the **Allowed device types** section, you can select the required device type.
* **Adjust placement and proportions**: In the **Placement and Proportions** section:
* You can change the nudge placement to be on the **Bottom** or **Top**. 
* You can adjust the **Nudge height** and **Nudge width** to your liking. 
* You can change the position of your nudge under **Margin**. 
For information on testing and previewing the template, refer to [HTML In-app Templates](/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates).