Embed screenshots

Using CDN to Embed Images in Documentation

FreshShots captures and serves up-to-date screenshots via a global CDN. You can easily embed these screenshots into your documentation across the most popular tools.

Each image is hosted at a unique CDN URL like this:

https://cdn.freshshots.io/{user_id}/{filename}.png

You can find the exact CDN URLs in your FreshShots dashboard or API responses after workflow execution.

🚀 How to Embed in Popular Docs Platforms

🦖 Docusaurus

Just use Markdown syntax:

![UI Screenshot](https://cdn.freshshots.io/1/homepage-screenshot.png)

If you’re using MDX, you can also use React-style components:

<img
	src="https://cdn.freshshots.io/1/homepage-screenshot.png"
	alt="Screenshot"
	style={{ maxWidth: "100%" }}
/>

📘 GitBook

Click "+" → Image
Choose “Embed from URL”
Paste the FreshShots CDN link and confirm.

Alternatively, use /image in the editor.

🧪 ReadMe.com

In the editor, click the image icon.
Choose “Insert Image by URL”
Paste the CDN link from FreshShots.

📚 MkDocs (Material for MkDocs, etc.)

Standard Markdown works:

![Screenshot](https://cdn.freshshots.io/1/workflow-screenshot.png)

You can also set width manually:

<img src="https://cdn.freshshots.io/1/workflow-screenshot.png" width="600" />

🧾 ReadTheDocs / Sphinx (reStructuredText)

.. image:: https://cdn.freshshots.io/screenshots/user/workflow/screenshot.png
   :alt: Screenshot from FreshShots
   :align: center

🧠 Obsidian

Paste the CDN image URL directly:

![](https://cdn.freshshots.io/screenshots/user/workflow/screenshot.png)

Obsidian will render it automatically.

🗒️ Notion

Type /image
Choose “Embed link”
Paste your FreshShots image URL
Click Embed Image

🧩 Confluence (Atlassian)

Type /image
Choose “Insert from URL”
Paste the FreshShots URL
Save

🧾 Google Docs

Go to Insert → Image → By URL
Paste the FreshShots CDN link
If the image is public, it will preview and insert inline.

💻 Plain Markdown (GitHub, MDN, etc.)

![Alt text](https://cdn.freshshots.io/screenshots/user/workflow/screenshot.png)

Or inline:

Here’s the latest UI: ![UI](https://cdn.freshshots.io/screenshots/user/workflow/screenshot.png)

🔒 CDN Notes

✅ Immutable: URLs don’t change once generated
🌍 Fast: Global CDN with low-latency
🧼 Safe: URLs won’t expire unless deleted

For private screenshots, future support will include signed URLs and access controls.

💡 Bonus Tips

Use data-freshshots-id in your HTML to track elements automatically
Organize screenshots by workflow and step to keep docs version-aware
Update screenshots automatically using FreshShots workflows

Need help embedding or styling screenshots? Reach us at [email protected].

Documentation