Completion Certificate Template HTML and JSON

This guide uses the Completion Certificate template from the Gallery.

It is a good example of fixed-page layout: centered design, decorative border, and predictable variable set.

Step 1 - Certificate HTML structure

HTML

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #fff;
    font-family: 'Georgia', serif;
  }

  .cert {
    width: 700px;
    padding: 48px;
    border: 3px solid #c9a84c;
    text-align: center;
    position: relative;
  }

  .name {
    font-size: 36px;
    border-bottom: 2px solid #c9a84c;
    display: inline-block;
    padding: 0 32px 8px;
    margin-bottom: 20px;
  }

  .details {
    display: flex;
    justify-content: space-around;
    margin-bottom: 24px;
  }
</style>

<div class="cert">
  <h1>Certificate of Completion</h1>
  <h3>This is to certify that</h3>

  <div class="name">{{recipient_name}}</div>

  <p>
    has successfully completed the {{course_name}} program,
    demonstrating proficiency in all required areas of study.
  </p>

  <div class="details">
    <div>Date<br><strong>{{date}}</strong></div>
    <div>Duration<br><strong>{{duration}}</strong></div>
    <div>Certificate ID<br><strong>{{certificate_id}}</strong></div>
  </div>

  <div class="signatures">
    <div>{{instructor_name}}</div>
    <div>{{director_name}}</div>
  </div>
</div>

Step 2 - Matching JSON payload

JSON

{
  "recipient_name": "Alexandra Rivera",
  "course_name": "Advanced Data Engineering",
  "date": "March 9, 2026",
  "duration": "12 Weeks",
  "certificate_id": "CERT-2026-04821",
  "instructor_name": "Dr. James Mitchell",
  "director_name": "Prof. Sarah Thompson"
}

Step 3 - Final rendered preview in page

Rendered output preview Template style preview

Preview uses the original Gallery template HTML and CSS with sample payload values.

Step 4 - What to validate before render

Test long recipient names to verify line wrapping.
Keep certificate_id short enough for one line.
Keep date format consistent across all certificates.

Step 5 - Render request example

BASH

curl -X POST "https://api.hookpdf.com/v1/render" \
  -H "Authorization: Bearer <api_key>" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "<completion_certificate_template_id>",
    "payload": {
      "recipient_name": "Alexandra Rivera",
      "course_name": "Advanced Data Engineering",
      "date": "March 9, 2026",
      "duration": "12 Weeks",
      "certificate_id": "CERT-2026-04821",
      "instructor_name": "Dr. James Mitchell",
      "director_name": "Prof. Sarah Thompson"
    }
  }'

Use this template for free now

Start with this template in HookPDF and render your first PDF for free.

Use this template free

Completion Certificate Template: HTML + JSON Payload