🔥 How to Embed Google Docs Directly Into Your GHL Website (Step-by-Step)

Christian DeVries

Feb 17 • 💎 Pro - Tip

Ever wanted to display a Google Doc right on your website — like a clean, professional framed window?

Here's exactly how to do it inside GoHighLevel's site builder. Takes about 5 minutes.

Step 1: Get Your Google Doc Embed Link

1. Open your Google Doc

2. Go to **File → Share → Publish to the web**

3. Click the **Embed** tab

4. Click **Publish**

5. Copy the link inside the iframe code — you only need the part that looks like this:

`src="https://docs.google.com/document/d/e/XXXXX/pub?embedded=true"`

That `src` link is the only thing you'll swap into the code below.

Step 2: Paste This Code Into GHL

Inside GoHighLevel:

- Open your Website or Funnel

- Add an **HTML / Custom Code** element

- Paste the code below

- Replace `PASTE_YOUR_GOOGLE_DOC_LINK_HERE` with your Google Doc embed link

- Hit Save and Preview

```html

<div style="

width:100%;

max-width:820px;

border:15px solid #000000;

border-radius:18px;

overflow:hidden;

background:#ffffff;

box-shadow:0 18px 45px rgba(0,0,0,0.20);

<div style="

border:6px solid #4a90c0;

border-radius:12px;

overflow:hidden;

background:#ffffff;

<iframe

src="PASTE_YOUR_GOOGLE_DOC_LINK_HERE"

width="100%"

height="950"

style="border:0; display:block; background:#ffffff;"

loading="lazy"

title="Google Doc Embed"

></iframe>

</div>

```

That's it — your Google Doc now lives inside your site like a clean framed window.

Step 3: Customize the Look (Optional)

Want to match your brand? Here's what to tweak:

Outside border thickness → Find `border:15px solid #000000;` → Change `15px` (thinner = `8px`, thicker = `20px`)

Outside border color → Change `#000000` to any hex color (example: brand blue = `#4a90c0`, white = `#ffffff`)

Blue accent border → Find `border:6px solid #4a90c0;` → Change thickness or swap the color

Corner roundness → Find `border-radius:18px;` and `border-radius:12px;` → Higher number = rounder, lower = sharper

Box width → Find `max-width:820px;` → Narrower = `720px`, wider = `980px`

Doc height → Find `height="950"` → Shorter = `750`, taller = `1200` (the doc scrolls inside the frame)

Quick Troubleshooting:

- Doc shows blank? Make sure you used "Publish to the web" and copied the embed link from the Embed tab — not just the regular sharing link.

- Rounded corners not showing? Make sure `overflow:hidden;` is on the wrapper div. That's what clips the iframe to show the rounded edges.

Drop a comment if you get this set up — would love to see how you're using it! 🚀

0 comments

🔥 How to Embed Google Docs Directly Into Your GHL Website (Step-by-Step)

AI CEO LAB

skool.com/aiceolab

Escape the grind and build a self-running, high-income health business using AI, systems, and smart leverage.

Leaderboard (30-day)