Graphed LogoGraphed
Graphed LogoGraphed
How It WorksAgentsIntegrationsPricing

How to Display Google Sheet Data on Website

Cody Schneider••7 min read

Populating a website with up-to-date information can feel like a constant battle. Whether it's a price list, an event schedule, or project statuses, manual updates are slow and prone to error. This article walks you through several methods for displaying Google Sheets data directly on your website, from a simple 2-minute embed to a fully customized, dynamic display. You'll learn how to pick the right approach based on your needs and technical comfort level.

GraphedGraphed

Build AI Agents for Marketing

Build virtual employees that run your go to market. Connect your data sources, deploy autonomous agents, and grow your company.

Watch Graphed demo video

Why Use a Google Sheet to Power Your Website Content?

Before diving into the "how," let's quickly touch on the "why." Using a Google Sheet as a simple database for your website content is a surprisingly powerful and practical strategy for a few key reasons:

  • Easy Updates: Anyone on your team can update the content in a familiar spreadsheet interface. No need to log into the website's backend. Just change a cell in the sheet, and the website updates automatically.
  • Single Source of Truth: It keeps your data centralized. The same sheet that feeds your website could also be used for internal reports, eliminating duplicate data entry.
  • Collaboration: You can leverage Google's built-in collaboration features to have multiple people manage the data simultaneously.
  • Cost-Effective: It's free! You're using tools you already have, saving you the expense of a dedicated content management system or database for simple data.

Common examples include company directories, real estate listings, product inventories, live leaderboards, and resource lists.

Method 1: The Simple Embed Using "Publish to the web"

This is the fastest and easiest way to get your spreadsheet data onto a webpage. It involves publishing your sheet as a simple web page and embedding it using a tool called an iframe. It's perfect for when you just need the data visible and don't need fancy styling.

Step-by-Step Instructions:

  1. Open your Google Sheet: Navigate to the spreadsheet file you want to display.
  2. Publish your Sheet: In the top menu, go to File → Share → Publish to the web.
  3. Configure Your Settings: A new window will pop up with a few options.
  4. Get the Embed Code: Click on the Embed tab. Here, you'll find the same option to choose between the entire document or a specific sheet. Once you've selected what you want, you will see an <iframe> code snippet. Click the Publish button to generate the final code.
  5. Copy and Paste the Code: Copy the full <iframe> snippet. Go to your website editor (like WordPress, Squarespace, Webflow, or any HTML editor) and paste this code where you want the table to appear. Make sure you are in the "text," "HTML," or "code" view of your editor so it properly renders the code.

Free PDF · the crash course

AI Agents for Marketing Crash Course

Learn how to deploy AI marketing agents across your go-to-market — the best tools, prompts, and workflows to turn your data into autonomous execution without writing code.

Pros and Cons of the Simple Embed

Pros:

  • Extremely simple and fast to set up.
  • No coding knowledge required.
  • Table updates automatically when you change the data in the Google Sheet (there is typically a 5-minute cache delay).

Cons:

  • Minimal control over styling and appearance.
  • Includes Google branding and UI elements, which might not fit your site's design.
  • Not mobile-responsive out of the box, it might require some CSS adjustments to work well on smaller screens.

Method 2: Using Third-Party Plugins or Tools

If you need more control over the look and feel of your table, third-party tools and plugins offer a great middle ground. They connect to your Google Sheet but give you an interface to style the data, add sorting or filtering capabilities, and ensure it looks great on all devices.

For WordPress Users: Table Plugins

If your website runs on WordPress, plugins like WP Table Builder or TablePress are excellent options. The general process is very similar for most of them:

  1. Install and Activate the Plugin: Go to your WordPress dashboard, find your preferred table plugin, and install it.
  2. Get the Google Sheet URL: You'll once again use the File → Share → Publish to the web feature. But this time, instead of grabbing the iframe code, select Comma-separated values (.csv) under the format dropdown on the Link tab and copy that public URL.
  3. Connect the Plugin to Your Sheet: Inside the plugin's interface, there will be an option to "Import a Table" or "Create from URL." Paste the public CSV link you copied.
  4. Style and Configure: The plugin will provide a visual editor to change colors, fonts, and borders. You can often enable user-facing features like search, sorting, and pagination.
  5. Embed with a Shortcode: Once you're done, the plugin will give you a shortcode (like [table id=123]). Copy this and paste it into any page or post on your site.

Pros and Cons of Using Plugins

Pros:

  • Lots of customization and styling options without writing code.
  • Adds powerful features like search, filtering, and sorting.
  • Generally mobile responsive.

Cons:

  • Can add bloat to your website, potentially slowing it down.
  • The best features are often locked behind a premium (paid) version of the plugin.
  • You are dependent on a third-party developer for updates and support.

Method 3: Create a Custom Display with Google Apps Script

For complete control, you can create a custom solution using Google Apps Script. This method requires some basic knowledge of JavaScript, HTML, and CSS, but it offers limitless flexibility. You're essentially turning your Google Sheet into a simple API that your website can call to fetch and display data in any way you imagine - not just tables, but also cards, lists, or interactive charts.

GraphedGraphed

Build AI Agents for Marketing

Build virtual employees that run your go to market. Connect your data sources, deploy autonomous agents, and grow your company.

Watch Graphed demo video

How It Works: A Two-Part Process

Part 1: The Google Apps Script (Backend)

First, you write a small script inside your Google Sheet that grabs the data and prepares it to be sent out as JSON (a universal data format).

  1. Open your sheet and go to Extensions → Apps Script.
  2. Replace any code in the Code.gs file with the following script. Be sure to change "YourSheetNameHere" to the actual name of your sheet tab:
function doGet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("YourSheetNameHere"),
  const data = sheet.getDataRange().getDisplayValues(),
  const headers = data.shift(),
  const results = data.map(row => {
    let obj = {},
    headers.forEach((header, index) => {
      obj[header] = row[index],
    }),
    return obj,
  }),
  return ContentService
    .createTextOutput(JSON.stringify(results))
    .setMimeType(ContentService.MimeType.JSON),
}
  1. Save and Deploy: Save the project. Then, click the blue Deploy button, select New deployment, set the type to Web app, and ensure "Who has access" is set to Anyone. Click Deploy.
  2. Copy the URL: Grant the necessary permissions, then copy the Web app URL. This is your API endpoint!

Part 2: Fetch and Display on Your Website (Frontend)

Now, on your website, you'll use a little JavaScript to fetch the data from the URL you just deployed and use it to build your HTML.

<div id="data-container"></div>

<script>
  const url = 'YOUR_APPS_SCRIPT_URL_HERE',

  fetch(url)
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('data-container'),
      const ul = document.createElement('ul'),
      
      data.forEach(item => {
        const li = document.createElement('li'),
        li.innerHTML = `<strong>${item.Name}</strong>: ${item.Description}`,
        ul.appendChild(li),
      }),
      
      container.appendChild(ul),
    })
    .catch(error => console.error('Error fetching data:', error)),
</script>

Free PDF · the crash course

AI Agents for Marketing Crash Course

Learn how to deploy AI marketing agents across your go-to-market — the best tools, prompts, and workflows to turn your data into autonomous execution without writing code.

Pros and Cons of Using Apps Script

Pros:

  • Absolute control over the data's design and functionality.
  • The data is delivered raw, so it is extremely lightweight and fast.
  • Highly secure and reliable since you are using Google's own infrastructure.
  • Free to use.

Cons:

  • Requires working knowledge of HTML, CSS, and JavaScript.
  • More complex and time-consuming setup compared to other methods.

Final Thoughts

Getting your Google Sheet data to display on your website can range from copying a line of code to building a custom API connection. Whether you choose the direct embed for its simplicity, a plugin for polished tables, or Google Apps Script for complete control, you can now turn your simple spreadsheet into a content management tool that keeps your site's information fresh and easy to manage.

All these methods show that pulling raw data from a spreadsheet and formatting it for different uses is a common choke point. We built Graphed to streamline this entire process of data analysis and reporting. Instead of spending time on manual setups or custom scripts, you can connect your Google Sheets and other data sources once, then instantly build real-time dashboards and reports just by describing what you want to see in plain English. We automate the heavy lifting of connecting and visualizing your data, turning hours of tedious work into seconds.

Related Articles