> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Sheets

> Learn how to save submissions to Google Sheets from your Magic Patterns design

## Overview

Connect your design to Google Sheets to automatically save data. This is perfect for collecting emails, contact forms, waitlists, or anything that requires a very light database.

## Step by Step Tutorial

### 1. Get Your Custom Apps Script

First, switch to `/Ask` mode in Magic Patterns to ask what columns and Apps Script you need for your specific design:

Example Prompt:

```
I want to connect this design to Google Sheets to save form submissions.

What column headers should I add to my Google Sheet, and what Google Apps Script should I use to receive the data?

Please note my plan is to structure it like this:

const GOOGLE_SCRIPT_URL = 'TODO: I WILL PROVIDE YOU WITH THIS'

export async function submitToGoogleSheets(
  data: Record<string, any>,
): Promise<{ success: boolean; error?: string }> {
  try {
    const response = await fetch(GOOGLE_SCRIPT_URL, {
      method: 'POST',
      mode: 'no-cors', // Required for Google Apps Script
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })

    return { success: true }
  } catch (error) {
    console.error('Error submitting to Google Sheets:', error)
    return {
      success: false,
      error: error instanceof Error ? error.message : 'Unknown error',
    }
  }
}
```

<Frame>
  <img src="https://cdn.magicpatterns.com/static/docs/Gsheet-prompt1.png" alt="Using /Ask mode to get your custom Apps Script" />
</Frame>

<Tip>
  The Magic Patterns AI will generally guide you on Step 2 and 3 after the
  prompt from Step 1, but we have included the steps below for reference.
</Tip>

### 2. Create Your Google Sheet

* Go to [sheets.google.com](https://sheets.google.com) and create a new sheet
* Add the column headers from Step 1 in the first row

### 3. Set Up Google Apps Script

1. In your Google Sheet, go to **Extensions > Apps Script**
2. Paste the Apps Script code from step 1
3. Click **Deploy > New deployment**
4. Click the gear icon and choose **Web app**
5. Set "Execute as" to **Me**
6. Click **Deploy**
7. **IMPORTANT:** Set "Who has access" to Anyone
8. Authorize the app when prompted
9. Copy the **Web app URL** (looks like: `https://script.google.com/macros/s/.../exec`)

<Frame>
  <img src="https://cdn.magicpatterns.com/static/docs/Gsheet-webapp.png" alt="Setting up the Web app deployment" />
</Frame>

<Tip>
  IMPORTANT: Set "Who has access" to Anyone, otherwise you will likely get a
  CORS error.
</Tip>

### 4. Connect Your Design

Use this prompt in Magic Patterns, replacing the URL with your Web app URL from step 3:

Example Prompt:

```
[YOUR LINK FROM STEP 3]

Here is my Google Web app URL!
```

<Frame>
  <img src="https://cdn.magicpatterns.com/static/docs/Gsheet-url.png" alt="Copying the Web app URL" />
</Frame>