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
|
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.
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.
Edit HTML Code
The Edit HTML code enables you to edit the HTML code of the selected element for more advanced changes.
Add Widget
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:
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.
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.
| 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.
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.
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.