Last updated: June 27, 2024

<span aria-hidden="true" id="easy-instant-website-screenshots-via-transloadit-cdn"></span>

# Easy instant website screenshots via Transloadit CDN

![Joseph Grabski](/assets/images/teammates/joseph2.png?dpl=dpl_6bVAZ7T51kxquaE3sC6EKFQjn6ek)

**Joseph Grabski**

Content Lead · Rochester, United Kingdom · Show bio

[](https://x.com/joe%5Fgrabski)[](https://github.com/Missing-Tech)

For our blog today, we'll be taking a quick look at our Transloadit CDN and the[/html/convert](/docs/robots/html-convert.md) Robot, while taking a small detour to take a look at how we can use the [/script/run](/docs/robots/script-run.md) Robot to add even more functionality to our current arsenal of Robots.

We're going to create a small Template to take a screenshot of a website, which can then be dynamically altered and presented to the user within seconds. Let's get started!

![A mock iPhone viewfinder with the Transloadit website in focus and the text 'Screenshot any website' to the side.](/_next/static/immutable/media/opengraph-image.3u9pzr07mq2ug.jpg)

<span aria-hidden="true" id="our-template"></span>

## Our Template

```json
{
  "steps": {
    "screenshot_page": {
      "robot": "/html/convert",
      "format": "png",
      "fullpage": false,
      "delay": 100,
      "url": "${decodeURIComponent(fields.input)}"
    },
    "served": {
      "use": "screenshot_page",
      "robot": "/file/serve"
    }
  }
}

```

This is all we need in our Template to be able to preview a website. Our firstStep `screenshot_page` will take a screenshot of any URL that we provide it.

Since we're using a CDN to dynamically generate our preview, we need to utilise the[/script/run](/docs/robots/script-run.md) Robot to decode the URL of our preview page, from the encoded URL that we provide as a parameter. In essence, we transform`https%3A%2F%2Ftransloadit.com%2Fpricing` into [https://transloadit.com/pricing/](/pricing.md).

Next up, we use the [/file/serve](/docs/robots/file-serve.md) Robot to upload the website preview to our CDN, allowing the result to be accessed from all over the world in the blink of an eye.

<span aria-hidden="true" id="demo"></span>

## Demo

URL:

Take a screenshot

![Sample](https://my-app.tlcdn.com/webshot/https%3A%2F%2Ftransloadit.com%2Fpricing)

<https://my-app.tlcdn.com/webshot/https%3A%2F%2Ftransloadit.com%2Fpricing>\
Transformed & fetched in

As you can see, after typing in a URL and clicking "Take a screenshot", an image will automatically be generated of any website that you provide, from the HTML. The beauty of this is that the results are cached, so if it takes a few seconds to generate a URL on the first attempt, the second attempt will be fetched within only a few milliseconds.

That's going to be all for our small blog today! I hope you enjoyed a quick look at using the Transloadit CDN. Feel free to play around with the Template and add your own parameters.

[#code-evaluation-service](/blog/tags/code-evaluation-service.md)[#content-delivery](/blog/tags/content-delivery.md)[#document-processing-service](/blog/tags/document-processing-service.md)[#file-serve-robot](/blog/tags/file-serve-robot.md)[#html-convert-robot](/blog/tags/html-convert-robot.md)[#script-run-robot](/blog/tags/script-run-robot.md)[#walkthrough](/blog/tags/walkthrough.md)

### 👩‍💻 Join 20k+ developers

Sign up for our [monthly newsletter](/newsletters.md) to receive direct links to 3 exclusive tech — and 2 product updates. No less, no more.

Your email:

Get access

## File uploading and encoding. Made simple.

Transloadit streamlines file handling for developers, trusted by brands like Coursera and The New York Times. We’re known for a reliable API, top-notch support, and a strong commitment to open source, with projects like [Uppy⁠](https://uppy.io) and [Tus⁠](https://tus.io) setting standards in file processing.

[Sign up](/c/)[Book a Demo](https://survey.typeform.com/to/kRg47Xi5)

No credit card needed

Cancel anytime