Embed Sign-In Required Apps in Google Sites

[vchitra]

Exciting News: A better-than-ever AppSheet and Google Sites integration is here!

We're excited to announce that you can now embed authenticated AppSheet applications as iframes directly within Google Sites pages. While previously only public apps could be added to Sites, with this change, apps that require sign-in can now be embedded. This allows users to interact with the app directly on a Google Sites page - all while still ensuring the same enterprise-grade access control you’re used to.

Key Benefits

• Streamlined user experience: Eliminate the need for users to navigate between multiple tabs. Users can now interact with authenticated AppSheet apps directly within Google Sites pages, boosting productivity and efficiency.
• Centralized workflows: Build powerful, interactive business applications like intranet portals and wikis by embedding key tools and information directly into Google Sites.
• Controlled by policy: Leverage AppSheet’s existing in-app authentication and policy rules, ensuring consistent behavior and secure access to your applications. Creators have the control to disable embedding functionality in their apps.

How to get started?

• Open the app that you would like to embed
• Choose Security in the navigation panel and turn on the toggle Allow app embedding
• Go to your site (in edit mode), copy the App URL and use the embed option in Sites to add the HTML element to your web page.

Things to Note

• Embedding authenticated (e.g. "sign-in required” or “restricted”) apps is only supported for Google Sites pages.  “Public apps” continue to be embeddable in any website.
• Use a Chromium-based browser with third-party cookies enabled. Incognito mode and blocking cookies will prevent proper function.
• Ensure the embedded AppSheet app (iframe) is fully visible. Partial visibility or excessive zoom may cause interaction issues.

For more information on setup steps and limitations, refer to the AppSheet and Sites Integration documentation.

We're hopeful that this integration will be a valuable addition to your toolkit and help expand the reach of your apps. We appreciate your patience while we worked to bring you this new feature. We'd love to hear your thoughts on it.

cc: @nico 

[StephenHind]

---

@vchitra wrote:

Use a Chromium-based browser with third-party cookies enabled. Incognito mode and blocking cookies will prevent proper function.

---

This is a fantastic feature and a real boost for Google Sites (even though it's mainly down to AppSheet).

The reason I quoted the cookies section is because most of the internet (including Google) is under the impression that Chrome is getting rid of third-party cookies, so how will this feature work when third-party cookies are no more?

[nico]

Good question Stephen! You're right that this feature depending on 3rd-party cookies (3PC). The history of 3PC is long and quite interesting. The latest update from the Privacy Sandbox is that 3PC are here to stay for the foreseeable future due to input from the UK’s Competition and Markets Authority. Privacy Sandbox, the organization that advises Chromium, has shifted its strategy in the last year from deprecating 3PC to giving more controls over 3PC usage, which is closer to what Safari/Firefox are already doing.

The major use-case that browsers are trying to crack down is using 3PC to track user activity across domains without user consent rather than the cross-site embedding for viewing & interacting with content which is widely considered a valid use-case for 3PC, which is what this feature does.

For some of the technical implementation, this particular feature also uses the `Storage Access API` which still uses 3PC but requires consent to send cookies across domain boundaries which is one of the recommended solutions to keep using 3PC in a privacy preserving manner which should allow this feature to work long into the future.

[StephenHind]

@nico thanks for the reply: this allays our fears over Google Apps Script embedded apps tooo, as we have many.

Also as many have reported in this thread to @vchitra the clickjacking protection is stopping the embedded apps from being used.  As you can see in this video I get told the app must be in view, and you can clearly see that it is in view, nothing is obstructing the view as there's nothing else on the page and I don't even need to scroll in the browser:

• Entire app must be in view over-zealous error

Please can this be looked into as there doesn't appear to be any other way we can embed on a page, as there's nothing that's in the way or not in view.

[StephenHind]

@vchitra @nico @lizlynch any news on this issue as all embedded apps are currently unusable?

[nico]

Thanks for raising this. We'll be publishing some docs with additional guidance on how to avoid the error appearing as often.

I'll share the advice inline below, first deleting the "Not seeing anything above?" box appears to help:

It doesn't overlap with the content but the IntersectionObserverV2 which we use to detect overlay is allowed to report false positives and I've seen it trigger when it's 1 pixel off.

Additionally, the "edit" icon doesn't appear for website viewers:

[SitesDesigner]

Thank you. This worked for me when using the normal in-page embed. Sometimes I needed to adjust dimensions.

[StephenHind]

@nico thanks for the pointers but I still cannot get any app to work while embedded - I have tried:

1. Accessing as a viewer so no edit icon (not sure how usable this will be if all site editors will get blocked from using the embedded app because of the edit button?)
2. Changing the size
3. Removing the reauthenticate box
4. Added a section beneath the embed so the information icon will sit over that instead or the embedded app.

Here's a video showing the issue with all your suggestions inplace:

• Sites AppSeet Embed - Viewer and nothing on the page.webm

As yet I have not seen anywhere an example of a working, embedded AppSheet app in a Google Site: do you have an example to show?

I cannot find any way to make an app usable, so in its current state it's unusable for me.  I'll happily take more advice if you have any, or if you can actually show a worked example of you successfully embedding and using the app, that may show where I'm going wrong.

I hope you can make it work better in the future, but it's a non-starter at the moment.

[nico]

Thanks for the video again. Seems like you have that setup in the best way I know how. Here is a video of how it should work.

For reference, security team required me to use IntersectionObserverV2 which is detects visibility and is allowed to report false negatives by design (to be conservative) as protection against clickjacking. Depending on the device / screen resolution / operating system, it may be report visibility checks far too aggressively. From my own testing, I've noticed different behaviors on different devices - but it never failed completely like this.

To fix, I think I can justify skipping this visibility check specifically for embeds under sites.google.com, I just need security team's input on that. If that's approved, it should make the feature at least useable on your device.

I appreciate the comment, it helps escalate issues internally. I'll update this comment thread once that suggested fix is approved / denied / merged.

[StephenHind]

@nico thanks for the video of how it should work: that's what I was hoping for.

Do you have a video of someone actually embedding it?

I'm a bit confused about skipping the clickjacking protection in sites: you can only embed a signed-in required app in Google Sites anyway (it's not allowed elsewhere).  Google Sites does not allow the editor to overlap, overlay, or obstruct content, it's simply not possible, so that should never have been a worry with Google Sites.  It would be advisable to remove clickjacking for Google Sites, so that it doesn't get triggered for the edit and info button overlays, that the site owner/edit can do nothing about (we cannot remove them, only the Google Sites team).

Finally, after your "Depending on the device / screen resolution / operating system, it may be report visibility checks far too aggressively" comment I have found the issue with the embed: it's not working on any of my Chromebooks! It's working on Chrome in Windows 10, but not ChromeOS - you may want to look at that with some priority as I'm sure Google wants AppSheet embeds working on its own OS!  I don't have macOS handy to test it on and I have been working solely on Chromebooks (and Chromeboxes) for the past 12 years, so please get this working on ChromeOS!

[nico]

Yes, I agree with what you said - Google Sites doesn't allow for custom CSS or scripts. I made that argument with the security team and got approval to allowlist Google Sites specifically! 🙂 There's some technical details on why this was a harder decision than it may seem, but I'm glad they're okay with that since it makes the feature work way better.

Starting with today's release, intersection observer check are no longer required and I expect it to work on all your devices now including Chromebooks.

Once again, thanks for the feedback!

[StephenHind]

@nico many, many thanks for the responsiveness!  I can confirm it's working on the Chromebook even with the Edit button over the embedded app:

• Working on Chromebook with edit button overlaid.webm

Just need it working on a full-page embed and we're golden!

[Koichi_Tsuji]

@vchitra 

I'm not sure if or not my setting went wrong somewhere, but it looks like that the static image of the app is embedded to the Google site. After we managed to embed and the app view is rendered and click over the app somewhere, it always give us a prompt to open the app in full screen rather than allowing us to interact directly inside the embedded app.  Is this behavior the core of this new feature?

[nico]

Make sure the app is completely visible (i.e. not covered by anything including the header, footer, or edit button). You may need to resizing the window to fit then you should be able to dismiss the dialog. This is a clickjacking protection.

[StephenHind]

@nico @vchitra I've also just spotted another issue: you cannot embed in a Google Sites Full-page embed page: I imagine this is down to the embed trying to add the "reauthorization" note below the embed, which isn't possible of a Full-page Embed page in Google Sites, so you may want to add a note to your documentation:

• Cannot embed AppSheet App in Google Sites Full-page Embed

[nico]

Thanks Stephen, appreciate the report and video. I played around with this and was able to reproduce the same issue. This appears to be a bug in Google Sites that crops up for a subset of websites in full-screen embeds (any website that triggers the "Reauthenticate" text), I've filed a bug on their team to take a look.

In the meantime, I have found the following workaround:

• Full-screen embed a random website (e.g. https://www.google.com)
• Modify the url to point back to the AppSheet start url

Then you can get a full-screen embeds.

Note that even once Sites fixes this bug, having a full-screen app can only be used for read-only content, unfortunately because the "Information" icon in the bottom left will overlap with content and trigger the intersection check.

[SitesDesigner]

The edit (pencil) option isn't available after embedding a website via URL, only open in a new window and trash.

[nico]

It looks like this full page embed edit button may be part of a feature rollout that's isn't available to all users yet. Hopefully it rolls out soon so you at least have the workaround (the rollout is owned by the Google Sites team so I have no control over it).

For reference here is how it looks like in two different accounts for me:

Even once that's rolled out, the full-page embed will not be interactable anyways, because of the info button overlay, so I'd recommend using the embed from the insert menu and making it as large as you can unless you only need read-only app data.

- (Supported) From "Insert":

- (Not supported) From pages:

Working on updating documentation to reflect this.

[Karimmc2]

Amazing

[イルカのえっちゃん]

I followed the “Embed Sign-In Required Apps in Google Sites” procedure as described below.
https://www.googlecloudcommunity.com/gc/Announcements/Embed-Sign-In-Required-Apps-in-Google-Sites/m-...

However, as the following video shows, the only thing I can control from within the site is “sync”,
Add and Scroll do not work from within the site and prompt you to open a new tab.

This doesn't seem to make much sense for the embed feature.
Am I doing something wrong with the procedure?

[vchitra]

As the error message states, your entire app needs to be in view. Try scrolling up a bit. If that doesn't work, you can zoom out by using your browser settings. Alternatively, you can edit the size of the block that corresponds to your app in the website.

[イルカのえっちゃん]

I noticed something strange.
For most of the operations in this case, “Open in New Tab” appears when the browser screen is maximized. By the way, you can't scroll either.
However, when I make the browser screen smaller, I can operate the site normally from within the site.

[TulioJ]

Hi  イルカのえっちゃん 

I have noticed that even the floating button in the preview mode are also triggering the intersection observer , I tried publishing my site and preview it from there and the app embed is interacting just fine

Preview

[イルカのえっちゃん]

Thank you!
I finally found the cause of this phenomenon and solved it.

[nico]

Hi  イルカのえっちゃん ,

Please try again now. We've been able to remove the IntersectionObserver running at least for sites.google.com so you should no longer run into this issue.

Thanks for the video!

[SitesDesigner]

Even after dragging and expanding the embed window to maximums this error still pops up.

[Rifad]

Not sure what to do now @vchitra 

[SitesDesigner]

Thanks for this announcement @vchitra @nico . I love Google Sites updates and this gives us a better means to develop functional intranets. Just starting to play with it now. Stay tuned.

[SitesDesigner]

In Google Sites, using a full page embed, I add the app share link and after insert nothing happens. It is enabled for embedding via Appsheet security settings. Page content embed works, just not the full page one which helps to avoid the sizing and viewport issues I think.

[KWDSitesDesigne]

It's pretty weird that zooming out 10% makes everything functional in the iframe window for my apps. I suppose this is a responsiveness issue?

[mateo]

Awesome news! Thanks for that AppSheet team 😍

I have 2 questions:

1. Do you plan to let us use it under a custom domain? For example, I have a Google Sites website with my custom domain attached, and it only works with sites.google.com... link opened.

2. Do you also plan to make it available in a full-page embed?

[nico]

1. No plans for custom domains support at the moment. we could easily extend this in the future.

2. Yes. With this feature, we will support read-only full-page embeds and our long term plan is to allow for intractability in full-page embeds once we have a longer-term fix for the clickjacking issue in place (which will be several months into the future).

[mateo]

Thanks for the reply @nico! Custom domain support would be a huge milestone in my humble opinion. I have been waiting for this since the start of my AppSheet journey.

[Karimmc2]

Would love to see this feature available for custom domain sites.

[Koichi_Tsuji]

Technically speaking, it wont happen outside Google services.....

[Karimmc2]

Are there any plans to bring this to Non Sign-In Required Apps in the near future?

[StephenHind]

@Karimmc2 non-sign in apps are available now: you need to be paying for an Enterprise Plus licence to get it.

[Karimmc2]

Thanks @StephenHind , I will try the embeded feature with a non-sing in app

[Koichi_Tsuji]

@nico 

Im still puzzled how this new feature would work.

I embedded app with full screen (as I assume, as there is no vertical/horizontal scroll bar inside the embedded app), but once we click anywhere inside the embedded app, it always sees windows to guide me to open the app in other tab.

As you see below image, the app is embedded with full screen mode. No scroll bar for both vertical/horizontal.

 

Once we click anywhere inside the app, the pop up window always being thrown.

"Cant interact with app when partially visible. To interact with this app, scroll the view entire app on screen, resize the app to fit your screen, or open in new view."

This error/guide message is giving me more confusions to be honest with you.

Yes, I did follow what this message says, but still no effect.

[StephenHind]

@Koichi_Tsuji try using it from the published site and not the preview: it doesn't work in the preview.