Nudge Design Customizations

This guide will help you understand what options are available to customize the nudges and how to go about it.

When you are setting up the nudges, you will have the option to customize the look and feel as well as the content of the selected nudge in the step of the nudge setup. Here, you will have one or more below editors depending on which nudge you would select from the nudge gallery.

Common Nudge Properties

Below options are available in the general nudge properties section.

Nudge Target - This option will help you position your nudge on a given screen.
- For nudges like tooltips, beacons, spotlights, Tags and FOMO tags - you can use this option to precisely place the nudge with respect to a given screen element.
- For the rest of the nudges like feedback, announcements, alerts - you can set nudges to display on pre-defined positions on the screen area.
Position - This is a special option available for tooltips and FOMO tags where you can set the nudge to appear on a defined anchor position. E.g. Tooltip should always show on top of the selected element when there is enough width available. Please note that this is available only for Android Product Experience SDK v
Width - This option lets you configure the width of the given nudge with respect to the screen width.
Background - This configuration has the following three options :
- Solid Color - To set the solid color as the background of the nudge, select the desired color from the color picker or enter the HEX/RGB value in the input box.
- Gradient - Using this option, you can set a gradient as the background. Select two colors, define individual opacity and direction of the gradient style and click on apply button to save the changes.
- Image - Using this option you can set an image as the background. We accept .JPEG, .JPG and .PNG file formats.

Add Solid Colour, Gradient, or Image as a Nudge Background

Opacity - Here you can set the opacity value. Opacity is available only for the solid color. It is not available when you use gradient or image as the background.
Radius - Here you can set the corner radius for the nudge.
Border Size - Here you can set the border size of the nudge.
Border Color - Here you can set the color for the border of the nudge.
Let users interact with the app - As the name suggests, select this checkbox if you want to let users interact with the app when a nudge is being shown on the app screen.
Add Backdrop - Select this checkbox if you want to add a backdrop for your nudge.
- Fill Color - Set solid color as the fill color.
- Opacity - Using this option, you can set the opacity of the backdrop.
- Blur - Click on this option to enable the blur effect for the backdrop.
Dismiss Conditions - This configuration will let you decide how you want users to dismiss the nudge.
- Add Close button - Selecting this will add the close button and open up the close button editor to further configure the close button format.
- Close automatically after 5 seconds
- Close the nudge when user clicks anywhere outside the nudge

Below is the special configuration available for the tooltip having the image on the side. This will help you define how much width the image should take upon the given tooltip width.

📘
Important Note

Features such as gradient as the background, image as the background and blur backdrop are supported in iOS CE Nudges SDK v8.5.9 & Android CE Nudges SDK v.8.6.7 onwards.

Option to set a position for tooltip nudges is available in Android CE Nudges SDK 8.6.3 onwards.

Option to set configurable width for the image in 'tooltip with image on side' is available from Android CE Nudges SDK 8.6.8 onwards.

Text editor

Below are the text editors available for the title text and the body text.

Title Text Editor
Brief summary of the options available is given below:

Title Text - Input your textual content here.
Font - Here you select the font name from the available list of fonts.
Font size - Here you select the font size from a minimum of 6 to a maximum of 36 font size.
Bold, Italics, Underline, Color - Use these options to format your text as bold, italics, underline and add text color.
Insert user data button - Use this option if you want to insert the personalized value of user attribute or events properties data in the textual content.
Text alignment - Using this option you can align text on the left, right or center of the text container.

📘
Text alignment option is currently supported only in Android CE Nudges SDK v.8.6.8 onwards.

Body Text Editor
Brief summary of the options available is given below:

Body Text - Input your textual content here.
Font - Here you select the font name from the available list of fonts.
Font Size - Here you select the font size from a minimum of 6 to a maximum of 36 font size.
Bold, Italics, Underline, Color - Use these options to format your text as bold, italics, underline and add text color.
Insert user data button - Use this option if you want to insert the personalized value of user attribute or events properties data in the textual content.
Text alignment - Using this option you can align text on the left, right or center of the text container.