Personalizing a Variation

Personalize your Web Page by selecting an element in the preview section and customizing the content in the Style section. The applied changes are displayed in the Content and Styling in the Preview. To view your runtime changes, the Web Experience Tag needs to be available on your Website.

1. Click on the Variation name.   
2. The Variation Preview page displays the Personalization Panel and the Preview Panel.

Personalization Panel

The Personalization Panel has three menus on the left Nav: 

• Updates - All Personalized and Saved Elements are displayed under the Updates Panel. 
• Web Cards - Web Cards that are added to the Web Page are displayed under the Web Cards Panel.
• Component Library -  Basic Elements and My Library 
  
  

Updates

1. Click on Updates on the Left Nav, the Updates section opens with a message to select an element to personalize. 
2. To personalize an Element, select a section in your Preview Panel, and the Element is highlighted. The Editor Panel section is displayed with Content, Style, Attributes, and Advanced tabs. The Save To Library is enabled, Discard, and Save options are disabled until you make changes. Note: An "Up Arrow" icon next to the tag name at the top left corner of the element is used to navigate to the parent of the selected element. This intuitive icon acts as a parent element selector. When clicked, it automatically selects the parent element of the currently highlighted element.
   An IFrame Element can also be personalized. Clicking on the frame opens the options to Personalize the Element, and the Updates Editor Panel will be available for making edits as shown below. 
3. Content & Style: The Content tab is displayed by default in the Updates Editor Panel. Edit text in the Content section and style the element using the Style tab. The Discard and Save button is enabled.
   To learn more about Styling Elements, clickhere.
   
   
   • Click the Open in Editor link to customize the Text or HTML. 
   • The HTML Editor opens giving the user the flexibility to make changes to the content. The lines can be wrapped by selecting the Wrap Lines check box. Selecting Format in the editor automatically organizes the HTML to make it more readable. Click Done once the Text/HTML is customized.   
   •  Insert Tokens: There are two ways of inserting Tokens in the Content section. 
     • Click the Insert Token link. Tokens are dynamic placeholders that will automatically populate with relevant data in runtime. You can add Account, Account Visitor, and Data Provider tokens. 
     • You can also insert tokens into the Content section by typing curly brackets '{{' wherever you want to insert them. Once you begin typing, a list of available tokens will appear for you to choose from. 
   • Click Save. A confirmation message will appear, and the changes will be reflected in the Page Editor. The Delete button is then enabled.
      
4. Attributes: Click Attributes, and the section opens with Standard and Custom Attributes. To learn more on Attributes click here.
   
   
5. Advanced: Under the Advanced Tab, you have the Watch for Changes toggle, JavaScript, and Custom CSS.Watch for Changes: By enabling the toggle for Watch for Changes, Hushly personalization is automatically reapplied whenever there are changes made to the content of an element. This ensures that Hushly monitors any changes made to the content of an element and applies those changes. If the toggle is disabled, no changes will be reapplied.
   
   Note: A Document Object Model (DOM) is a programming interface for web documents, representing the page as nodes and objects. This structure allows programs to modify the document's structure, style, and content, enabling programming languages to interact with the page effectively.
   
   JavaScript: JavaScript can enhance a webpage's interactivity, deliver dynamic content, and improve the user experience. For instance, you can use JavaScript to change an element's color when the mouse hovers over it.
   Custom CSS: Create Custom CSS for unique styles and selectively apply it to specific elements, enhancing visual appeal and aligning with branding across the page.
   
6. To add personalized elements to your library, click the Save To Library icon.
    
7. Add Element to Library pop-up is displayed. Click Save. A success message confirming that the element has been saved will be displayed, and the Saved Element will appear in My Library.

   Saved Element displayed in My Library. 

8. Click Discard, and a confirmation message is displayed with the Cancel and Yes, Discard buttons. Clicking Yes, Discard closes the Updates Editor Panel section. 
9. Delete: Click the Delete Update icon. A confirmation pop-up will appear with options No and Yes. Click Yes to delete. The updated customized element will be deleted and removed from the Updates Editor Panel.
    

Web Cards

1. Click Web Cards on the left nav. The Web Card section opens with the Add button. Click Add. 
2. Select Web Card section is displayed with the Floating Bar and Slide-In Web Cards options. 
3. Click Floating Bar or Slide-in to expand. All available Web Cards will be displayed. Click on Use this Card to select a Web Card.  
4. The Trigger Configuration section appears with Trigger options and toggle buttons. The selected Web Card is shown in the Page Editor. Toggle a Trigger, and the Save button is enabled. Set options and click Save.
   
   To learn more about how to add a Slide-in Web Card to a Web Experience, click here. For adding a Floating Bar Web Card to a Web Experience, click here.

Library

1. Click Library on the left nav. This opens the Library Editor Panel with the Basic Elements button selected by default, displaying all available Basic Elements along with the My Library button. 

2. Select an element from the list, and the Library Editor Panel closes and expands the Preview panel. The selected element can be inserted Before, Inside (as the first or last child), and After the Tag. 
   Note: To Learn more about how to add Basic Elements to your website and save them to My Library, click here.

    

Preview Panel

The Preview Panel displays the following:

• Desktop and Mobile View
• Editor Page URL Bar
• Interact Mode Toggle
• Find Element
• Settings
• Preview 
• Publish

1. From the Preview Panel, you have the option to view and edit on Desktop and Mobile. Click the Icons to switch views.
   • Desktop 
              
   • Mobile
       
     
2. The Editor Page URL Bar displays the Website URL with an icon to view the changes made to the variation in runtime.
   Note: If the Hushly Web Experience Tag is inserted on your website, you will be able to see the changes.
    
3. Interact Mode Toggle: If the Toggle is enabled, the page becomes interactive with the website. If the Toggle is Disabled, any element on the Variation Page can be customized.
   
   
4. Use the Find Element search option to locate an element by entering a CSS Selector. The searched element will be highlighted on the preview panel, and the Updates Editor Panel will open to customize the element.
   Note: Searching for a specific Class or ID will display the exact search results, bypassing any options included or excluded in Settings. You can also find Elements by searching with the following tags: H1, H2, H3, H4, H5, H6, Div, Span, Paragraph, Anchor, Image, or Button.
   
   
5. Settings: Click Settings, and a pop-up opens with two sections, CSS Selector Options and CSS Selector Exclusions.

   
   

   CSS Selector Options

   
   Consider both IDs and Classes (Recommended): Selecting this option will search both IDs and Classes when locating an element.
   
   Consider only Classes: Selecting this option will search only Classes when the website generates IDs dynamically.
   
   Consider only IDs: Selecting this option will search only IDs when the website generates Classes dynamically. 
   
   Ignore both IDs and Classes: Selecting this option will ignore Classes and IDs when the website generates both dynamically.
   
   

   CSS Selector Exclusions

   Adding CSS Selector patterns ensures they are not included in the CSS Selectors available for personalization.
   
   Sample: Added CSS Selector in the CSS Selector Exclusions.
   CSS Selector is excluded on selecting the Element. 

6. Click Preview to view the changes made to the Variation page in draft mode.
   

   
   Note: The Web Experience Tag must be present on your website for the preview to be seen.

            

7. Click Publish to view the Web Experience in run time.

   
   

8. The Variation Publish pop-up window is displayed. By default, the Distribution Mode-Equal is shown.

   
   You can change the visitor traffic distribution mode to Custom. Here you can set the percentage of visitors that will see the Variation.

      

9. Click Publish to set the distribution mode and publish the Variation. A confirmation message will be displayed indicating that the Web Experience Variation has been published.
   

   
   
   

Related Topics:

Web Personalization Library

Attributes in Web Personalization