Embedding Retool

App Building
1

Hi!
I’ve embedded retool in my website according to this guide - https://retool.com/docs/embedding-retool.
It looks really nice, but I have 2 issues that I’m not sure if and how I can solve:

  1. Retool sidebar and top bar are displayed inside the embedded iframe. I would like to hide them somehow, and couldn’t find anything related to it in the docs or settings.
  2. When I open the hosting page for the first time, Retool login page is displayed inside the iframe instead of the app itself. When I click “Login with Google”, it takes me directly to the app without even asking me to choose the Google account, since I’m already logged in with my Google account in the hosting page. Is there any way to skip the retool login screen if I’m already logged in with my Google account.
    Thanks!
2

Hey @omri-givoni, removing the sidebar on embedded apps is a pretty common request actually – so we will probably build something for it soon. In the meantime, you can add a little custom CSS to hide it in “presentation mode” aka end user mode.
If you add a Text component on the page and toggle “Render as HTML” on, you can write CSS inside <style></style> tags. So to hide the sidebar we would do this:
`
.presentation-mode .sidebar {
display:none;
}

//adjust the canvas width after hiding the sidebar
.presentation-mode .core-layout__viewport {
margin-left: 0;
width: 100%;
}
`

7

and here’s the CSS from my text box, for convenience:
` .presentation-mode .sidebar {
display:none;
}

.presentation-mode .core-layout__viewport {
margin-left: 0;
width: 100%;
}

.presentation-mode .presentation-header-container {
display: none;
}

.presentation-mode .datasource-timer {
display: none;
}
`

8

Also, to answer your 2nd question, if you are already logged into Retool in the same browser, you should also be logged into your Retool app that’s embedded. If this is not the case, please reach out over the chat support and we’ll help you troubleshoot!

9

Thank you so much @alex! This is very helpful. I’ve added your CSS to the Preloaded CSS section in Retool’s settings. It was even easier than adding the Text component :slight_smile:
As for the login issue - I’m trying to simulate a scenario when a user is opening the embedded app hosted in my page for the first time. In my page, he has already going a Google Authenticator, so I wondered if there’s a way the login could be seamless. I’ll reach out to the chat support regarding it.

10

My pleasure @omri-givoni !
Just FYI, since you added it to the Preloaded CSS area, it will affect all of your apps.
Re: login – they will still need to authenticate into Retool using Google SSO. If they are already logged into their GSuite account in the browser, this will save them from typing in their email & password. The alternative is to make the app public, but they anyone would have access. (You probably don’t want to do this!)