Table of Contents

Customize your Notifications Feed with Advanced Feed Customization

Lisa Fockens Updated by Lisa Fockens

Looking for a unique and personalized look for your feed? Our Advanced Feed Customization feature is just the tool you need. It allows you to change various User Interface (UI) elements that make up the default Wisepops feed using CSS.

Wisepops uses its own style sheet to display the iframe. But with Advanced Feed Customization, you can tweak the existing classes to match your website's design. You can change, reduce, or expand the styles of any declared CSS class to get the look you want.

How to Use Advanced Feed Customization

Remember, Wisepops uses its own stylesheet, so your customization options are limited to the existing declared classes. To find these, use the website inspection tools on your browser. This will give you access to the entire stylesheet or allow you to focus on specific elements.

It's also helpful to understand the HTML structure of the feed. This will help you know what effect your changes will have. Keep in mind that some classes are used more than once, so changing them might affect other areas as well.

Once you've decided what changes to make, enter the CSS in the field under Settings > Custom CSS. Here's an example to get you started:

.Teaser {background: blue;}
  1. Access the Settings: Start from your Wisepops settings and go to the 'notifications appearance' tab.
  2. Find the CSS Section: Scroll down until you reach the 'Custom CSS' section.
  3. Enter Your CSS Code: This is where you write your custom CSS code.

We'd love to see how you've customized your feed! Share your designs with us to inspire our community.

Limitations of Advanced Feed Customization

The Advanced Feed Customization feature only allows you to modify existing CSS classes. You can't create new ones. But as long as you work within the existing classes, you can customize your feed to match your vision!

If you have any questions, please get in touch.

Adding the notification feed to your website

Hide the bell until the notifications are loaded

Contact