New user-created website widget for iNaturalist

Hi everyone,

The original iNaturalist observation widget (https://www.inaturalist.org/observations/widget) is no longer being developed, so I created an alternative with the help of @karoopixie and searching for posts on this forum.

What is this?

A simple tool that lets you display your recent iNaturalist observations (also supports projects or places) on your personal website or blog — no coding skills needed.

How it works

  1. Go to https://glauberramos.github.io/inat/widget

  2. Enter your username and pick your settings

  3. Copy the generated code

  4. Paste it into an HTML block on your site (WordPress, Blogger, Squarespace, etc. all support this)

Here are some screenshots of how the widget looks:

That’s it! It’s still in beta, so I’d love to hear your feedback.

Edit: Replaced the original text to add more context and add screenshots

21 Likes

To me, this looks like the sort of link you get in e-mails that you should never click on. Can you explain what it is for and can a forum regular assure us it is legit please?

4 Likes

iNaturalist has a widget that you can add to your own website to display your latest observations. This is for people that has a personal website or blog.

This is the link for the original tool https://www.inaturalist.org/observations/widget, but this tool is no longer supported, and no development is going to be made. So that’s the reason I created a new widget.

5 Likes

I think you need to spell out more clearly what this tool is and how to use it. It may seem obvious to you, because you wrote the code, but the link in your OP doesn’t provide any explanatory text and many users don’t know anything about web development, and have no clue what github is. I suggest adding a few screenshots to your OP that show exactly what this tool does. A more descriptive title would help as well.

4 Likes

Looks like the original Observations Widget is so obscure that even power users aren’t aware of it!

There are two places on iNat that link to the original widget page -

The original widget is dated and not responsive for mobile, and is no longer in development. There are people who would like to use it, including myself.

These people have expressed an interest on the forum -

@robangutan @pisum @mftasp @stevepawson @jon_sullivan @DianaStuder @murray_dawson @fungimap @mrpopp

4 Likes

I will add a better explanation on the original post. Thanks for the feedback.

4 Likes

My interest is not active tho. IDing on iNat has eaten the time I spent on my blog. And on reading blogs - which are less and less popular. Facebook and Instagram have more traffic, and that appeals to me less. I am Not the Target Audience. Kennedy in jeans at the gym drinking milk. ICK. Next !!

But - I would be very wary of adding an active link to iNat because it will slow down loading time for a blog. Click click click scrolling a newsfeed on a cellphone - a blogger is lucky if their ‘reader’s’ visit lasts SECONDS. If those precious seconds are spent … waiting … for … something … to happen, then you have wasted your chance.

What I did do - was to link to iNat, either to a photo, or some text. A deliberately chosen link, which only has to load IF the observer chooses to.

https://eefalsebay.blogspot.com/2021/11/great-southern-bioblitz-october-2021-cape-town.html

This post was fun to put together. The 10 most observed sp from GSB in 2021. And I found my own pictures for each one - because most observed means, if you are out hiking, you too, will be caught by that wow.

My most recent post was in June last year. When I have cleared my chosen slice of iNat’s backlog, I will get back to my blog. And my garden. And choose a MUCH smaller iNat slice in future.

Ultimately if you blog, or have a website - how much time do YOU spend reading or visiting other blogs / websites ?

Nicely done and a decent replacement for the original widget which I have used on my site for years.

As a suggestion: could I request an ability to add a small amount of text above o/and below the observation images and perhaps the ability to have said text normal, emboldend and even italicised (all at the users choice of course) ??

A nice implementation.

Steve

1 Like

Such a nice addition to my blog, cheers!

2 Likes

This is so cool.

So could I fork everything in inat-widget.js if I wanted control over an instance for my own build? Am I saying that right?

2 Likes

Yes! You can copy the file and change as you like.

1 Like

Would that text be the same for each observation? Can you give me an example? Not sure if I got it

Do you have a blog / website ? Link ?

Diana, I will send you a PM.

2 Likes

You can have the widget only render behind the click of an image or URL. but you may not have that much control if using WordPress/blogger. Not sure. Possibly the widget could look at from path and add a one second delay if called successively from the same path? Not sure what the standard is on that.

1 Like

Second thoughts after emptying our compost bin - and admiring our littlest gardeners.

For a nature reserve, conservancy, ecological rehab project - as a way to reach investors, or visitors, or researchers - this is ideal publicity ! And so much better than unenthusiastic paid content. This is what you can see in our reserve.

3 Likes

Nice widget.
In the customisation options, it would be good to be able to enter the data filter yourself: by retrieving it from an iNaturalist search with all the desired criteria [1], or even by writing it yourself, for example with a selection of observation IDs [2].

Example :
[1]: https://www.inaturalist.org/observations?on=2026-03-01&place_id=30157&user_id=sylvainm_53&verifiable=any (link)

[2]: https://www.inaturalist.org/observations?id=303183431,128832780,128623458,171003324,171380084 (link)

This would allow for more precise selection of the observations to be displayed on an external site.

I’m not sure that my org would use this since it’s an unofficial widget, but I just wanted to say bravo! It’s a super clean and professional-looking widget. I love it!

1 Like

Not sure if this is what @SteveMcBill meant by this statement:

but I think that it would be handy to be able to add text at least to the top right corner (see screenshot below).

Alternatively, the function of text being automatically added might be nice. For my purposes, what I’d put there is either “Recent Observations” or “Recently Added Observations” depending on what I decide to use. If a user filters to taxon, something that adds “Recent Observations of Birds” or something to that extent would be cool. I’m sure that could be complicated to do and possibly have some challenges, so it might be easiest to just allow for custom text :-)

P.S. we’ll be using this on our website, so thank you!

5 Likes

You could add that text yourself on your web page, like so:

Doesn’t have to be part of the widget area itself.

5 Likes