Find out how to use HTML to generate rich images with useful things like graphs, QRCodes, dynamic text, and more.

Using HTML to Create Images

What if you could use the rich ecosystems available to web developers to create, design, and generate images? What if you could do this without sacrificing anything, and the image generated is precisely what you developed using HTML, CSS, Javascript, and everything that goes into web design?
At cloudlayer.io, we offer the ability to use any HTML to dynamically generate an image using our REST-based Html to Image API endpoint or one of our no-code solutions, such as our Html to Image Zap with Zapier. You can design it as simple or as complex as you want. We use Chrome Puppeteer to convert HTML to an image, so the rendering fidelity matches precisely.
So why use HTML to create an image in the first place? There are many scenarios where it is significantly easier than simply drawing on a 2d surface. For example, what if you wanted to generate a bar graph or a QR Code?
You could put together a simple HTML page and pull in the many available reporting frameworks or QR generation frameworks in minutes. Then customize how it looks using some CSS, or even import a CSS framework like Tailwind or Bootstrap to simplify the layout.
Let's go through how to create several types of images. We will start simple and get more complex. But first, let's go through the basics of our Html to Image API.
The Html to Image Endpoint
We have several endpoints that you can look at in our documentation, but let's focus on just the HTML to Image endpoint. If you plan to use the Zapier no-code solution, you can gloss over this section as the Zap handles calling the API, encoding it, and getting a response back.
The Html to Image API endpoint is located at:

https://api.cloudlayer.io/v2/html/image
HTML to Image Endpoint
The most basic request you can send is, passing in just the HTML. (We require the HTML to be converted to a base64 string, so it doesn't interfere with the JSON format).
We are going to use a very basic "Hello world!" example:

<html><body><h1>Hello world!</h1></body></html>
HTML to Generate Hello World
When you encode the above HTML to a base64 string, you end up with:

PGh0bWw+PGJvZHk+PGgxPkhlbGxvIHdvcmxkITwvaDE+PC9ib2R5PjwvaHRtbD4=
Base64 String of HTML to Generate Hello World
API Key
You need to pass in your API Key when you call our API. To do that you will need to signup for a free account. To get your API key, you can follow the following steps:

First, click on Settings in the lower-left on the sidebar.
Next, click on "API Keys" in the settings tabs.
Copy API Key to your clipboard by clicking the clipboard icon.
API Key Settings
You will then pass an X-API-Key value as a header to your POST request to the API endpoint. For more information on how to pass in your API Key, look at our documentation on "Using Your API Key."
You will get an immediate JSON response when calling the "html/image" endpoint. By default, all requests are asynchronous. The JSON response you get back has a "Pending" status property. You can either use a webhook callback URL to get an immediate response once processing is done or call the "jobs" endpoint to check the status and get the final "assetUrl." More about this in our docs here.
What happened? Where is my image?
The generated image gets uploaded to the storage in your cloudlayer.io account as an "asset". We then cache and optimize the image asset for delivery on the internet using our CDN for fast and efficient access. All this gets done behind the scenes, so you never have to worry about that.
You can use the URL in "assetUrl" to link to the image asset without incurring any cost or charge to your account. Bandwidth usage to the assets is unlimited, and these assets will remain in your account as long as it's active.
Basic Hello World Image Example
If you followed through the previous section covering the Html to Image endpoint, you would have a request set up to generate a very basic "Hello world!" image test. However, if you skipped that section, the gist is that you created some HTML, base64 encoded it, and then passed it to our API.
The resulting image from this example will look like the following.
Hello World Image
As you can see, this is an extremely simple example. But let's have some fun and start playing around with things. First, let's make the background color of the image blue and the text white.

<html>
  <body style="background-color: blue;">
    <h1 style="color: #fff">Hello world!</h1>
  </body>
</html>
Html to Generate Simple Hello World Image
We will leave off the base64 string for the remainder of these examples but remember that anytime you pass HTML into the API, it must be in base64 format.
Blue Hello World Image
Ok, now we have a blue, rather ugly "Hello world!" example. What if we wanted to use CSS instead of inline styles? Well, that's easy. You can change your HTML to do that.

<html>
  <header>
    <style>
      body {
        background-color: blue;
      }
      h1 {
        color: #fff;
      }
    </style>
  </header>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>
HTML to Generate Blue Hello World Image
The resulting image will look identical but now with cleaner HTML.
Using Custom Fonts
Now let's start getting a bit fancier, and let's use a custom font from Google Fonts. Let's use something crazy like "Cedarville Cursive" to illustrate the point.
While we are it, let's also change the background color to a slightly more pleasing blue color.

<html>
  <header>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        background-color: #3a3ad6;
      }
      h1 {
        color: #fff;
        font-family: "Cedarville Cursive";
        font-size: 3rem;
      }
    </style>
  </header>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>
HTML to Generate Hello World Image with Fancy FontHello World Image with Fancy Font
The fonts and any other external content are retrieved during rendering.
Image Dimensions
Currently, the image dimensions are the default 800x600 and not very useful. Let's change it to something similar to a banner format.
Passing in the "viewPort" dimensions, we can take control of the image size.

{
	"html": "...",
	"viewPort": {
		"height": 150,
		"width": 300
	}
}
ViewPort Dimensions to Change Size of Image
This produces a significantly smaller image with the dimensions you specify.
More Complex Examples
Now that we have shown the basic usage of the Html to Image service that we offer, let's look at some more complex examples.
We can import popular frameworks for generating graphs, reports, barcodes, and more.
Generate a Graph Image
In this example, we will use the popular graphing library Chart.js using the Html to Image endpoint to generate dynamic graph images. Remember, you can use any charting library you prefer, we are just using this one in the example.
The HTML is relatively simple, in this example the majority of the code is Javascript. The HTML consists of a single "canvas" element. We are statically setting the values for the reports, in reality, you would most likely be pulling this data from your API prior to submitting the request for generating the image.

<body style="background-color: #F3F4F6;margin:0;">
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"
    ></script>
    <canvas id="myChart" style="width:100vw;height:100vh;"></canvas>
    <script>
      const ctx = document.getElementById("myChart").getContext("2d");
      const myChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
              label: "# of Votes",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                "rgba(255, 99, 132, 1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)",
              ],
              borderWidth: 1,
            },
          ],
        },
        options: {
          animation: {
            duration: 0,
          },
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
    </script>
    </body>
HTML to Generate Graph Image
Then there is some boilerplate code that handles loading the HTML, formatting it, and submitting the request to return back the asset URL for the generated image.

import fs from "fs";
import fetch from "node-fetch";


const html = fs.readFileSync("./business-chart.html");
const opts = {
  html: Buffer.from(html).toString("base64")
};

(async () => {
  const assetUrl = await getAssetUrl();
  console.log(assetUrl);
})();

async function getAssetUrl() {
  const data = await call("POST", "html/image", opts);

  return new Promise((resolve, reject) => {
    if (data.status === "pending") {
      let count = 0;
      const pollInterval = setInterval(async () => {
        const rsp = await call("GET", `jobs/${data.id}`);

        if(rsp.status === "success") {
            clearInterval(pollInterval);
            resolve(rsp.assetUrl);
        }

        if (count > 10) {
          clearInterval(pollInterval);
          reject("Timed out")
        }
      }, 500);
    }
  });
}

async function call(method, path, opts) {
  const rsp = await fetch(
    `https://api.cloudlayer.io/v2/${path}`,
    {
      method: method,
      body: JSON.stringify(opts),
      headers: {
        "Content-Type": "application/json",
        "X-API-KEY": "<your-api-key>",
      },
    },
    opts
  );

  return await rsp.json();
}
Boilerplate Code to call Html to Image Endpoint
The image can be loaded directly from the URL that is provided, it will look something like the following: "https://assets.cloudlayer.io/....". The assets subdomain is our CDN endpoint, your image will be optimized, and cached on edge servers near your users for extremely fast delivery.
The resulting image generated using the Html to Image endpoint will look like the following.
Generated Graph Image
Now you have a generated graph image that can be distributed and shared on the internet for whatever use case you need. This process can be done as part of a static site generation process, where you call the API to generate all your dynamic images during build time using a data source and then your static site generator will pull them.
Or perhaps you can have your users generate dynamic reports and serve the image results to them as needed.
Image with a QR Code
We took a look at how to create a graph image in the previous section. Now let's take a look at how to use a QR Code in an image.
A good example of this would be to generate a dynamic coupon. So in this example, we will create a simple coupon, with a QRCode in the center of it that simply points to "https://cloudlayer.io" but it could be any data you want.
We will be using the popular QRCode framework called QRCode Styling.
The HTML for this example is a bit more complex, and longer due to all the styling but you can keep it simple if you would like. This illustrates a more complex example to show what's possible and still this only touches the surface.

<body class="bg">
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@500;900&display=swap"
  rel="stylesheet"
/>
<script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
<div style="display: grid; height: 100vh; width: 100vw">
  <div class="txt">
    <p></p>
    <div style="display: grid">
      <div class="qr-code-container">
        <div id="qr-code" style="margin-top: 15px; margin-right: 2px"></div>
      </div>
      <img
        width="200"
        style="margin-right: auto; margin-left: auto; margin-top: 0"
        src="https://cloudlayerio.nyc3.digitaloceanspaces.com/cdn/coupon_tag-min.svg"
      />
    </div>
  </div>
  <div class="cout">
    <p class="one">SCAN THE CODE TO GET</p>
    <p class="cout2">10% OFF*</p>
    <p class="cout3">*ON ALL ACME CO. PRODUCTS</p>
  </div>
</div>
<script type="text/javascript">

  const qrCode = new QRCodeStyling({
      width: 180,
      height: 180,
      type: "svg",
      data: "https://cloudlayer.io",
      dotsOptions: {
          color: "#000",
          type: "rounded"
      },
      backgroundOptions: {
          color: 'transparent',
      },
  });

  qrCode.append(document.getElementById("qr-code"));
</script>
<style>
  .txt {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
  }
  .cout {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }
  .cout :nth-child(1) {
    margin: 0 0 0 auto;
    color: #fff;
    font-weight: 500;
    font-size: 2rem;
    padding-top: 0.75rem;
  }
  .cout :nth-child(2) {
    margin: 0;
    color: #fff;
    font-weight: 900;
    font-size: 4rem;
    margin-top: 0.75rem;
  }
  .cout :nth-child(3) {
    margin: -50;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    margin-top: 0.75rem;
  }
  .qr-code-container {
    width: 204px;
    height: 264px;
    background: center / contain no-repeat
      url("https://cloudlayerio.nyc3.digitaloceanspaces.com/cdn/qr_code_box-min.svg");
    margin-bottom: -30px;
  }
  .bg {
    font-family: "Inter", sans-serif;
    margin: 0;
    background: center / cover no-repeat
      url("https://cloudlayerio.nyc3.digitaloceanspaces.com/cdn/coupon_bg1.svg");
    background-size: 101vw 101vh;
  }
</style>
</body>
Html to Generate QRCode Image
In this example, you can see we import the QRCode Styling framework from the "unpkg" CDN URL using a script tag. Then there are a bunch of HTML and styles, and at the bottom, you will see we are importing images. These will be fetched from the internet during rendering.
Then again, nearly the same exact boilerplate code to call the Html to Image endpoint.

const fs = require("fs");
const fetch = require("node-fetch");

const html = fs.readFileSync("./marketing-coupon.html");
const opts = {
  html: Buffer.from(html).toString("base64"),
  viewPort: {
    height: 650,
    width: 800,
    deviceScaleFactor: 0.5,
  },
};

(async () => {
  const assetUrl = await getAssetUrl();
  console.log(assetUrl);
})();

async function getAssetUrl() {
  const data = await call("POST", "html/image", opts);

  return new Promise((resolve, reject) => {
    if (data.status === "pending") {
      let count = 0;
      const pollInterval = setInterval(async () => {
        const rsp = await call("GET", `jobs/${data.id}`);

        if(rsp.status === "success") {
            clearInterval(pollInterval);
            resolve(rsp.assetUrl);
        }

        if (count > 10) {
          clearInterval(pollInterval);
          reject("Timed out")
        }
      }, 500);
    }
  });
}

async function call(method, path, opts) {
  const rsp = await fetch(
    `https://api.cloudlayer.io/v2/${path}`,
    {
      method: method,
      body: JSON.stringify(opts),
      headers: {
        "Content-Type": "application/json",
        "X-API-KEY": "cl-your-api-key",
      },
    },
    opts
  );

  return await rsp.json();
}
Boilerplate Code to call Html to Image Endpoint
The resulting image from this will look like the following.
Generated QRCode Image
Pretty cool right? The resulting image can be whatever you want, it's all HTML and Javascript. You can use any Javascript framework, any CSS framework. The options are limitless really, you can download pre-made templates off the internet and use those as your starting point.
Let's take a look at one more example.
Flyer style Image
In this example, we create an image with all kinds of unique styles. This is another relatively simple example but it shows the kinds of things you can do using HTML and CSS to create a really eye-catching image.
<body class="bg">
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@500;900&display=swap"
  rel="stylesheet"
/>
<p class="institute">INSTITUTE FOR EXAMPLES</p>
<div class="main">
  <p class="title1">ART</p>
  <p class="title2">Show Case</p>
  <div class="bottom">
    <div class="bottom-container">
      <p class="bottom-title">ENTRANCE FEE $5.00</p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus,
        earum qui nemo dignissimos sequi eos tempore aspernatur, natus officia
        exercitationem sapiente suscipit error quis in culpa quo id optio
        quidem.
      </p>
    </div>
  </div>
</div>

<style>
  .bg {
    font-family: "Inter", sans-serif;
    color: #fff;
    margin: 0;

    background: center / cover no-repeat
      url("https://images.unsplash.com/photo-1579547621113-e4bb2a19bdd6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDF8fHZlY3RvciUyMGJhY2tncm91bmR8ZW58MHx8fHwxNjQ0MjgwMTg2&ixlib=rb-1.2.1&q=80&w=2000");
  }
  .main {
    position: absolute;
    bottom: 0;
    width: 100vw;
  }
  .institute {
    margin-top: 200px;
    padding: 10px 40px;
    border-bottom: 6px solid yellow;
    font-weight: 900;
    font-size: 0.95rem;
    position: absolute;
    right: 0;
  }
  .title1 {
    margin-top: -100px;
    margin-left: 25px;
    font-size: 6rem;
    font-weight: 700;
  }
  .title2 {
    margin-top: -110px;
    margin-left: 100px;
    font-weight: 700;
    font-size: 3.5rem;
    width: 1rem;
    line-height: 3rem;
  }
  .bottom {
    background-color: rgba(255, 255, 255, 0.2);
    height: 35vh;
    clip-path: polygon(100% 0, 100% 100%, 4% 100%, 0 0%);
  }
  .bottom-container {
    padding-left: 40px;
    padding-top: 20px;
  }
  .bottom-title {
    font-weight: 800;
    font-size: 1.25rem;
  }
</style>
</body>
The boilerplate code is nearly exactly the same as the previous two examples for brevity's sake we are going to leave that off.  You can use the previous examples.
The resulting image will look the following.

As you can see you can use the HTML as the shell of your design, then pull data from an external source such as an API or Database, a CSV file, etc. and loop through your data, changing text, names, locations, prices and then calling the Html to Image API endpoint to generate the images.  Let us do the work of putting all the pieces together, pushing it out to the internet, optimizing it for fast and quick delivery, putting on a worldwide CDN and Edge caches around the world, and giving you the URL that you serve to your users.
Conclusion
I hope you get the idea, and how it can be useful to generate images using the power of HTML, CSS, and Javascript. The rich ecosystem they offer with solutions readily available for nearly anything.
You can get started by creating a free account, and taking a look at our documentation for the Html to Image endpoint.  We have tried to make generating images and serving those to your customers as painless as possible.
If you have any suggestions, or feedback about generating images please don't hesitate to reach out.

Using HTML to Create Images

Release 5.0 for cloudlayer.io includes a ton of improvements and new features.

<img src="https://images.unsplash.com/photo-1499244571948-7ccddb3583f1?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxMTc3M3wwfDF8c2VhcmNofDMyfHxuZXd8ZW58MHx8fHwxNjQyNzE5MDg1&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=2000" alt="Release 5.0"><p>We have been hard at work on the next release, and I am very excited to announce that it&apos;s finally out the door! We rewrote our UI completely to lay a better foundation for our future plans. In addition, we add a ton of backend features.</p><h3 id="asynchronous-api-calls">Asynchronous API Calls</h3><p>Asynchronous API calls will allow you to call our API and the long-running processes to occur in the background. You can check the progress later or provide a webhook URL to notify you of completion.</p><p><a href="https://docs.cloudlayer.io/#async--sync">Read more on Async in the docs.</a></p><h2 id="storage">Storage</h2><p>Multiple storage methods got added to allow for complete flexibility.</p><h3 id="cloud-storage">Cloud Storage</h3><p>Cloud Storage lets users store their assets in their cloudlayer.io account. When using Cloud Storage, your assets get served using edge caching servers across the globe for instant access.</p><h3 id="user-storage">User Storage</h3><p>User Storage lets users bring their storage. You can use any S3 compatible storage, and all assets will be processed and uploaded to your storage. In addition, all credentials you provide are encrypted and stored securely.</p><h3 id="no-storage">No Storage</h3><p>No Storage is something we currently support and always will. However, customers with data sensitivity requirements prefer to have their data processed and never stored.</p><p><a href="https://docs.cloudlayer.io/storage">Read more on storage in the docs.</a></p><h3 id="webhooks"><br>Webhooks</h3><p><a href="https://docs.cloudlayer.io/#webhooks">Webhooks</a> is a feature that completes the asynchronous API calls feature we added. It&apos;s optional, but getting an immediate response upon completion is very simple and instant with webhooks.</p><h3 id="api-endpoints">API Endpoints</h3><ul><li><a href="https://docs.cloudlayer.io/jobs">Jobs API Endpoints</a> lists your jobs and view jobs by id using the API.</li><li><a href="https://docs.cloudlayer.io/storage">Storage API Endpoints</a> let you manage and view your user storage methods.</li><li><a href="https://docs.cloudlayer.io/assets">Assets API Endpoints</a> allow you to manage and view your assets stored in the cloudlayer.io Cloud Storage.</li></ul><h3 id="zapier-integration">Zapier Integration</h3><ul><li>We have integrated with Zapier for our first no-code integration. Check out our <a href="https://zapier.com/apps/cloudlayerio/integrations">Zapier integration</a> and let us know what you think.</li></ul><h4 id="new-dashboard">New Dashboard</h4><p>We rewrote the dashboard completely. But most importantly, it supports a dark theme! :)</p><ul><li>New Fresh UI</li><li>Dark/Light Themes</li><li>Projects support to help you organize your assets/jobs and to share them with other users.</li><li>List views, with better filtering and details views for troubleshooting.</li><li>Support integration for better real-time support.</li><li>Tighter integration with our payment system lets you add your billing information, update your billing details, tax information, etc., without having to leave the app.</li><li>Qualify of Life improvements across the board.</li></ul>

We have been hard at work on the next release, and I am very excited to announce that it's finally out the door! We rewrote our UI completely to lay a better foundation for our future plans. In addition, we add a ton of backend features.
Asynchronous API Calls
Asynchronous API calls will allow you to call our API and the long-running processes to occur in the background. You can check the progress later or provide a webhook URL to notify you of completion.
Read more on Async in the docs.
Storage
Multiple storage methods got added to allow for complete flexibility.
Cloud Storage
Cloud Storage lets users store their assets in their cloudlayer.io account. When using Cloud Storage, your assets get served using edge caching servers across the globe for instant access.
User Storage
User Storage lets users bring their storage. You can use any S3 compatible storage, and all assets will be processed and uploaded to your storage. In addition, all credentials you provide are encrypted and stored securely.
No Storage
No Storage is something we currently support and always will. However, customers with data sensitivity requirements prefer to have their data processed and never stored.
Read more on storage in the docs.

Webhooks
Webhooks is a feature that completes the asynchronous API calls feature we added. It's optional, but getting an immediate response upon completion is very simple and instant with webhooks.
API Endpoints

Jobs API Endpoints lists your jobs and view jobs by id using the API.
Storage API Endpoints let you manage and view your user storage methods.
Assets API Endpoints allow you to manage and view your assets stored in the cloudlayer.io Cloud Storage.

Zapier Integration

We have integrated with Zapier for our first no-code integration. Check out our Zapier integration and let us know what you think.

New Dashboard
We rewrote the dashboard completely. But most importantly, it supports a dark theme! :)

New Fresh UI
Dark/Light Themes
Projects support to help you organize your assets/jobs and to share them with other users.
List views, with better filtering and details views for troubleshooting.
Support integration for better real-time support.
Tighter integration with our payment system lets you add your billing information, update your billing details, tax information, etc., without having to leave the app.
Qualify of Life improvements across the board.

Release 5.0

Convert webpages to PDFs and merge them into a single PDF using a single API call.

<img src="https://images.unsplash.com/photo-1584786379647-c10852954d2b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxMTc3M3wwfDF8c2VhcmNofDF8fG1lcmdpbmd8ZW58MHx8fHwxNjM4MTU0NDcx&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=2000" alt="Merging PDFs"><p>We now support batch merging PDFs in a single call. Not only do we support merging PDFs in a batch, but we fan out the request to multiple workers and fan it back in to merge it all. Which significantly reduces the amount of time it takes to merge multiple PDF URLs. </p><p>So you provide us with a set of webpage URLs, we fetch those webpages, convert them to PDFs, and then combine them into a single PDF. All you do is call a single API method. We handle all of the complexity. Here is a quick example of how that request looks:</p><figure class="kg-card kg-code-card"><pre><code class="language-html ">https://api.cloudlayer.io/v1/url/pdf</code></pre><figcaption>Service Endpoint</figcaption></figure><figure class="kg-card kg-code-card"><pre><code class="language-json">{
	&quot;batch&quot;: {
		&quot;urls&quot;: [
			&quot;https://google.com&quot;,
			&quot;https://wikipedia.org&quot;,
			&quot;https://example.com&quot;
		]
	}
}</code></pre><figcaption>JSON Request</figcaption></figure><p>Coming soon is a complete set of PDF Utility services that allow you to do all kinds of things to PDFs directly. Two of those are merging PDFs and securing a PDF with a user password and an owner password.</p>

We now support batch merging PDFs in a single call. Not only do we support merging PDFs in a batch, but we fan out the request to multiple workers and fan it back in to merge it all. Which significantly reduces the amount of time it takes to merge multiple PDF URLs. 
So you provide us with a set of webpage URLs, we fetch those webpages, convert them to PDFs, and then combine them into a single PDF. All you do is call a single API method. We handle all of the complexity. Here is a quick example of how that request looks:

https://api.cloudlayer.io/v1/url/pdf
Service Endpoint
{
	"batch": {
		"urls": [
			"https://google.com",
			"https://wikipedia.org",
			"https://example.com"
		]
	}
}
JSON Request
Coming soon is a complete set of PDF Utility services that allow you to do all kinds of things to PDFs directly. Two of those are merging PDFs and securing a PDF with a user password and an owner password.

Merging PDFs

<p>Every customer must have the documentation they need to accomplish their goals. Here at cloudlayer.io, we strive for the best customer experience. An essential part of that is good documentation. While a lot of effort and time went into the previous documentation website, it wasn&apos;t up to</p>

<img src="https://images.unsplash.com/photo-1509475826633-fed577a2c71b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxMTc3M3wwfDF8c2VhcmNofDF8fGRvY3VtZW50YXRpb258ZW58MHx8fHwxNjM3OTQ3ODg0&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=2000" alt="New Documentation"><p>Every customer must have the documentation they need to accomplish their goals. Here at cloudlayer.io, we strive for the best customer experience. An essential part of that is good documentation. While a lot of effort and time went into the previous documentation website, it wasn&apos;t up to the standard that we preferred.</p><p>So, we redid the entire thing. We create an entirely new <a href="https://docs.cloudlayer.io">documentation site</a>, it&apos;s all open source, and we will accept pull requests for changes or additions. It&apos;s searchable, using Algolia search. But, most important, it&apos;s all rewritten from the ground up to be more informative, concise, and accurate.</p><p>Other than those mentioned above, another important reason for this change is how easy it is to update our docs. Before this change, it was a very laborious task. We can now immediately update them, and the changes reflect nearly instantly.</p><p>We are very excited about the new docs website, way more than any human should probably be about it. But, I mean, it&apos;s just documentation. So it&apos;s ok, we understand if you&apos;re not as excited as we are, but we hope you find them helpful.</p>

Every customer must have the documentation they need to accomplish their goals. Here at cloudlayer.io, we strive for the best customer experience. An essential part of that is good documentation. While a lot of effort and time went into the previous documentation website, it wasn't up to the standard that we preferred.
So, we redid the entire thing. We create an entirely new documentation site, it's all open source, and we will accept pull requests for changes or additions. It's searchable, using Algolia search. But, most important, it's all rewritten from the ground up to be more informative, concise, and accurate.
Other than those mentioned above, another important reason for this change is how easy it is to update our docs. Before this change, it was a very laborious task. We can now immediately update them, and the changes reflect nearly instantly.
We are very excited about the new docs website, way more than any human should probably be about it. But, I mean, it's just documentation. So it's ok, we understand if you're not as excited as we are, but we hope you find them helpful.

Every customer must have the documentation they need to accomplish their goals. Here at cloudlayer.io, we strive for the best customer experience. An essential part of that is good documentation. While a lot of effort and time went into the previous documentation website, it wasn't up to

New Documentation

<p>We have been hard at work here, working on some massive changes behind the scenes. I can&apos;t wait to show you guys everything we have been developing. But, unfortunately, got a bit of a way to go before I can show it off.</p><p>In the next couple of</p>

<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxMTc3M3wwfDF8c2VhcmNofDIwfHxjaGFuZ2V8ZW58MHx8fHwxNjM3NzY1NzUy&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=2000" alt="Upcoming changes at cloudlayer.io"><p>We have been hard at work here, working on some massive changes behind the scenes. I can&apos;t wait to show you guys everything we have been developing. But, unfortunately, got a bit of a way to go before I can show it off.</p><p>In the next couple of days, we will be releasing our <a href="https://github.com/cloudlayerio/cloudlayerio-dotnet">.NET C# SDK</a>, which lets you use our API significantly easier for .NET developers and applications. In addition, we have many more SDKs coming soon, such as NodeJs, Java, Rust, and Go versions and a command-line CLI that will run on Windows, Linux, and macOS natively.</p><p>In the next week or two, we will be releasing our new documentation website. We&apos;re moving it over to another system to be stored in GitHub, become easily editable, searchable, and allow us to offer translations in other languages. As a result, we will be shutting down our current documentation website and transitioning to the new one. It&apos;s sad to see it go as it was all custom-developed, but it only makes more sense to spend our development time on other things.</p><p>Within the next couple of months, we will be launching an entirely re-designed website. In addition, the front-end website is getting redone, and the dashboard you use when you log in.</p>

We have been hard at work here, working on some massive changes behind the scenes. I can't wait to show you guys everything we have been developing. But, unfortunately, got a bit of a way to go before I can show it off.
In the next couple of days, we will be releasing our .NET C# SDK, which lets you use our API significantly easier for .NET developers and applications. In addition, we have many more SDKs coming soon, such as NodeJs, Java, Rust, and Go versions and a command-line CLI that will run on Windows, Linux, and macOS natively.
In the next week or two, we will be releasing our new documentation website. We're moving it over to another system to be stored in GitHub, become easily editable, searchable, and allow us to offer translations in other languages. As a result, we will be shutting down our current documentation website and transitioning to the new one. It's sad to see it go as it was all custom-developed, but it only makes more sense to spend our development time on other things.
Within the next couple of months, we will be launching an entirely re-designed website. In addition, the front-end website is getting redone, and the dashboard you use when you log in.

We have been hard at work here, working on some massive changes behind the scenes. I can't wait to show you guys everything we have been developing. But, unfortunately, got a bit of a way to go before I can show it off.
In the next couple of

Upcoming changes at cloudlayer.io

<p>We have been hard at work on a huge release for cloudlayer.io. &#xA0;This release adds many new features, as well as a new billing type.</p><h2 id="new-features">New Features</h2><ul><li>Header Support was expanded, we covered one of the strategies added in another blog post <a href="https://blog.cloudlayer.io/puppeteer-header-template/">here</a>.</li><li>Auto refill - For customers</li></ul>

<img src="https://images.unsplash.com/photo-1459257831348-f0cdd359235f?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Release 2.0"><p>We have been hard at work on a huge release for cloudlayer.io. &#xA0;This release adds many new features, as well as a new billing type.</p><h2 id="new-features">New Features</h2><ul><li>Header Support was expanded, we covered one of the strategies added in another blog post <a href="https://blog.cloudlayer.io/puppeteer-header-template/">here</a>.</li><li>Auto refill - For customers using the on-demand pricing a common request was to have their credit automatically refilled when they reach a threshold. You will now be able to define a threshold, and an amount for having your account automatically refilled with credit using your saved credit method.</li><li><a href="https://github.com/cloudlayerio/cloudlayerio-fsharp">F# Client Library </a>- We created a client library for F# so that any F# users can use that can easily use our API with native support. &#xA0;</li><li>Open API Spec - We have always had Open API, which is available at <a href="https://api.cloudlayer.io/oapi">https://api.cloudlayer.io/api</a> and we also expose the JSON via <a href="https://api.cloudlayer.io/oapi/-json">https://api.cloudlayer.io/api/-json</a>. But now we added a link to it from Documentation that will load inline so you can find it easier.</li><li>We also did a big re-design of our Homepage to better explain the features we offer.</li><li>Last but not least, one of the bigger changes we added was an entirely new Pricing Plan. &#xA0;So now you can choose between Usage Based &amp; Fixed Plans. These were requested by several people to help level out the costs from month to month. &#xA0;You can view the new plans on the new <a href="https://cloudlayer.io/pricing">pricing page</a>.</li></ul><h2 id="are-we-missing-a-feature-you-need-shoot-us-a-message-and-we-will-work-with-you-to-get-it-added-as-quickly-as-possible-">Are we missing a feature you need? &#xA0;Shoot us a message and we will work with you to get it added as quickly as possible.</h2>

We have been hard at work on a huge release for cloudlayer.io.  This release adds many new features, as well as a new billing type.
New Features

Header Support was expanded, we covered one of the strategies added in another blog post here.
Auto refill - For customers using the on-demand pricing a common request was to have their credit automatically refilled when they reach a threshold. You will now be able to define a threshold, and an amount for having your account automatically refilled with credit using your saved credit method.
F# Client Library - We created a client library for F# so that any F# users can use that can easily use our API with native support.  
Open API Spec - We have always had Open API, which is available at https://api.cloudlayer.io/api and we also expose the JSON via https://api.cloudlayer.io/api/-json. But now we added a link to it from Documentation that will load inline so you can find it easier.
We also did a big re-design of our Homepage to better explain the features we offer.
Last but not least, one of the bigger changes we added was an entirely new Pricing Plan.  So now you can choose between Usage Based & Fixed Plans. These were requested by several people to help level out the costs from month to month.  You can view the new plans on the new pricing page.

Are we missing a feature you need?  Shoot us a message and we will work with you to get it added as quickly as possible.

We have been hard at work on a huge release for cloudlayer.io.  This release adds many new features, as well as a new billing type.
New Features

Header Support was expanded, we covered one of the strategies added in another blog post here.
Auto refill - For customers

Release 2.0

Puppeteer has an option called waitUntil where you can pass in several options.  These options change the behavior of how and when it will complete the rendering of your page, and return the results. 

<img src="https://images.unsplash.com/photo-1499377193864-82682aefed04?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MXwxMTc3M3wwfDF8c2VhcmNofDF8fHRpbWVyfGVufDB8fHw&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=2000" alt="Puppeteer waitUntil Options"><p>Here at cloudlayer.io we use Puppeteer to render our HTML, and Websites to generate high fidelity results. &#xA0;No other tool out there can produce the exact results your looking for no matter what HTML, Javascript, CSS you use like a web browser.</p><p>But we don&apos;t just use any web browser, we use Chrome, and we use a headless version of Chrome that we have customized for our own needs. We made it more performant, more resilient, scalable, and more.</p><p>If you have been using Puppeteer on your own you will know it comes with lots of intricacies, and pain points. &#xA0;One of those is ensuring all of your content is fully loaded before outputting your result being a PDF or an Image. &#xA0;What is the best way to ensure your content is all there?</p><p>Puppeteer has an option called waitUntil where you can pass in several options. &#xA0;These options change the behavior of how and when it will complete the rendering of your page, and return the results. </p><p>Below are the options currently available as of this writing:</p><ul>
<li><code>load</code> - consider navigation to be finished when the load event is fired.</li>
<li><code>domcontentloaded</code> - consider navigation to be finished when the DOMContentLoaded event is fired.</li>
<li><code>networkidle0</code> - consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.</li>
<li><code>networkidle2</code> - consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.</li>
</ul>
<p>So that begs the question, why doesn&apos;t it just wait until its &quot;finished&quot; and render the result. &#xA0;After all, when I go to a page, the browser loads the page and then it&apos;s done right? &#xA0;Well, no actually. &#xA0;The progress bar on your browser may have stopped, and it may appear to have finished but in reality many websites are still holding open connections to the server. &#xA0;</p><p>These connections are used to give you real-time updates, notifications, and things like that. &#xA0;So they are necessary, not every website uses them, but many do and because of this the browser has no way of knowing if the website is indeed actually finished. &#xA0;No definitive way at least, but there are several indicators that you can use to determine if you &quot;think&quot; it&apos;s finished.</p><p>So you have <code>loaded</code> and <code>domcontentloaded</code> mentioned above, these are based on static events that will be very consistent.  However, if you are getting inconsistent content loading using those events, you would want to move on to the more heuristic based options.  That&apos;s what you would use <code>networkidle0</code> and <code>networkidle2</code> for, as these are heuristic based methodologies for determining if a page is fully loaded.  Since these are heuristic based, they are not perfect, and will not cover every scenario.</p>
<p>Note: <em>We will discuss some edge cases these don&apos;t cover and what you can do about them further below.</em></p>
<p>So when should you use each one?</p>
<ul>
<li>
<p><code>networkidle0</code> is specifically tailored for SPA based applications or applications written with code that explicitly closes their connections when finished.  For example, anything that uses <code>fetch</code> requests.</p>
</li>
<li>
<p><code>networkidle2</code> is tailored more towards page that use streams, or long lived connections, such as polling or background tasks that involve network connections. It&apos;s important to note that if the website keeps more than 2 active connections open this option will timeout and indicate the page is completed still.</p>
</li>
</ul>
<p>So there are some edge cases that none of these options would fix, and this is by no means a complete list of these but the most common.</p>
<ul>
<li>Lazy loaded images</li>
<li>Lazy loaded content based on scrolling position</li>
<li>Videos, or animated content</li>
</ul>
<p>For lazy loaded images, and lazy loaded content the fix is relative simple. Scroll the content of the page to the end and render the result. You would also most likely want to use either <code>networkidle0</code> or <code>networkidle2</code> in conjunctions.  One catch to this solution is infinitely scrolling sites could cause a memory exception or an excessively large rendering so you will want to build in some techniques to prevent that from ocurring, or you could use our service where we have done all the hard work for you, and all you have to do is pass in the options.</p>
<ul>
<li><code>autoScroll</code> will simulate scrolling the page. This will attempt to scroll down the page, which will cause the lazy loaded elements on the page to render themselves.  If you combine this with <code>networkidle0</code> or <code>networkidle2</code> this could give you the result you are looking for, each scenario behaves differently so there is no gaurantee.</li>
</ul>
<p>Now that you have a good idea of how to use these options, you can check out our service with a <a href="https://cloudlayer.io/pricing">free account</a> and begin using our <a href="https://docs.cloudlayer.io/url-to-pdf">Puppeteer backed API endpoints</a>.</p><div class="kg-card kg-button-card kg-align-center"><a href="https://app.cloudlayer.io/auth/sign-in" class="kg-btn kg-btn-accent">Get Started for Free</a></div>

Here at cloudlayer.io we use Puppeteer to render our HTML, and Websites to generate high fidelity results.  No other tool out there can produce the exact results your looking for no matter what HTML, Javascript, CSS you use like a web browser.
But we don't just use any web browser, we use Chrome, and we use a headless version of Chrome that we have customized for our own needs. We made it more performant, more resilient, scalable, and more.
If you have been using Puppeteer on your own you will know it comes with lots of intricacies, and pain points.  One of those is ensuring all of your content is fully loaded before outputting your result being a PDF or an Image.  What is the best way to ensure your content is all there?
Puppeteer has an option called waitUntil where you can pass in several options.  These options change the behavior of how and when it will complete the rendering of your page, and return the results. 
Below are the options currently available as of this writing:

load - consider navigation to be finished when the load event is fired.
domcontentloaded - consider navigation to be finished when the DOMContentLoaded event is fired.
networkidle0 - consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.
networkidle2 - consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.
So that begs the question, why doesn't it just wait until its "finished" and render the result.  After all, when I go to a page, the browser loads the page and then it's done right?  Well, no actually.  The progress bar on your browser may have stopped, and it may appear to have finished but in reality many websites are still holding open connections to the server.  
These connections are used to give you real-time updates, notifications, and things like that.  So they are necessary, not every website uses them, but many do and because of this the browser has no way of knowing if the website is indeed actually finished.  No definitive way at least, but there are several indicators that you can use to determine if you "think" it's finished.

So you have loaded and domcontentloaded mentioned above, these are based on static events that will be very consistent.  However, if you are getting inconsistent content loading using those events, you would want to move on to the more heuristic based options.  That's what you would use networkidle0 and networkidle2 for, as these are heuristic based methodologies for determining if a page is fully loaded.  Since these are heuristic based, they are not perfect, and will not cover every scenario.
Note: We will discuss some edge cases these don't cover and what you can do about them further below.
So when should you use each one?
networkidle0 is specifically tailored for SPA based applications or applications written with code that explicitly closes their connections when finished.  For example, anything that uses fetch requests.
networkidle2 is tailored more towards page that use streams, or long lived connections, such as polling or background tasks that involve network connections. It's important to note that if the website keeps more than 2 active connections open this option will timeout and indicate the page is completed still.
So there are some edge cases that none of these options would fix, and this is by no means a complete list of these but the most common.
Lazy loaded images
Lazy loaded content based on scrolling position
Videos, or animated content
For lazy loaded images, and lazy loaded content the fix is relative simple. Scroll the content of the page to the end and render the result. You would also most likely want to use either networkidle0 or networkidle2 in conjunctions.  One catch to this solution is infinitely scrolling sites could cause a memory exception or an excessively large rendering so you will want to build in some techniques to prevent that from ocurring, or you could use our service where we have done all the hard work for you, and all you have to do is pass in the options.
autoScroll will simulate scrolling the page. This will attempt to scroll down the page, which will cause the lazy loaded elements on the page to render themselves.  If you combine this with networkidle0 or networkidle2 this could give you the result you are looking for, each scenario behaves differently so there is no gaurantee.
Now that you have a good idea of how to use these options, you can check out our service with a free account and begin using our Puppeteer backed API endpoints.
Get Started for Free

Puppeteer has an option called waitUntil where you can pass in several options.  These options change the behavior of how and when it will complete the rendering of your page, and return the results.

Puppeteer waitUntil Options

Puppeteer is powerful, but the Header Template functionality is very limiting. Learn how cloudlayer.io has solved many of the issues with our own header solution. Learn how to use Puppeteer to Render HTML with a Header Template.

<img src="https://blog.cloudlayer.io/content/images/2020/11/Group-3.svg" alt="Puppeteer Header Template"><p>When working with Puppeteer, you will realize what tremendous power it has. It can render HTML exceptionally well. Since it uses the Chrome rendering engine, you get incredibly high fidelity renderings, which is why we at cloudlayer.io chose to use Puppeteer from the start. However, it also has significant limitations that can cause many people headaches when trying to do certain things using Puppeteer as opposed to WKHTML or something like PrinceXML. That is why we are busy at work augmenting Puppeteer to add these capabilities into our service.</p><p>One of the limitations that Puppeteer has is the ability to create intricate headers. Since you are using HTML, you could develop headings in your HTML and use some Print CSS media tags to try to get things looking right with some success. But you will quickly realize that it has pretty severe drawbacks. One of them is how and where the page breaks occur and how the content gets laid out. &#xA0;In many circumstances, your content may get overlapped with your header and vice versa. What can make this situation even worse is that you may have this only occur on a tiny percentage of your PDF generations, making it challenging to track down the issue.</p><h2 id="our-solution">Our Solution</h2><p>So how did we solve this? We created a system that allows you to define your header in your HTML. &#xA0;You simply wrap your header in a div or any other HTML element, you can even include an image/logo of your choice. Then when calling our <a href="https://cloudlayer.io/docs/url-pdf">URL to PDF</a> API endpoint you can pass in parameters for the headerTemplate. </p><p>For example, lets say your HTML looks like the following:</p><figure class="kg-card kg-code-card"><pre><code class="language-markup">&lt;!DOCTTYPE html&gt;
&lt;html&gt;
	&lt;body&gt;
    	&lt;div class=&quot;header&quot;&gt;
            &lt;img src=&quot;https://example.com/logo.png&quot;/&gt;
            &lt;h1&gt;This is an example&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div&gt;
            ....
        &lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;</code></pre><figcaption>HTML Snippet</figcaption></figure><p>Lets say for the sake of simplicity this page is hosted at: &quot;https://example.com/header&quot;</p><p><em>Note: This path doesn&apos;t exist, this is for illustration purposes only.</em></p><p>Here is an example payload you would pass into our URL to PDF endpoint:</p><figure class="kg-card kg-code-card"><pre><code class="language-JSON">{
	&quot;url&quot;: &quot;https://example.com/header&quot;,
	&quot;headerTemplate&quot;: {
		&quot;method&quot;: &quot;extract&quot;,
		&quot;selector&quot;: &quot;.header&quot;,
		&quot;margin&quot;: {
			&quot;bottom&quot;: &quot;10px&quot;,
            &quot;top&quot;: &quot;10px&quot;,
            &quot;left&quot;: &quot;10px&quot;,
            &quot;right&quot;: &quot;10px&quot;
		},
		&quot;imageStyle&quot;: {
			&quot;padding-bottom&quot;: &quot;10px&quot;,
			&quot;height&quot;: &quot;48px&quot;
		},
		&quot;style&quot;: {
			&quot;width&quot;: &quot;100%&quot;,
			&quot;border-top&quot;: &quot;1px solid blue&quot;,
			&quot;border-bottom&quot;: &quot;1px solid blue&quot;
		}
	}
}</code></pre><figcaption>JSON Parameters</figcaption></figure><h2 id="how-it-works">How it works</h2><p>You may be wondering how this works? We are extracting the HTML element that you specify in the selector. &#xA0;Note: This can be any selector, in our example we are using a class selector. &#xA0;Since Puppeteer doesn&apos;t support external resources, everything needs to be converted to embeddable or inline formats. After extracting the HTML element from the DOM, it&apos;s sent through a custom parsing engine where this work is performed. &#xA0;Images, for example are converted to embedded images, and styles are applied based on the settings specified in the parameters.</p><p>What about the &quot;method&quot; : &quot;extract&quot; parameter? What is that all about? Well, it turns out that creating headers to cover everyone scenario is complicated. &#xA0;The extraction technique is the solution that was just covered. We have additional solutions that we will be adding to cover every header/footer template out there! </p><h2 id="how-do-you-get-started">How do you get started?</h2><p>If you are interested in testing out our service, create an account which will let you create 100 documents at no cost. &#xA0;If you like our service, you can upgrade to one our affordable packages. Check out our <a href="https://cloudlayer.io/pricing">pricing </a>for more details.</p>

When working with Puppeteer, you will realize what tremendous power it has. It can render HTML exceptionally well. Since it uses the Chrome rendering engine, you get incredibly high fidelity renderings, which is why we at cloudlayer.io chose to use Puppeteer from the start. However, it also has significant limitations that can cause many people headaches when trying to do certain things using Puppeteer as opposed to WKHTML or something like PrinceXML. That is why we are busy at work augmenting Puppeteer to add these capabilities into our service.
One of the limitations that Puppeteer has is the ability to create intricate headers. Since you are using HTML, you could develop headings in your HTML and use some Print CSS media tags to try to get things looking right with some success. But you will quickly realize that it has pretty severe drawbacks. One of them is how and where the page breaks occur and how the content gets laid out.  In many circumstances, your content may get overlapped with your header and vice versa. What can make this situation even worse is that you may have this only occur on a tiny percentage of your PDF generations, making it challenging to track down the issue.
Our Solution
So how did we solve this? We created a system that allows you to define your header in your HTML.  You simply wrap your header in a div or any other HTML element, you can even include an image/logo of your choice. Then when calling our URL to PDF API endpoint you can pass in parameters for the headerTemplate. 
For example, lets say your HTML looks like the following:

<!DOCTTYPE html>
<html>
	<body>
    	<div class="header">
            <img src="https://example.com/logo.png"/>
            <h1>This is an example</h1>
        </div>
        <div>
            ....
        </div>
	</body>
</html>
HTML Snippet
Lets say for the sake of simplicity this page is hosted at: "https://example.com/header"
Note: This path doesn't exist, this is for illustration purposes only.
Here is an example payload you would pass into our URL to PDF endpoint:

{
	"url": "https://example.com/header",
	"headerTemplate": {
		"method": "extract",
		"selector": ".header",
		"margin": {
			"bottom": "10px",
            "top": "10px",
            "left": "10px",
            "right": "10px"
		},
		"imageStyle": {
			"padding-bottom": "10px",
			"height": "48px"
		},
		"style": {
			"width": "100%",
			"border-top": "1px solid blue",
			"border-bottom": "1px solid blue"
		}
	}
}
JSON Parameters
How it works
You may be wondering how this works? We are extracting the HTML element that you specify in the selector.  Note: This can be any selector, in our example we are using a class selector.  Since Puppeteer doesn't support external resources, everything needs to be converted to embeddable or inline formats. After extracting the HTML element from the DOM, it's sent through a custom parsing engine where this work is performed.  Images, for example are converted to embedded images, and styles are applied based on the settings specified in the parameters.
What about the "method" : "extract" parameter? What is that all about? Well, it turns out that creating headers to cover everyone scenario is complicated.  The extraction technique is the solution that was just covered. We have additional solutions that we will be adding to cover every header/footer template out there! 
How do you get started?
If you are interested in testing out our service, create an account which will let you create 100 documents at no cost.  If you like our service, you can upgrade to one our affordable packages. Check out our pricing for more details.

Puppeteer Header Template

What is cloudlayer.io and how can we help you and your business with your document generation needs?

<figure class="kg-card kg-embed-card"><iframe width="612" height="344" src="https://www.youtube.com/embed/yvq-x3Vj-9s?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><img src="https://blog.cloudlayer.io/content/images/2020/10/maxresdefault.jpg" alt="What is cloudlayer.io?"><p>We thought we would share this fun little video that we made to quickly illustrate what cloudlayer.io is and what we can do for you and your business. &#xA0;</p><p>This is also the very first post of the new blog. &#xA0;In this blog we will be featuring helpful articles on how to use cloudlayer.io, and general advice on document generation techniques in the industry.</p><p>Stay tuned for more posts to come soon!</p>

We thought we would share this fun little video that we made to quickly illustrate what cloudlayer.io is and what we can do for you and your business.  
This is also the very first post of the new blog.  In this blog we will be featuring helpful articles on how to use cloudlayer.io, and general advice on document generation techniques in the industry.
Stay tuned for more posts to come soon!

Auto Generate Open Graph Images

Using the cloudlayer.io API you can auto generate open graph images.

We make generating PDFs, and Images easy.

Automate your process to save time and money, use our powerful REST API, SDKs and Integrations.

Open Graph Images

From the blog

Knowledge base articles

Features

High Fidelity Rendering

Full Html Support

Privacy Focused

Fanatical Support

REST API

Multilingual

Start a Free Trial