Feb 17 • 💎 Pro - Tip
🔥 How to Embed Google Docs Directly Into Your GHL Website (Step-by-Step)
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:
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="padding:24px 16px; display:flex; justify-content:center;">
<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>
</div>
</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! 🚀
1
0 comments
🔥 How to Embed Google Docs Directly Into Your GHL Website (Step-by-Step)
skool.com/10ksidehustle
Escape the grind and build a self-running, high-income health business using AI, systems, and smart leverage.
Leaderboard (30-day)
1
+3
2
+2
Powered by