Adding Widgets

The Add widget feature enables you to add MoEngage widgets like Images, custom script, and Product grid to your application.

add widget.png

Image HTML/JavaScript Product grid Countdown Timer

Follow the steps below to insert an image:

  1. Click the Image tab.
    widget image.png
  2. You are prompted to select a location to define whether the grid should be added before or after the selected element.
    before after dropdown.gif
  3. 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
      image settings.png
      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.
      image widget another resolution.gif

      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.
      imahge redirection.png
    • 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.
      •  
      image advanced.png
  4. Click Save.

Was this article helpful?
0 out of 0 found this helpful

How can we improve this article?