Personalize Editor Capabilities

The Personalize Editor allows you to tailor your application interface, elements, themes, and widgets to suit your business standards, workflows, and preferences.

You can use the Personalize Editor in step 2 of your Create Experience workflow. In this article, we will learn about the Personalize Editor features and capabilities in detail.

library_add_check

Prerequisites

  • Ensure that you've navigated to your MoEngage dashboard and initiated creating an Experience.
  • Ensure that you've entered your webpage address for personalization. To learn more, see Create Experience.

Personalize Editor Functions

Edit Element

The Edit element enables you to customize the appearance, background color, alignment, and CTA action of the selected elements or buttons.

edit element.png

Elements Buttons

You can edit the selected element in the following two sections:

  • Appearance
    • Text - Add relevant text on the selected element.
    • Type Settings - Customize the Font style, size, color, weight, and alignment of the text.
    • Background - You can make the following edits to the background of the selected element:
      • Change the background color.
      • Embed an image URL.
      • Upload a background image from your local storage.
    • Dimensions - Customize the Height, Width, and Border radius of the selected element in pixels or percentages.
    • Margin - Customize the Top, Bottom, Left, and Right margins for the selected element in pixels or percentages.
    • Padding - Customize the Top, Bottom, Left, and Right padding to generate space around the text, inside the borders of the selected element.
    Text settings appearance.png
  • Advanced

    You can also use custom scripts to edit the selected element.

    • CSS Classes - Enter the class name to apply the custom styles to the selected element.
    • Z index - Enter the Z index value to change how the selected element is displayed when it overlaps with other elements.
    text settings advanced.png

 

Personalization of Content

You can personalize the content using User Attributes, User Events, Product Sets, Content APIs and Content Blocks.

For more information, refer to

Do the following:

  1. In the editor, select the content block that you want to personalize.
  2. You can personalize your text by pressing @ anywhere within the text area as shown below. 
    WebP Personalize Content.gif
  3. Select either Data personalization or Content Block.
  4. Click the Data personalization tab and from the drop-down, select one of the following
    1. User Attributes
    2. Select one of the following as for alternate (Fallback) to the personalization:

      • No Fallback
        Choose the option for personalized content. The option results in no alternates when the personalization does not work.
      • Do not send Web Personalization
        Choose the option where if the personalization does not work, Personalized experiences are not delivered.
      • Replace Text
        Type or paste the text used when the personalization does not work.
    3. Product Sets
    4. Content API
      1. Modify the values of the parameters of the Content API.
    5. Content Block
      1. Select the content block to be inserted
      2. You can optionally choose to Insert only the content of the content block.
        info

        Information

        When the option is selected

        • Only the content is inserted
        • The content is disconnected from the content block
        • Any content update in the content block is not reflected in the inserted content.
  5. Click Done.

info

Note

Ensure that custom attributes do not have the same names as MoEngage's standard attributes. If a custom attribute and a standard attribute having the same name are used for personalization, it could result in incorrect personalization.

 

Edit HTML Code

The Edit HTML code enables you to edit the HTML code of the selected element for more advanced changes.

edit HTML code.gif

Add Widget

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.

Widget Library

Widget library allows you to save customized widgets so that they can be reused again later. 

Add widget to library

You can save a widget to the library when you add it to the webpage by selecting the option Add to widget library.  

Add widget to library.gif

To add any widget that is already a part of an experience, you simply have to edit the experience, select the widget and choose Add to widget library.

Reusing saved widgets from the library

Once a widget is part of the library, you can reuse it in any of the experiences that you have created.

Reusing widgets from Library.gif

Hide Element

When you hide an element on your web page, the element continues to remain in the DOM in its place with its visibility updated.

hide unhide.gif
Consider modifying the layout of your app's Recommendations section to use MoEngage's Product Grid. In such cases, you may wish to test the outcome by temporarily hiding the current layout and replacing it with MoEngage's Product grid before committing to the layout. This is where you can use the hide icon to hide any defined element in your application such as a section, text, image, or button.

Track Click

The Track click feature allows you to monitor the number of clicks on a certain element in your application.
Let's say your conversion goal is to get customers to buy a television using your app. So, you enable Track click on the selected product's Shop Now button to keep track of how many users clicked it.  Every click on the selected element will be tracked and reported in the Campaign Analytics of your MoEngage dashboard.

You can view the list of elements that have Track click enabled in the Goals dropdown and delete them if not required.

track clicks.gif

info

Info

You can track clicks on 10 elements in each variation.

Rearrange Element

The Personalize editor allows you to drag and drop the elements to the desired position on the application. For example, you may want to rearrange the elements on the top navigation bar.

rearrange element.gif

Follow the steps below to rearrange elements:

  1. Click the element that needs rearrangement.
  2. Select Rearrange Element from the Personalize editor.
  3. Drag and drop the element to the desired position on the application.
  4. Select Save changes to confirm the rearrangement or Discard changes if you're unsure.

Once you publish the Experience, the changes will be automatically reflected in the application for targeted visitors. Similarly, you can rearrange the elements in different sections of your application.

Delete Element

When you delete an element on your web page, the element is removed from the DOM.

delete section.gif

Additional Functionalities:

  • You can use the default auto property to define the selected element's size and position. In this case, the browser calculates the size and position of the element depending on the device in use.
    auto.png
  • You may also switch to mobile or tablet mode to edit the elements on your application, making your websites more responsive and dynamic across different platforms.
    mobile and tab.gif
  • The Interact mode interact mode.png allows you to close any pop-ups that block the page and to view all the changes that have been made to the webpage using the visual editor.
  • The Settings setting mode.png option allows you to select whether you want to keep the changes or the personalised experience for the current variantion across all devices or just the current device.
    settings.png
  • The Reset reset mode.png option enables you to delete all the changes done to the current variantion across all devices or a specific device.
    reset changes.png
  • While Reset enables you to delete all the changes done to the variation at once, Changes allows you to delete or edit the individual modifications done to each element in that variation.
    All the changes made to each element in the selected variation will be logged in the Changes dropdown. You can click the Changes dropdown and select delete to undo the modifications associated with that element. The GIF below shows an example of resetting the previously deleted Shop now button. As soon as you reset the change, the button reappears in its original position.undo.gif
    info

    Information

    Changes made to the prior session cannot be deleted.

  • Use Element ID

    An HTML element ID is a unique identifier used in website code to label a specific section or element on a web page. It helps to pinpoint and work with particular parts of a web page.
    Screenshot 2024-06-03 at 3.39.42 PM.png

    What is HTML selector path?
    An HTML selector path, or a CSS selector, is a way to identify and select specific elements within an HTML document to apply styles to them. This path can include elements, IDs, classes, and other attributes to pinpoint the exact element or group of elements you want to style. It defines a chain of elements to follow in the HTML document structure to reach the targeted element.
    Screenshot 2024-06-03 at 3.41.14 PM.png
    By default, MoEngage Personalize editor Is configured to identify elements using IDs. If IDs are not present or specified, MoEngage uses the HTML selector path for the element.

    Webpages with elements having dynamic IDs

    • A webpage can have elements with dynamic IDs. Dynamic IDs are IDs that change every time the page loads or as a result of user interaction or a script running on the page.
    • For CSS styling and JavaScript manipulation, dynamic IDs can be challenging to work with because the identifiers are not consistent.

    In such cases, it is advised to disable the Element ID selector on the MoEngage editor and work with the HTML selector path of the element.

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

How can we improve this article?