For our blog today, we'll be taking a quick trip through the forest that is 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 show a preview of a website, which can then be dynamically altered and presented to the user within milliseconds. Let's get started!

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. 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.