Adding a button or icon to the studio header in Sanity.io using an iframe.

I am using an iframe to show my studio at

/admin

on my site. I like to add a button Return to Website in the studio header. Any hints on how to go about this. I saw an article that explains to change the logo, but I like a new button beside the logo.

Can you show me what icon you talking about?

Use an screenshot as an example

Either a text button or an icon next to the project name

I found this page: https://www.sanity.io/docs/studio-components and used the navbar which looks like this:

But I think having this link next to the project name would be more elegant.

I believe this is what you want.
https://www.sanity.io/docs/studio-tools

A tool uses an icon and a link to that tool. I need a link to an external site as I am using an iframe

This is what I'd like. With the Icon being a react component and the link could go anywhere.

This would be perfect. With the Icon being a react component and the link could go anywhere.

I would use the following way as User mentioned.

I am looking at the page and it says "The

title

controls what appears in the toolbar, while the

name

controls the URL segment that the tool routes to."

I need the icon to link to an external website, as my studio is not embedded. I am building this for a non-react SSG, Metalsmith, and have not been able to make the embedded studio work. My fallback is using an iframe. So I have two websites. One with the regular site and one with the studio. The studio is then embedded with an iframe in the normal site.

Could you just send in a component and within the component trigger a redirect?

You could put it in a useEffect so that as soon as the page loads it will redirect.

OH, that is a great idea. Thanks for the tip, will try out

Thank you @*Usercathon* great suggestion! I am using useLayoutEffect, which fires a bit earlier in the life cycle so the redirect is smooth. With useLayout you get a brief flash of the component card 😉

Very true. Glad it works.