Back to Project
Getting Started
- How to install Client Portal
- Can I use it without WordPress?
- Setting up your first portal
- Using content pages
- Importing and Exporting Portals
- Icon Cheatsheet
Customisation
- Customise project status modules
- Remove the project status modules
- How to change the fonts in Client Portal?
- How to change the 'Client Portal Archive' text
- How to change the 'Client Portal Login' text
- Change Error Message on the Login Screen
- How to add, move, and delete phases
- Redirect to the homepage after logging out
- How to change the slug/permalink
Troubleshooting
- Troubleshooting problems with Client Portal
- I’m not getting Client Portal updates
- Find and edit the Client Portal Login page
- I'm getting a 404 error message
- I'm getting an Nginx error message
- Trouble with logging into a portal
- Forgot password isn't working
Security
- Are my files safe in Client Portal?
- How do I hide Client Portal from search results?
- How do private file uploads work
Users & roles
Working with Client Portal
- Introducing Client Portal to your clients
- How clients can mark as complete
- Create a to-do list with Google Sheets
- Accepting file uploads in Client Portal
Integrations
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:
