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

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.