Web Personalization Library

The Hushly platform provides various tools for creating personalized experiences on your landing pages. The Library is located on the Left Panel of the Variation Page Editor and consists of Basic Elements that can be added and customized to match your design needs.

1. In Variation Page Editor from the Left Nav Menu, click Library. 
2. The Library Editor Panel opens with the Basic Elements tab selected by default, showing all available Basic Elements along with the My Library tab.

   

Basic Elements

Select an element from the list, the Library Editor Panel closes and expands the Preview Panel. The selected element can be inserted Before, Inside (as the first & last child), and After the Parent Element.  The Red Line serves as a position indicator, showing where the element will be placed within the Tag.

• Note 1: When the user tries to edit the Parent Element which already has a personalized Child Element, the Content text box is automatically hidden and a error message is displayed as shown below. The user needs to first revert the changes made to the Child Element in order to make further changes to the Parent Element.
• Note 2:  When a user tries to edit an element that exceeds 5000 characters of HTML Content, Hushly automatically hides the Content text box and an error message is displayed as shown below.

Example 1: 

Basic Elements: Inline Content Element  

1. Click Inline Content to select the Element. 
2. Hover on the tag in the Preview Panel to display the Red Line position indicator. Click to insert the element.
   
   Note: You have an option to cancel adding the Element by pressing the Escape Key.
   For example: When selecting a Basic Element to insert into a tag, a red line position indicator will appear. If you want to cancel the action, press the Escape key on your keyboard. This will cancel the addition of the element and expand the Element Library as shown below.
   
   
3. The inserted Element is highlighted in the Preview Panel, prompting the Element Editor Panel to open for adding Text/HTML in the Content section. Customize the element from the Style tab. Additional options such as Save To Library,Discard, and Save buttons are included in the Element Editor Panel.
   

    

4. In the Content tab, add Text/HTML. In the Style tab, customize the Element and click Save .  
5. The added element appears in the Preview Panel.  A Success Message confirms that the Inline Content Element has been saved and it is visible in the Updates panel. 

    

6. To save the added element for future use, select the Element and click Save To Library.
   The Add Element to Library pop-up appears, featuring fields for Name, Description, Content, Style, Cancel, and Save buttons. Modify the details as needed and click Save.

   
   

   
   After successfully saving, the element is shown in My Library. 
   
   Example 2:
   
   Basic Elements: Image Element
   
   
7. Click Image to select the Element
8. Hover on the Tag to reveal the Red Line Position Indicator and click to insert the Element.  An empty image placeholder is inserted. Click on the Image in the Library Editor Panel to upload or select from existing images and click Save. 
9. The inserted Image Element is highlighted in the PreviewPanel and saved in the Updates panel. The Editor Panel opens, showing the Content and  Image section. Customize the element by clicking on the Style tab.
   
   Note: Save the inserted Image Element by clicking on SaveTo Library. The saved element will then appear in My Library for future use.
   
   
10. Inserted Image Element displayed in runtime.

My Library

My Library contains saved Elements that can be edited, utilized, or managed for further use on your Web Experiences. Here is how you can add and save Elements to My Library.

• Click on My Library in the Library Editor Panel to open the section, which will display a message indicating that the Library is empty.
   
• To add an Element to My Library, select an Element from the Preview Panel and click on Save To Library.

  
  

• Add Element To Library pop-up is displayed. Make necessary changes to the Element (optional) and click Save  
• Success Message is displayed and the Element will be added to My Library section. 
• All the Elements that have been saved to My Library are displayed.
  
  

  Adding a Saved Element 

   
• Select an Element listed in My Library to add element.
• Hover on the Tag to reveal the Red Line Position Indicator and click to insert the Element Note: You can insert the selected element Before, Inside (as the first child or last child), or After the Tag. 

  
  

• The inserted Element is highlighted in the Preview Panel, triggering the opening of the  EditorPanel where you can make changes to the Content and Styling (optional). The Editor Panel also includes options to Save To Library, Discard, and Save. Click Save. 
• A success message confirms the Inline Content Element is saved and displayed in the Preview Panel. In the Editor Panel, SaveTo Library, and Delete are enabled, while the Discard and Save buttons are disabled until changes are made.
  Note: Clicking on the Delete button will delete the Element and display the Updates Panel.
  
  
• The saved Element is displayed in the UpdatesPanel and can be viewed in the Preview Panel.