Adding Widgets

The Add widget feature enables you to add MoEngage widgets like Images, custom scripts, and Product grids 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\

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. image widget another resolution.gif

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.

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 and 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 gives 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 interaction 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.
Click Save.
Use Case:

How to Recommend Personalized Products using Product Grids

Perform the following steps to insert a Carousel:

In the Standard Widgets tab, select Carousel.
Choose whether you want to add the Carousel Before or After the selected element.
Click Next.
In the Add Carousel page, you can view the following tabs:
Upload: This option allows you to upload images for your carousel.

Select the number of slides you want for the carousel in the Number of Slides field. Note that you can add up to 10 slides in a carousel. The slides are listed based on the number of slides you selected.
Click on any slide to add inputs, as explained below.
Input type: Select the input type for the images to be added to the carousel. The default input type is Images.
Input Source: Select the input source for your image. You can use the URL or Upload from your device option to insert the image.
Click + Add an image for another Device Resolution to configure the Input source image and Device Resolution of images to be added for other devices. You can repeat the same process to add resolution for multiple devices.
Enter the Redirect URL to add the URL to which you want your users to be redirected when they click the respective image in the carousel.
Perform the preceding steps for each slide added.\

Appearance: This option allows you to configure the appearance of your carousel.

Carousel Settings: This option allows you to configure the dimensions, border, padding, and margin of your carousel. You can choose to edit manually, use CSS, or both by selecting the provided option.
- Dimension: Customize the Height, Width, and Border of the image in pixels or percentages.
- Border: Customize the Style, Width and Colour of the border.
- 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.
Image Settings: This option allows you to configure Image Layouts such as Image type, Border and Padding for your carousel Image.
Carousel Dots: Turn the Carousel Dots toggle on to enable carousel dots and configure the Dimensions, Padding and Colour of your Carousel dots.
Carousel Arrows: Turn the Enable Carousal Arrows toggle on to add arrows to navigate your carousel and configure their Dimensions, Padding, Colour, and Icon Style for the arrows.

Advanced: This option allows you to configure advanced settings for your carousels, such as Autoscroll, Time on slide, and Autoplay behaviour.

If you want your carousel to scroll automatically, turn on the toggle to enable Autoscroll.
In the Time on each slide field, you can set the duration(in seconds) of the carousel for each slide.
If you want your carousel to play automatically, You can configure the Autoplay behaviour for your carousel by selecting one of the following options:
- Restart from slide 1: This option allows you to restart the auto-play from the first slide.
- Stop at the last slide: This option allows you to stop the auto-play at the last slide.
- Select the Add to widget library checkbox to reuse this widget later from the widget library. For more information, refer here.

Perform the following steps to insert a Tabbed Recommendation:

On the Standard Widgets tab, select the Tabbed Recommendations widget.
In the Location list, select whether the tabbed recommendation widget should be placed Before or After the selected element.
Click Next.
On the Edit Item Grid dialogue box, you can:
1. Configure the grid appearance (design elements, position, and layout).
2. Edit the card.
3. Choose recommendations.
In the Grid Appearance step, configure the following components:
- Grid Layout: Customize the appearance of the grid layout with the provided tools.
- Grid Title: Enter the title for your grid and configure it with the provided tools.
- Grid Sub Title: Enter the grid subtitle if required and configure its appearance.
- Tab Settings: From the tab settings, click + Add tabs to add multiple tabs. You can showcase different products in a grid under each tab based on user interest. You can configure the appearance of each tab in different states from the following settings:
- Default state font settings: In this setting, you can configure the font and appearance of the tab name to be displayed by default.
- Hover state font settings: In this setting, you can configure the font and appearance of the tab name to be displayed when a user hovers over the name.
- Selected state font settings: In this setting, you can configure the font and appearance of the tab name to be displayed when a user selects a tab.
- You can add a maximum of five tabs in a grid.
- You can have only one tabbed recommendation in a variation.
- Click Next.
In the Edit card step, define the appearance of the card by customizing the following:
- Title: Enter the header or name of the card.
- Subtitle: Enter a brief description of the card.
- Image: Add the product image to be displayed on the card.
- Label: You can add up to two labels to a card. These labels provide essential details such as promotions, instructions, warnings, and branding elements. You can customize the labels’ appearance manually or using custom scripts.
- Price: You can specify two Price values and a discount value for a selected product.
- Rating: You can add the selected product’s rating, which specifies its quality, and customize its appearance manually or 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 appearance manually or using custom scripts.
- Click Next.
In the Choose Recommendation step, perform the following steps:
- Edit the name of your grid if required.
- Select each tab you created and add a name. This title is visible on your website to all eligible visitors. Users can select different tabs you created to view different products that are recommended in their interest.
- Choose your recommendation from the dropdown. You must create recommendations beforehand to include them in the grid. For more information, refer here.
- Enter all the necessary card details for the options you enabled in the Edit card step.
Select the Add to widget library checkbox to reuse this widget. For more information, refer here.
Click Save.

Getting Started

Guide