Go Behind the Experience to see how Tecovas brings the West to life with Sanity ๐Ÿค  July 18th

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

17 replies
Last updated: Dec 29, 2022
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.
Dec 29, 2022, 5:56 PM
Can you show me what icon you talking about?
Dec 29, 2022, 6:09 PM
Use an screenshot as an example
Dec 29, 2022, 6:09 PM
Either a text button or an icon next to the project name
Dec 29, 2022, 6:14 PM
I found this page: https://www.sanity.io/docs/studio-components and used the navbar which looks like this:
Dec 29, 2022, 6:17 PM
But I think having this link next to the project name would be more elegant.
Dec 29, 2022, 6:18 PM
I believe this is what you want.
https://www.sanity.io/docs/studio-tools
Dec 29, 2022, 6:38 PM
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
Dec 29, 2022, 6:41 PM
This is what I'd like. With the Icon being a react component and the link could go anywhere.
Dec 29, 2022, 6:53 PM
This would be perfect. With the Icon being a react component and the link could go anywhere.
Dec 29, 2022, 6:55 PM
I would use the following way as User mentioned.
Dec 29, 2022, 7:00 PM
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."
Dec 29, 2022, 7:01 PM
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.
Dec 29, 2022, 7:05 PM
Could you just send in a component and within the component trigger a redirect?
Dec 29, 2022, 7:13 PM
You could put it in a useEffect so that as soon as the page loads it will redirect.
Dec 29, 2022, 7:14 PM
OH, that is a great idea. Thanks for the tip, will try out
Dec 29, 2022, 7:15 PM
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 ๐Ÿ˜‰
Dec 29, 2022, 7:36 PM
Very true. Glad it works.
Dec 29, 2022, 8:09 PM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?