For our blog today, we'll be taking a quick look at our Transloadit CDN and the /html/convert Robot, while taking a small detour to take a look at how we can use the /script/run 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.

Our Template

{
  "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 first Step 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 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/.

Next up, we use the /file/serve 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.

Demo

Error: Unable to preload CSS for /assets/build/render-CNUY0Zre.css at HTMLLinkElement. (https://assets.transloadit.com/assets/build/index-CPy5DX1U.js:1:1671) at HTMLLinkElement.r (https://assets.transloadit.com/assets/build/sentrySettings-BSHrmlHI.js:5:15724)

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.