Adding a Floating Bar Web Card to a Web Experience

Adding a Web Card to a Web Experience, provides users with visually appealing and engaging content that encourages interaction and exploration on your website.

To Add a Floating Bar Web Card to a Web Experience, follow the steps below:

1. From the Left Nav Menu, click Web Personalization > Web Experiences. 
   
   
2. Select a Web Experience from the Web Experiences listing page to add a Web Card.
   
   
3. Click on the Variations tab and select the Variation to add the Web Card. 
   
   
4. The Web Experience Page Editor is displayed, click on Web Cards button in the Left Nav.
   
   
5. Web Cards Panel opens displaying the Add button. Click Add.  
6. Select Web Card section is displayed with Floating Bar and Slide In Web Card types. Select Floating Bar to expand.

   
   Note: You can also search and select for the Floating Bar type Web Card by Name that you have created in Web Personalization > Web Cards.

   
   
   
7. Web Cards created in Web Personalization > Web Cards > Floating Bar type will be displayed here. Click on Use this Card to select a Web Card. 

   
   

8.  The Trigger Configuration section opens with various triggers and toggle buttons. The selected Web Card is displayed in the page editor. 
   
   Trigger Configuration :  You can configure one or more Triggers to fire your Web Card in runtime. If you configure two or more triggers for a Web Card, which ever triggers first will show the Web Card. Hushly will only display the Web Card one time.

   
   

   Triggers :
   
   Page Entrance:  Triggers when the page loads based on the Delay time configured.
   
   Page Exit: Triggers when the visitor is trying to Exit the page.
   
   On Click: Triggers when the configured element (button or link) is clicked.
   
   Timer: Triggers when the User is on the page based on the Delay time configured.
   
   Scroll: Triggers when the user scrolls up or down based on the Total Percentage and Scroll direction configured.
   
   Idle: Triggers when the page is idle based on the Idle Time configured.
   
   Note: Delay time is configured in seconds.
    

9. Select a Trigger(s) and Click Save. 

10. A Confirmation message is displayed.
    

11. Click on the Publish button on the top right hand corner. 

    
    

    Note: The Publish Option is enabled only when you make any changes to the Variation.
    
    

12.  The Publish Variation pop-up window is displayed. By default, the Distribution mode is set to Equal. 

    
    However, you can change the visitor traffic distribution to Custom and change the percentage of Visitors to see any given variation. Click Publish to set the distribution mode.

           

13. A Confirmation message is displayed that the Web Experience is published.

     

14. Floating Bar Web Card displayed in Runtime on the web page.