Shipping Label Template HTML and JSON

This guide is based on the Shipping Label template in the Gallery.

It explains a practical flow: template HTML structure, matching JSON payload, and API render request.

Step 1 - Template HTML structure

HTML

<div class="label">
<div class="label-header">{{carrier_name}}</div>
<div class="section">
<div class="section-label">From</div>
<p>{{sender_name}}<br>{{sender_address}}<br>{{sender_city}}</p>
</div>
<div class="to-section">
<div class="section-label">Ship To</div>
<p>{{recipient_name}}<br>{{recipient_address}}<br>{{recipient_city}}</p>
</div>
<div class="weight-row">
<span>Weight: {{weight}}</span>
<span>Service: {{service_type}}</span>
</div>
<div class="barcode">||||| {{tracking_number}} |||||</div>
<div class="tracking">Tracking #: {{tracking_number}}</div>
</div>

Step 2 - Matching JSON payload

JSON

{
  "carrier_name": "EXPRESS SHIPPING",
  "sender_name": "Acme Corp",
  "sender_address": "123 Business Ave",
  "sender_city": "New York, NY 10001",
  "recipient_name": "Jane Smith",
  "recipient_address": "456 Oak Street, Apt 7B",
  "recipient_city": "Los Angeles, CA 90001",
  "weight": "2.4 lbs",
  "service_type": "2-Day Express",
  "tracking_number": "1Z999AA10123456784"
}

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 - Key mapping checklist

{{carrier_name}} -> carrier_name
{{sender_name}} -> sender_name
{{sender_address}} -> sender_address
{{sender_city}} -> sender_city

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": "<gallery-shipping-label-template_id>",
    "payload": {
      "carrier_name": "EXPRESS SHIPPING",
      "sender_name": "Acme Corp",
      "sender_address": "123 Business Ave",
      "sender_city": "New York, NY 10001",
      "recipient_name": "Jane Smith",
      "recipient_address": "456 Oak Street, Apt 7B",
      "recipient_city": "Los Angeles, CA 90001"
    }
  }'

Use this template for free now

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

Use this template free

Shipping Label Template: HTML + JSON Payload