How to build a bookmarking feature
Add a useful feature for your customers, and also make your site more sticky.
Saving bookmarks is a common requirement for any website where there is a lot of content and you want to review some of it at a later date.
This is true for my curated bubble tips site at FindNoCode.info, so I built a bookmarking feature for logged in users. Here is how I did it.
UI
There are several icon plugins you could choose from, but in this example I’m using the built in Icon elements that Bubble uses
Search for the ‘unselected’ version of the bookmark icon element, and Position this within the content that you want your users to bookmark.
Select the icon colour to match your sites colour scheme.
So, by default, all items in your repeating group will have a non-bookmarked looking icon element. i.e
Data Types
Now we need to think about the data model. Is the bookmarked-ness a concept that each Item needs to know about? i.e Do we care if an item has been bookmarked by no-one, one, or several people.? maybe? This could be useful perhaps in identifying popular items in your data set, as these would presumably be bookmarked multiple times.
Do we care if a particular user has bookmarked a particular item? Definitely. This is the mechanism by which we can show some indicator that the item has already been bookmarked. It is also how we could construct a per-user view of their existing bookmarks.
So, let’s decide to implement this second concept, and therefore we’ll extend the User Data type to record these bookmarks in each users database record.
Locate the User datatype and add an additional field called Bookmark. Make it refer to your other Datatype which contains the content you will be displaying in your repeating groups, in my case ApprovedResource. Make sure you enable the checkbox ‘This field is a list (multiple entries)”, because a user may want to store multiple bookmarks.
This post sponsored by SARAL
SARAL is the simplest tool in the market for DTC ecommerce brands to manage influencer campaigns.
It makes influencer marketing as simple as 1 – 2 – 3: Find the best-fit creators on Tiktok, Youtube, and Instagram. Import and reach out to them to build relationships.
Monetize your relationships.
The founder, Yash, built SARAL on the philosophy that relationships with creators compound and transactional “deals” don’t. They’re the only tool on the market that will help you build a long-term always on influencer program in the most effortless way possible.
Plus, they give you a no-card-upfront 7-day free trial to test the product out, so there’s no harm to try it and see if you can build relationships with creators in that time.
The Actions
If a user sees an ApprovedResource they want to bookmark, they can click the Bookmark icon, and expect two things. The bookmark will be stored somewhere that they can find later, and that the icon will change indicating that this item is now bookmarked.
Set up a Workflow
I have two workflows, one for logged out users and one for logged in ones. I did this as an incentive for new customers to sign up.
For Logged out users I simply show the login popup
For logged in users here is where the magic happens
This next step makes a change to the Current User, by appending the current ApprovedResource to the Bookmark field of the Users database record.
This next action might seem odd. However, the customer might in future click on the same Bookmark icon to remove a previously added bookmark. You’ll notice that the ‘Only when’ statement references the Step 1’s result, as being empty. This is required because without it, one would get into an odd situation where adding a new bookmark is both added then instantly removed by the same workflow.
Some UI sauce
It’s nice to animate, if done in moderation. This make the bookmark do a little jiggle.
The only remaining UI component is to change the Bookmark item to actually look bookmarked, i.e full, once this workflow is complete. We do this via a conditional on the Bookmark icon, to simple change the version of the Bookmark icon from the empty one to the full one, IF the Current Users Bookmark list contains this particular ApprovedResource
The result looks like this
The List
As well as showing Bookmarked states throughout the main list of ApprovedResources, it’s handy to see a simple list of all of a users bookmarks. This is simple to implement in a repeating group. I’ve setup a menu item for Bookmarks, and made a page for it.
Using MadeWithFrames components made this quick to set up. [not an affiliate link, I just like them]
The repeating group just references the list of Bookmarks of the Current User, displays the title, and has a simple control to delete items form the list.
That’s all folks, if you follow along you can implement something very similar for your site. This makes it easy for your lovely customers to save items for later which is useful for them, and it’s also another aspect of making your site ‘sticky’, i.e encouraging return traffic because it’s where their bookmarks are.
I’d love your feedback on FindNoCode.info, it’s FREE to sign up still as I’m in Beta stage 1.5. Currently 162 signups, and lots of resources being clicked, each of which is saving a Bubble developer time :)
..Marty
Find me on twitter for quick Bubble tips @MartyLindsay_NZ