How to Embed Google Apps Script Web Apps in Websites

In previous tutorials, we created some Web Apps with Google Apps Script and Google Sheets. This post will show you how to embed Google Apps Script Web Apps in Websites.

In this post, I am not going to show how to build Webs Apps. I will show you how to embed an already made Web App using the Web App URL. If you want to learn how to create Google Apps Script Web Apps with Google Sheets, you can read the following blog posts.

You can embed Apps Script Web Apps easily on Google Sites. And also you can embed them in other types of the website by doing a little modification to the doGet() function of the Apps Script. We will show you how to do it using one of the google apps script Web App examples given above.

In this post, I will use the Web App made for the first blog post link given above. You can copy the Google Sheets with the code to your Google Drive from the following link.

Deploying the Web App and Generating the URL

You have to be careful with access permissions when deploying the Web App. If you want to make anyone on the internet use this Web App, set the following access permissions.

  • Execute as: Me (your email)
  • Who has access: Anyone
Embedding Google Apps Script Web Apps in Websites Set Access Permission

Embed Google Apps Script Web Apps in Google Sites

Embedding in Google Sites is easy as copying and pasting your Web App URL. You can simply insert the Web App to pages using the Embed option.

To embed Google Apps Script Web Apps in Google Sites,

  1. Copy the published Web App URL (For testing, you can directly copy the above live form link)
  2. Go to Google Site, choose the Embed option, paste the URL you copied, and then click Insert.
  3. You can resize it by drawing the edges of the placeholder.

You can see the Google Site that I have embedded the above Web App from the following link.

There are several benefits of embedding Google Apps Script Web Apps in Google Sites rather than directly sharing the Web App URL.

  • You can add additional information about your Web App in the Google Sites pages without any coding skills.
  • It is possible to embed multiple Web Apps in a single Google Site so that you can make a complete web application free.
  • You can have full control of who can access your web application.
  • More user-friendly interface

Embed Google Apps Script Web Apps in other Sites

You can also embed Google Apps Script Web Apps in your existing sites such as WordPress, using HTML <iframe> tag.

If you are using WordPress, I reccomond you to use GeneratePress theme.

By embedding Web Apps on your site, you can directly collect user feedback, user-submitted information, survey results to Google Sheets.

To embed Web Apps in sites other than Google Sites, you need to make a little modification to the doGet() function of the Apps Script project.

Modification to doGet() function

“To create a Web App with the HTML service, your code must include a doGet() function that tells the script how to serve the page.”

To embed the Web App in sites other than Google Site, you need to use the setXFrameOptionsMode() as explained here. So, your code should be modified as below.

doGet() function before modification.

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

doGet() function after modification

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate()
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Use HTML <iframe> tag to embed

You can embed the above Web App in a website using the following code snippet.

<iframe src="https://script.google.com/macros/s/AKfycbyWQczGZ7rjF0YHLTPLVTK5_HIZPcV0XTasFPz3eQscm8XxITmVqqUVKpDIwdG-t3r5/exec" 
height="500" width="100%"></iframe>

See the below Web App that I have embedded in this post using the above iframe. It may not be visible if you have logged in to multiple Google Accounts in your browser. If it is not visible, try using the incognito mode (private browsing).

Wrapping Up

Google Apps Scripts lets you boost your collaboration and productivity by building various custom applications connected to various Google Apps. Our blog has several Google Apps Script Web App examples that you can build with Google Sheets.

This post showed you how to embed such Web Apps that are built with Google Apps Script in Google Sites or any other websites. Through that, you can have more advantages than using the Webs Apps URL itself.

8 thoughts on “How to Embed Google Apps Script Web Apps in Websites”

  1. I am getting scripts.google.com cant connect when I use the URL but when I use the iframe in this tutorial it comes up blank when I look at the site from my phone or browser says sorry cant open file when I open without being signed in (like a random website user) Any ideas?

    Reply
    • Im also stuck on this. I can view when logged into my google account. But when i sign out, or anyone else tries to view it shows error message. If anyone knows how to make a web app accessible to anyone that would be great

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share via
Copy link