Embed Google Apps Script web app into your Website

4 min readMar 6, 2023

Welcome!

In one of my previous interactions with some clients, I was pointed out a new issue. The company had created multiple web apps using Google Sheets and Google Apps Script. The task that was given to was embedding the web app into their website.

In this blog we will be taking a look at how to embed a Google Apps Script web app into a website.

So let’s get started.

Step1: Deploy your Web App

I have already created my web app inside of the Apps Script editor using HTML,CSS and JavaScript. I have built a basic timer web app that I want to integrate inside of my website.

You can make a copy of the web app by checking out the GitHub repository given below.

Google-Apps-Script/Code.gs at master · aryanirani123/Google-Apps-Script

Collection of Google Apps Script Automation scripts written and compiled by Aryan Irani.

github.com

Google-Apps-Script/file.html at master · aryanirani123/Google-Apps-Script

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

github.com

To display your Google Apps Script web app on your website, you need to first deploy the web app. To deploy your web app, follow these steps:

Click on Deploy.

2. On clicking Deploy, you will be provided with multiple options, but go ahead and click on New Deployment.

3. On clicking New Deployment, you have select the type of deployment and in this case it is going to be a Web app.

4. On clicking Web app you have to specify some details such as the deployment description, how you want to execute the web app and who has access to the web app.

Once you are done with setting up the deployment, go ahead and click on Deploy.

On clicking Deploy, you will see the following message that says your web app has been deployed and it will show you the deployment ID and URL of the web app for you to access.

To access the web app you can click on the URL that will show you that the deployment is successful and you can see the timer on website. If you want to access the web app, click here.

Here you can see the web app shows the timer successfully.

Step2: Embed the Web App in your Website

Now that we have the web app ready and good to go, its time to embed this inside of our website. For this blog I will be embedding my Google Apps Script Web App inside of my website that I have created using Google Sites.

I have opened up my Google Site and we will now embed the web app using the following I have already opened up my google sites website for embedding the web app

To embed the web app inside of your website in Google Sites follow these steps:

Click on the Embed button on the right side of the scree.

2. On clicking Embed you will be given two ways to embed your web app. We will be using the By URL method inside which we will entering the link that we previously copied.

3. On pasting the link it will show you a small preview of the web app and then you can click on Insert.

On clicking Insert you can see that the web app has been embedded inside your website successfully.

Conclusion

In this blog we saw how we can embed web apps created using Google Apps Script into your websites. Google Apps Scripts lets you boost your collaboration and productivity by building various custom applications connected to various Google Apps. I hope you have understood how to embed a web app inside of your website.

Feel free to reach out if you have any issues/feedback at aryanirani123@gmail.com.