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

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.

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.

You can edit the selected button in the following three sections:

Appearance

Text - Add a relevant button label.
Type Settings - Customize the Font style, size, color, weight, and alignment of the button label.
Background - You can make the following edits to the button background:
- Change the background color.
- Embed a URL to the button label that redirects the user to the relevant webpage.
- Upload a background button image from your local storage.
Dimensions - Customize the Height, Width, and Border radius of the button in pixels or percentages.
Margin - Customize the Top, Bottom, Left, and Right margins for the button in pixels or percentages.
Padding - Customize the Top, Bottom, Left, and Right padding to generate space around the label, and inside the borders of the button.

Redirection
Enter webpage URL - Enter a URL that redirects the users to the relevant page when they click the button.

Advanced

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

CSS Classes - Enter the class name to apply the custom styles to the button.
Z index - Enter the Z index value to change how the selected button is displayed when it overlaps with other elements.

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:

In the editor, select the content block that you want to personalize.
You can personalize your text by pressing @ anywhere within the text area as shown below.
Select either Data personalization or Content Block.

Click the Data personalization tab and from the drop-down, select one of the following

User Attributes
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.
Product Sets
Content API
1. Modify the values of the parameters of the Content API.

Content Block

Select the content block to be inserted

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.

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

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.
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.

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 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.
Click Save.

Use Case:
- How to Recommend Personalized Products using Product Grids

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:
1. 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
2. Separator - Choose among different separator options to be displayed between the countdown timer.
3. Redirection URL - Optionally, you can choose to redirect users to a specific webpage if they choose to click on the timer.
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:

Click the element that needs rearrangement.
Select Rearrange Element from the Personalize editor.
Drag and drop the element to the desired position on the application.
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.
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.
The Interact mode 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 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.
The Reset option enables you to delete all the changes done to the current variantion across all devices or a specific device.
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.

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.

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.

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.