Welcome to our comprehensive guide on setting up the Wisepops Notification Feed feature. This guide covers both the Floating Feed and Custom Feed options, providing you with the necessary tools to enhance your website's user engagement.
Prerequisites: Ensure that the Wisepops tracking code is installed on your site before proceeding with this guide.
Feed Appearance Options
Once the tracking code is installed, you have two options for your feed appearance:
Floating Feed (No code required)
Embedded Feed (Recommended)
Option 1: Floating Feed (No Code Required)
To enable the floating feed, follow these steps:
Open your Wisepops account settings.
Navigate to the "Notifications" section.
Scroll down to the "Implementation" section and click on "Change".
In the popup, select "Bell in floating button" then click "Continue".
Activate the bell by clicking on the toggle switch.
Option 2: Embedded Feed (Recommended)
For Shopify Merchants
If you're using Shopify, we offer a simplified installation method for the embedded feed. Please refer to our Shopify-specific documentation for detailed instructions.
For Other Platforms
The custom setup can be simplified into two main steps:
Add the element you want to serve as the feed to your site.
'Turn on feed' on that element by adding the
wispclass.
Since website designs vary, you'll need to decide how you want the feed to appear and edit your code accordingly. This typically involves adding an icon (like a bell) or a text element to your site where you want the feed to appear.
Example: Adding a Bell Icon
Here's an example of how to add a bell icon to your site:
htmlCopy<a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp"> <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="22" height="22" viewBox="0 0 24 24" stroke="black" xmlns="http://www.w3.org/2000/svg"> <path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path> </svg> </a>
Important: The key to activating the feed is adding the wisp class to the element you want to use as the feed trigger.
Alternative Implementation: Text-Based Trigger
You can also use text as a trigger for your notification feed. Here's an example:
htmlCopy<span class="wisp">Inbox</span>
Styling and Customization
The wisp class is all it takes to turn any element into your notification feed when the Wisepops script is properly installed. You can style the element as needed to match your site's design.
Notification Badges
Red notification badges will appear on your feed trigger element when there are new notifications. If the badges appear slightly off, please contact our support team for assistance.
Troubleshooting
If you encounter any issues during setup:
Ensure the Wisepops tracking code is correctly installed on your site.
Verify that you've added the
wispclass to the correct element.Check your browser console for any JavaScript errors.
If problems persist, don't hesitate to reach out to our support team for assistance.
Conclusion
By following this guide, you should now have a functioning Wisepops Notification Feed on your website. Remember, you can always customize the appearance and placement of your feed trigger to best suit your site's design and user experience needs.
For further assistance or advanced customization options, please refer to our detailed documentation or contact our support team.