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, under Web Personalization click Web Experiences. 
   
2. From the Web Experiences listing page, select a Web Card.
   
3. Click the Variations tab and select the Variation to add the Web Card. 
   
4. The Web Experience Page Editor is displayed, from the Left Nav click Web Cards.
   
5. Web Cards Panel opens displaying the Add button. Click Add.  
6. The Select Web Card section displays options for Web Card types, including Floating Bar and Slide-In. To proceed, select Floating Bar to expand.

   
   Note:  You can also search and select for the Floating Bar type Web Card by Name which 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 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, whichever 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 the Publish button in 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.

Related Topics:
Adding a Slide-in Web Card to your Web Experience 

Creating a Floating Bar Web Card

Creating a Slide-in Web Card

Customizing a Web Card