I’m building a forum, similar to reddit capabilities. The notification piece is almost done, except I’m getting stuck on linking to a direct post or comment when a user clicks on notification.
Here’s the simple use case:
User A creates a post
User B comments on a post
User A gets a notification that user B comment on the post.
User A clicks on the notification, then he should be taken to the post where he sees 1) the post and 2) the comment in question (assume there’s multiple comments, but it should zoom directly into that particular comment. So I presume we need to send the data correctly to the new page, and the ensure only the right data shows up.
If you have a reddit account, you’ll see how that works:
I received a notification:
When I click on the notification, it leads me to the specific comment in question:
Now, on my project, I’ve tried sending the parameters in the URL, but that’s not working. It doesn’t zoom to right comment and the information is not loading correctly.
Thanks for the post and cool idea! I can totally see how this would be helpful.
So there are probably quite a few ways you could build this, but here’s what I might do. On the notification data type, I might add fields for Related Post, Related Comment etc. Then, you’ll have an action that when clicked, takes you to the post page and IF the related comment field is not empty, scrolls to that comment in the list of comments. This should effectively load the post, then scroll the user to the comment.
For bonus points, you could put a conditional on your comment that makes it stand out somehow when IT’s the comment that appears in the URL parameter on the page. Maybe you change the background, change the border etc.
Give it a try and don’t hesitate to reach out with any additional questions to Support@Bubble.io
The scroll to entry is not giving me the correct options. Essentially, the notifications are on the header of the webpage, and the only two options I have to SCROLL to an entry of the repeating group is either 1) the header or 2) the notifications of the header. Instead, what I would need is to scroll in the repeating group entry of the page in the post.
Nice work! That looks like some great progress. And, not a problem about the reusable header. This can still be done. What you’ll want to do though is build the scrolling automation on the actual page and not in the reusable. The reusable element will navigate to a page with a particular parameter. on THAT page, you’ll have a when page is loaded workflow that watches the url for a particular value to not be empty and does the scrolling based on what’s in that value.
Give it a try and don’t hesitate to reach out if we can assist with anything else. You can email us directly at support@Bubble.io
Hey @Andrew.Vernon So I gave it a try, but I’m not sure how to exactly get it to work.
So I’m setting up the workflow on the destination page to check if the page URL is empty, but it’s asking me for a parameter name - what should it be? As you recall, I’m passing quite a few things from the notification element, so there isn’t one parameter name. If I leave it empty, it throws an error.
For the entry to scroll to comment, I’m not sure what to select here Users get notifications regarding a reply to their post or comment, so depending on what it would be, that’s where it should scroll to. But there’s nothing there to select that would tie in to a notification’s reply.
Nice work giving this a try over the weekend. It’s difficult to give definitive guidance without seeing the involved pages and how your elements are being used across those pages / reusable elements. This might be something that you set up to work in concert between the reusable and the destination page. For instance, you could have the destination page check to see if the url is empty, scroll to where the reusable is on the page and then trigger a custom event IN the reusable to scroll to the particular comment / text etc.
As for the parameter you enter for it to check in the URL, I would pick whichever one is most likely to not be empty whenever you’re doing this sort of operation. You’ll want to set the name to whatever name you’re using when you pass the data in the go to page action for it to be picked up on the other side of things.
Also worth mentioning: Have you considered our coaching marketplace where you can hire Bubble experts to solve particular problems with you on an hourly basis? You might find that to be a helpful resource for getting this ironed out in a hands on way.
And of course, don’t hesitate to reach out to us directly with any additional questions. You can reach us at Support@Bubble.io
Thanks for the tutorial. Your method is interesting.
In your case, I’m curious on how to deeplink your notifications. Specifically, once you click it, I’d want to be taken to post or comment that fired the notification.
You would need to adjust the notification and add to it. For example if your notification results of an offer / course you would just need to adjust the notification (e.g. Course) and link it to the course. You can then click on the notification and link it to the course page.
I then have the ability to navigate the user to the appropriate location in my app where the thing is and send in URL parameters the Unique ID and have workflows setup to scroll to the appropriate thing no matter what type of notification it is.
On the destination page, I have this workflow in where the page is loaded and the parameter is not empty, then do the scroll in the repeating group. However, I’m not sure how to fill “entry to scroll to”.
My Unique ID is not randomly generated and it is not for the notification itself. It is related to the Unique ID of the ‘Thing’ the notification is for.
If the notification type is for a message being sent, then the ‘Unique-ID-Search-Constraint’ is the unique of the message data type the notification is for. If the notification is for a payment then the ‘Unique-ID-Search-Constraint’ is for the payment data type the notification is for.
You’ve got the concept if it works for a single notification ‘type’. Next step is to think through the types of notifications you want to provide and apply same technique but with conditionals for the different types of notifications.
Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.
Users get notifications regarding a reply to their post or comment, so depending on what it would be, that’s where it should scroll to. But there’s nothing there to select that would tie in to a notification’s reply.
