Forum Academy Marketplace Showcase Pricing Features

Linking notification system to a direct post or comment

Hello everyone,

I hope someone can help me here.

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:

  1. User A creates a post
  2. User B comments on a post
  3. 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:
image

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.

Do you have any suggestions? Thanks!

Hey @fernando7 :wave:

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 [email protected]

1 Like

Thanks Andrew. I tried it a few times but it’s not working.

Here’s what I did
Added related post / related comment / related reply (which is a reply to a comment) to the notification data type.

Then I followed your instruction to go to the page IF comment field is not empty

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.

Any suggestions to get over the block?

Thanks

I made a tutorial how to create notifications and how to show them, maybe you find some inspiration here: How to create notifications with Bubble.io? - Biberei

Many greetings

Sarah

1 Like

Hey @fernando7

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 [email protected]

Hey @AndrewV So I gave it a try, but I’m not sure how to exactly get it to work.

  1. 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.

  1. For the entry to scroll to comment, I’m not sure what to select here :frowning: 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.

Hey @fernando7

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 [email protected]

Hi @Sarah_Biberei

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.

Cheers

Hey,

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.

Many greetings.

Sarah

The way I do notifications in my app requires me to save the Unique ID of the thing I want the user to be navigated directly to.


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.