---
title: HTML/CSS to Image
slug: htmlcss-to-image
image: https://make-cxp-documentation.ams3.digitaloceanspaces.com/apps-center-icons/PREVIEW_html-css-to-image.png
docTags:
createdAt: 2025-02-03T13:28:47.489Z
---
The HTML/CSS to Image modules enable you to convert HTML/CSS to an image in your HTML/CSS to Image account.
## Getting Started with HTML/CSS to Image
Prerequisites
- An HTML/CSS to Image account
In order to use HTML/CSS to Image with Make, it is necessary to have a HTML/CSS to Image account. If you do not have one, you can create a HTML/CSS to Image account at [htmlcsstoimage.com](https://htmlcsstoimage.com/).
## Connect HTML/CSS to Image to Make
To connect your HTML/CSS to Image account to Make you need to obtain your User ID and API Key.
1\. Log in to your HTML/CSS to Image account.
2\. Go to [Dashboard](https://htmlcsstoimage.com/dashboard) where you can find your *User ID* and *API Key*.
::Image[]{src="https://api.archbee.com/api/optimize/oAyFj2GHlBeBVWF5OAir2/9D9O4gO5JzcpM45oE9COD_uuid-14464b91-6fa6-8a04-e451-2957ed4abb33.png" size="70" width="1257" height="804" position="center" caption="62066dd41bb9a." alt="62066dd41bb9a.png" showCaption="true"}
3\. Go to **Make** and open the HTML/CSS to Image module's *Create a connection* dialog.
4\. Enter the User ID and API Key provided in step 2 to the respective fields and click the *Continue* button to establish the connection.
## Actions
### Create an Image with HTML/CSS
Converts HTML/CSS to an image (jpg, png, webp).
| **Connection** | [Establish a connection to your HTML/CSS to Image account](docId\:JMe2E4dODHF21Suzhl80S). |
| ---------------- | ----------------------------------------------------------------------------------------- |
| **HTML** | Enter the html you want to create an image from. |
| **CSS** | Enter the CSS to be applied to the HTML above. |
| **Google Fonts** | Specify the [Google Font](https://fonts.google.com/) you use in your CSS. E.g. `Oxanium` |
[See also the documentation on the HTML/CSS to Image website](https://docs.htmlcsstoimage.com/getting-started/integromat-integration).
### Make an API Call
Allows you to perform a custom API call.
| | |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Connection** | [Establish a connection to your HTML/CSS to Image account](docId\:JMe2E4dODHF21Suzhl80S). |
| **URL** | Enter a path relative to `https://hcti.io/v1`. E.g. `/image/{{image_id}}`
For the list of available endpoints, refer to the [HTML/CSS to Image Documentation](https://docs.htmlcsstoimage.com/). |
| **Method** | Select the HTTP method you want to use:
**GET** to retrieve information for an entry**.**
**POST** to create a new entry.
**PUT** to update/replace an existing entry.
**PATCH** to make a partial entry update.
**DELETE** to delete an entry. |
| **Headers** | Enter the desired request headers. You don't have to add authorization headers; we already did that for you. |
| **Query String** | Enter the request query string. |
| **Body** | Enter the body content for your API call. |
### Example of Use - Get an Image
The following API call downloads the created image:
**URL**: `/image/{{image_id}}`
**Method**:
`GET`
::Image[]{src="https://api.archbee.com/api/optimize/oAyFj2GHlBeBVWF5OAir2/0CwL5z7z6EeC8UHtTxbXn_uuid-5066e154-2b5e-fca3-7638-ae7777b6a7d7.png" size="50" width="318" height="658" position="center" showCaption="false"}
The result can be found in the module's **Output** under *Bundle* > *Body. *The image data:
::Image[]{src="https://api.archbee.com/api/optimize/oAyFj2GHlBeBVWF5OAir2/V6hG_dgqCEDreiZY2xt_F_uuid-874efffb-9577-2072-f4cf-2f4288620115.png" size="50" width="316" height="534" position="center" showCaption="false"}