Google Apps Script in an iFrame: How to embed Google Apps Script in an iFrame?

Presentation
Photo by Firmbee.com on Unsplash

With all great difficulty and effort, you create a Google Apps Script Web App. And now you want that app to be embeddable by way of an iframe, like you do for other Google products like Sheets, Docs, Slides, etc. Well, this was not possible earlier. The exec file of the Web App that you created was not iframe-friendly hitherto. But now it is possible. You can now modify the HtmlOutput class to set the XFrameOptionsMode from .DEFAULT to .ALLOWALL so that it becomes iframe-friendly.


You can see the Adani Group Dashboard Web App functioning here as an independent single-page Web App. Now, I am embedding the same App here as an iFrame. You can find it functioning properly here:



You can refer to the Google Developers Documentation for the above example:

function doGet() {
    return HtmlService.createTemplateFromFile('form.html')
        .evaluate() // evaluate MUST come before setting the Sandbox mode
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Google AppsScript
function doGet() {
    return HtmlService.createTemplateFromFile('form.html')
        .evaluate() // evaluate MUST come before setting the Sandbox mode
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

However, I am reproducing the same iFrame in Codepen so that anybody can embed the Web App in the web pages. You are free to use and embed the same in your sites 🚀

See the Pen Adani Group Dashboard by Avadhoot Dandekar (@AvadhootDandekar) on CodePen.


Tip!!

Don’t want to code, no problems! No-code is the way. Vibe coding is the way. The world of coding is changing very fast. You have wonderful tools. Take charge of Claude Code, Chat GPT, or Google Antigravity. They all help you take your coding to the next level. Buy Me a Coffee


The computer code makes the computers conscious. They are moving towards Artificial Consciousness. And the code of Mindfulness makes the human beings more conscious, which can lead them to the Supreme Consciousness.

Follow Channel

Follow Channel Fork me on GitHub

2 Comments

Post a Comment

Previous Post Next Post