How do I add clickable links to a PDF?

Set the href parameter on a text or image element to make it a live link in the PDF output.

Published Mar 25, 2026

Orshot PDFs support interactive hyperlinks. Use the .href parameter to make any text or image element clickable — perfect for invoices with payment links, certificates with verification URLs, or reports with external references.

Links only work in PDF format. They are ignored when rendering as PNG, JPEG, or WebP.

Basic Usage#

Append .href to any parameterized element to attach a clickable link:

JSON

{
  "templateId": "<YOUR_TEMPLATE_ID>",
  "modifications": {
    "cta_button": "Visit Our Website",
    "cta_button.href": "https://example.com"
  },
  "response": {
    "format": "pdf",
    "type": "url"
  }
}

When the user clicks on the "Visit Our Website" text in the PDF, it opens the URL.

Text Links#

Make any text element clickable:

JSON

{
  "modifications": {
    "company_name": "Acme Corp",
    "company_name.href": "https://acme.com",

    "support_email": "support@acme.com",
    "support_email.href": "mailto:support@acme.com",

    "cta": "Sign Up Now",
    "cta.href": "https://acme.com/signup"
  },
  "response": {
    "format": "pdf"
  }
}

Image Links#

Make images clickable by attaching a link:

JSON

{
  "modifications": {
    "logo": "https://example.com/logo.png",
    "logo.href": "https://example.com",

    "banner": "https://example.com/promo-banner.jpg",
    "banner.href": "https://example.com/promo"
  },
  "response": {
    "format": "pdf"
  }
}

Combining Links with Styles#

Apply visual styling alongside links:

JSON

{
  "modifications": {
    "cta_button": "Get Started",
    "cta_button.href": "https://example.com/signup",
    "cta_button.fontSize": "24px",
    "cta_button.color": "#2563eb",
    "cta_button.fontWeight": "700",
    "cta_button.backgroundColor": "#eff6ff",
    "cta_button.backgroundRadius": "8px"
  },
  "response": {
    "format": "pdf"
  }
}

Multi-Page Links#

In multi-page templates, add different links per page:

JSON

{
  "modifications": {
    "page1@cta": "Read Chapter 1",
    "page1@cta.href": "https://example.com/chapter-1",

    "page2@cta": "Read Chapter 2",
    "page2@cta.href": "https://example.com/chapter-2",

    "page3@cta": "Read Chapter 3",
    "page3@cta.href": "https://example.com/chapter-3"
  },
  "response": {
    "format": "pdf"
  }
}

URL Requirements#

All URLs must meet these requirements:

Rule	Example
Must use `http://` or `https://`	`https://example.com`
Must have a valid domain	`example.com`, not just `example`
Must be a parseable URL	No spaces or invalid characters
Must not be empty	Provide a real URL

Invalid URLs are silently ignored — the element renders normally without a link.

Example: Invoice with Payment Link#

JavaScript

const response = await fetch("https://api.orshot.com/v1/studio/render", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <YOUR_API_KEY>",
  },
  body: JSON.stringify({
    templateId: "<INVOICE_TEMPLATE>",
    modifications: {
      invoice_number: "INV-2026-0042",
      client: "Acme Corp",
      total: "$3,200.00",
      due_date: "April 15, 2026",

      // Clickable payment button
      pay_button: "Pay Now",
      "pay_button.href": "https://pay.stripe.com/inv-0042",

      // Clickable company logo
      logo: "https://example.com/logo.png",
      "logo.href": "https://example.com",

      // Clickable support link
      support: "Need help? Contact support",
      "support.href": "mailto:billing@example.com",
    },
    response: {
      format: "pdf",
      type: "url",
      fileName: "invoice-acme-0042",
    },
  }),
});

Example: Certificate with Verification#

JavaScript

const certId = "CERT-2026-001";

await fetch("https://api.orshot.com/v1/studio/render", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <YOUR_API_KEY>",
  },
  body: JSON.stringify({
    templateId: "<CERTIFICATE_TEMPLATE>",
    modifications: {
      recipient: "Jane Smith",
      course: "Data Science Bootcamp",
      verify_link: "Verify this certificate",
      "verify_link.href": `https://example.com/verify/${certId}`,
    },
    response: {
      format: "pdf",
      type: "url",
    },
    pdfOptions: {
      dpi: 300,
    },
  }),
});

Only text and image elements support .href. Shape elements do not support clickable links.

←

What PDF options can I control?

How do I generate a multi-page PDF?

→

Was this page helpful?

Ready to automate?

Start rendering images, PDFs and videos from your templates in under 2 minutes. Free plan, no credit card.

Get your API key

Image, PDF and video generation via API
Visual editor with AI and smart layouts
Zapier, Make, MCP and 50+ integrations
White-label embed for your own app
100 free credits a month, no credit card required