Templates

Templates are a great way to store an image design in the for of HTML/CSS with variable placeholders that can be replaced when generating an image.

Creating A Template

Make an HTTP POST request to the TEMPLATE endpoint below.

curl --location --request POST 'https://www.htmltoimagepdf.com/api/v1/template/' \
--header 'Authorization: Bearer YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "html": "<div class='\''container'\''> <div class='\''banner'\''> <div class='\''avatar-block'\''> <img src='\''{{AVATAR_IMAGE}}'\'' class='\''avatar'\''> </div><div class='\''text-block'\''> <h1>{{AGENT_NAME}}</h1> <h2>Real Estate Agent</h2> <p>Phone:{{PHONE_NUMBER}}</p></div></div></div>",
    "css": ".container{background-size:500px 300px;background-repeat:no-repeat;background-image:url(https://www.htmltoimagepdf.com/house.jpg);width:500px;height:500px;}.banner{opacity:0.8;background-color:black;margin-top:220px;float:left;width:100%;font-family:Arial;color:white;padding:5px;}.avatar{width:60px;}.text-block{width:80%;float:left;}h1{margin:5px 0 0 0;font-size:14px;font-family:Arial,sans-serif;}h2{margin:2px 0 0 0;font-size:12px;font-family:Arial,sans-serif;}p{margin:3px 0 0 0;font-size:12px;font-family:Arial,sans-serif;}.avatar-block{width:20%;float:left;}",
    "name": "MY_TEMPLATE_NAME"
}'

Parameters

Parameter	Type	Mandatory
html	string	yes
css	string	no
name	string	yes
width	int	no
height	int	no

Creating An Image From A Template

curl --location --request POST 'https://www.htmltoimagepdf.com/api/v1/image/template/' \
--header 'Authorization: Bearer YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "template": "MY_TEMPLATE_NAME",
    "parameters": {
        "AGENT_NAME": "Brien O'\''Brien",
        "AGENT_PHONE_NUMBER": "0123456789"
    },
    "width": 500,
    "height": 300
}'

Parameters

Parameter	Type	Mandatory
html	string	yes
css	string	no
parameters	object	no
width	int	no
height	int	no
delay	int	no