The Add widget feature enables you to add MoEngage widgets like Images, custom script, and Product grid to your application.
Follow the steps below to insert an image:
- Click the Image tab.
- You are prompted to select a location to define whether the grid should be added before or after the selected element.
-
Customize the inserted image in the following three sections:
-
Appearance
- Embed an image URL or Upload an image from your local storage.
- Dimensions - Customize the Height, Width, and Border radius of the image in pixels or percentages.
- Margin - Customize the Top, Bottom, Left, and Right margins for the image in pixels or percentages.
- Padding - Customize the Top, Bottom, Left, and Right padding to generate space around the image, and inside the borders of the selected element
arrow_drop_down Add image for another Device resolution(Optional)You can upload the same image and define it's width or pixel density that fits the resolution of another device.
info Info
The valid input format for an image is 1024(width) or 2(pixels).
-
Redirection
- Enter webpage URL - Enter a URL that redirects the users to the relevant page when they click the image.
-
Advanced
You can also use custom scripts to customize the inserted image.
- CSS Classes - Enter the class name to apply the custom styles to the image.
- Z index - Enter the Z index value to change how the image is displayed when it overlaps with other elements.
-
Appearance
- Click Save.
Follow the steps below to insert HTML/Javascript code:
- Click the Insert HTML/Javascript tab.
- You are prompted to select a location to define whether the grid should be added before or after the selected element.
- Select the Element Type and then click Next.
- Enter the relevant code in the editor and then click Save.
Follow the steps below to insert MoEngage's Product grid:
- Click the Product grid tab, which will have the recommended items.
- You are prompted to select a location to define whether the grid should be added before or after the selected element.
- Click Next.
The Edit Item Grid pop-up window is displayed where you can define the following:- How the grid should appear (in terms of the design elements, position, layout).
- All the placeholders to be shown in the grid.
- Mapping information to the concerned placeholders.
- In the Grid Appearance step, select the Cards layout in the grid, define the title, sub-title, and CTAs on the Grid by customizing the concerned dropdown options.
- In the Edit Card step, define how each Card in the grid will look like by customizing the following:
- Title - The header or name of the Card.
- Sub title - A brief description on the Card.
- Image - The image of the product displayed on the Card.
- Label - A maximum of two labels can be added on a Card that give users essential details such as promotions, instructions, warnings, and branding elements. You can customize the look and feel of the labels either manually or by using custom scripts.
- Price - You can specify two Price values and a discount value for the selected product.
- Rating - You can add the selected product's rating, which specifies its quality and customize it's look and feel either manually or by using custom scripts.
- Review - You can add the review details that reflect the reviewer's experience with the product or service.
-
CTA - You can add a maximum of two CTA buttons on a Card and customize their look and feel either manually or by using custom scripts.
- In the Choose Recommendation step, enter the following details:
- Edit your grid name/title if necessary.
Grid Name is displayed on the Experience Analytics page of the MoEngage dashboard to show user interactions statistics.
Grid Title is visible on your website to all eligible visitors. - Select your Recommendation from the dropdown.
Ensure to create Recommendations beforehand to include them in the grid. To learn more, see Create User Action Recommendations. - Enter all the necessary Card details for the options that you enabled in the Edit Card step.
- Edit your grid name/title if necessary.
- Click Save.
Use Case:
Follow the steps below to insert a Countdown Timer:
- Select the Timer widget from the list of Standard Widgets
- You are prompted to select a location to define whether the grid should be added before or after the selected element.
- Click Next.
The Timer settings are displayed where you can:- Choose the timer layout (in terms of the design elements, position, layout).
- Customize the timer appearance & content.
- Set the end date for the timer.
- Select the layout, define the title, sub-title, and background image/color on the timer by customizing the concerned options.
- Under Settings, you can set the following:
-
Expiry - Set the expiry date and time for the timer. Once expired, the timer wont be shown on the webpage
- You can choose a different timezone in case you are personalizing the experience for users who are in a different geographical location
- Separator - Choose among different separator options to be displayed between the countdown timer.
-
Redirection URL - Optionally, you can choose to redirect users to a specific webpage if they choose to click on the timer.
-
Expiry - Set the expiry date and time for the timer. Once expired, the timer wont be shown on the webpage
- Click Save.