Creating a Floating Bar Web Card

Modified on Sun, 26 May at 8:52 PM

To create a Floating Bar Web Card, follow the steps below:


  1. From the Left Nav Menu, click Web Personalization > Web Cards.
     
  2. On the Web Card listing page, click New Web Card. 
  3. In the Create New Web Card pop-up window under Templates, select Floating Bar as the Web Card Type from the drop-down. 

Floating Bar: Web Card type has two templates.

  • Simple Bar (Link Type)
  • Promotion Bar (Button Type) 


Creating a Simple Bar Web Card

  1. Select the Simple Bar Web Card Template and click on Next. 
  2.  Enter the Name for the Web Card. Enter Notes and Preview Page URL (optional), and click Save. 
  3. The Editor Page is displayed with the Floating Bar containing the Title, Link, and the Close button. 
  4. You can customize the Title, Link, and the Close button. 
    Note: To learn more on Customization click here

  5. Once the Simple Bar Web Card is customized, Click Publish to activate it and make it available in Web Experiences.  
  6. A confirmation pop-up is displayedclick Yes. 
    NoteOnce a Web Card is Published, it cannot be deleted.

Creating a Promotion Bar Web Card

  1. From the Left Nav Menu, click Web Personalization > Web Card.

  2. On the Web Card listing page, click New Web Card. 

     
  3. In the Create New Web Card pop-up window, under templates, select  Floating Bar Web Card type from the drop-down.
     
  4. Select the Floating Bar with Button template and click Next 
  5. Enter the Name for the Web Card. Enter Notes and Preview Page URL (optional) and click Save.

  6. The Promotion Bar is displayed with the Floating Bar containing the Title, CTA, and the Close button. 
  7. Customize the Title, CTA, and the Close button.
    Note: To learn more on Customization click here.


  8. Click Publish to activate the Promotion Bar Web Card.


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article