If you joined FramerAuth before July 22, 2024, you'll need to complete the migration before utilizing bookmarks.

This functionality requires FramerAuth to be installed on your Framer website to work. We recommend cloning the Framer file to get a deeper understanding.

Users often come across content on your website that they want to revisit later. Whether it's an informative article, an intriguing video, or a product they are considering, providing a way for visitors to save and bookmark content can significantly enhance their user experience.

By integrating a bookmarking or save-for-later feature into your website, you not only help users manage their content more effectively but also encourage repeat visits, which can boost engagement and retention rates. Today I'll show you how to add bookmarking/save-for-later to your Framer website powered by FramerAuth.

Bookmark/Save Button

This is the button that will be used by your members to bookmark/save an item.

In this guide, you'll learn how to create a bookmarking experience to add to your Framer site using FramerAuth. This will allow your members to save a CMS item to a specific page for future reference. This requires a code component and an override.

Add the Component

Copy the component link below and paste the component onto your Framer canvas.

https://framer.com/m/Actions-Bookmark-PbEi.js

Configure the bookmark button properties

1. Unlink the component and stylize however you'd like (don't add more than two variants and don't remove CMSActionInterface component).

2. In your instance, set the component to be in the "finished" variant state by default.

3. Connect the slug from the component to your slug variable from the CMS.

4. Apply the withToggleBookmarkBlog override from the FramerAuth override file to the component instance.

5. The link option allows you to redirect to a certain page after the button is clicked, this is optional.

Configure your bookmarked items page

This is the page that will be used by your members to view their bookmarked/saved items.

1. Create a new page called /bookmarks, /saved or whatever you'd like.

2. Add your CMS collection list to the page and turn the collection list into a component

3. Create a variant and name it "Empty State" - you can design this variant for your empty state however you'd like.

   

   
   

4. Apply the override withDynamicGridHeight to your collection list.

5. Apply the override withIsBookmarkedBlog to your CMS item.

6. Apply the override withComponentBookmarkBlog to your instance of the CMS collection list component.

Note: Bookmarking will not work until added to a FramerAuth connected website. Make sure your site has been properly setup first to work properly.

Congratulations 🎉

You've successfully added bookmarking to your Framer website. Should you encounter any issues or require further customization, reach out to our support team for assistance.