Untitled-27 Back to Project

Getting Started Untitled-27

Customisation Untitled-27

Troubleshooting Untitled-27

Security Untitled-27

Users & roles Untitled-27

Working with Client Portal Untitled-27

Integrations Untitled-27

Legacy Documentation Untitled-27

Using Google Sheets with Client Portal

You can embed Google Sheets into Client Portal's content pages. These sheets will automatically update any time a change is made.

In this tutorial, we'll go through how to set it up and some changes you can make to improve the appearance.

1
Once you've set up your spreadsheet in Google Sheets, navigate to File -> Publish to the Web.
2
Make sure the Embed tab is selected and copy the iframe code. You can also change the other settings here to only embed single sheets or the entire document.
3
In Client Portal, set up a module with a Content Page, make sure the Text tab is selected and paste in the iframe code.

Here's what this will look like:

We need to make some modifications to improve the appearance. Let's go through these below:

Change the dimensions of the spreadsheet

First, we need to change the width and the height. For Client Portal, we recommend the width to be 700px to display correctly. The height can be whatever you like (and will depend on the height of your content). Here's the code you'll need to add before the tag:

width="700px" height="1000px"

Now we have this, which is looking much nicer but there are still a couple of changes we can make to improve it even more:

Remove the spreadsheet title and footer

This part is optional depending on your preferences but you can remove the sheet selector bar with the following code which needs to be inserted at the end of your URL:

widget=false

And to remove the title bar showing the spreadsheet name, use the following:

chrome=false

Your embed code should now look something like this:

Here's the final embed code that you can use with all these changes applied. Just replace your spreadsheet URL (which is this part: https://docs.google.com/spreadsheets/d/e/2PACX-1vR1n3r11t2sKuRGHLS99-UMbfeKZzty31WunH-KNzCA1-cRALHUb_m5NdcqU4e5oNBJw2J-talGkc-M) with your own.

See the Pen
Google Sheets in Client Portal
by Laura Elizabeth (@laurium)
on CodePen.

And here's our finished spreadsheet: