Skip to main content
PDF4me APIIntegrationsKnowledge BaseExtensionsAPI TesterBlog

Insert HTML - Rich Content Guide

PDF4me's document generation engine supports direct HTML insertion within Word templates, enabling you to add richly formatted content, complex text styling, and structured HTML content dynamically. This capability is particularly useful when your data source contains pre-formatted HTML content.

HTML Insertion Syntax​

Insert HTML content using the -html switch with your merge field:

<<[token] -html>>

The -html switch instructs the template engine to parse the field value as HTML and render it with appropriate formatting in the generated document.

Basic HTML Insertion​

Simple Formatted Text​

Data Source:

{
  "apicalls": "<b>PDF4me's API Calls or Automation calls</b> is the fuel for creating robust and powerful workflows to automate your document jobs. It lets you smoothly access various document generation and management features provided by PDF4me."
}

Template Syntax:

<<[apicalls] -html>>

Generated Output: The text will appear with "PDF4me's API Calls or Automation calls" in bold, followed by the rest of the text in regular formatting.

Supported HTML Elements​

PDF4me's HTML rendering supports common HTML formatting tags:

Text Formatting Tags​

Bold Text:

<b>Bold text</b>
<strong>Strong text</strong>

Italic Text:

<i>Italic text</i>
<em>Emphasized text</em>

Underline:

<u>Underlined text</u>

Strikethrough:

<s>Strikethrough text</s>
<del>Deleted text</del>

Structural Elements​

Paragraphs:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Line Breaks:

Line one<br>Line two<br>Line three

Headings:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Lists​

Unordered Lists:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Ordered Lists:

<ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

Text Styling​

Font Color:

<span style="color: red;">Red text</span>
<span style="color: #0000FF;">Blue text</span>

Font Size:

<span style="font-size: 14pt;">Larger text</span>
<span style="font-size: 10pt;">Smaller text</span>

Font Family:

<span style="font-family: Arial;">Arial text</span>
<span style="font-family: 'Times New Roman';">Times text</span>

Practical Examples​

Example 1: Formatted Product Description​

Data:

{
  "productDescription": "<h2>Premium Laptop Pro</h2><p><b>Features:</b></p><ul><li>Intel Core i9 Processor</li><li>32GB RAM</li><li>1TB SSD Storage</li><li>15.6\" 4K Display</li></ul><p><i>Perfect for professionals and power users.</i></p>"
}

Template:

Product Details:
<<[productDescription] -html>>

Example 2: Terms and Conditions​

Data:

{
  "terms": "<h3>Terms and Conditions</h3><ol><li><b>Payment:</b> Payment due within 30 days of invoice date.</li><li><b>Warranty:</b> Limited 1-year warranty on all products.</li><li><b>Returns:</b> Returns accepted within <u>14 days</u> of purchase.</li></ol><p><i>For complete terms, visit our website.</i></p>"
}

Template:

<<[terms] -html>>

Example 3: Formatted Announcement​

Data:

{
  "announcement": "<div style='text-align: center;'><h1 style='color: #0066CC;'>Important Notice</h1><p><b>System Maintenance Scheduled</b></p><p>Our systems will undergo maintenance on <u>January 15, 2024</u> from <b>2:00 AM to 6:00 AM EST</b>.</p><p><i>We apologize for any inconvenience.</i></p></div>"
}

Template:

<<[announcement] -html>>

Combining HTML with Template Logic​

Integrate HTML insertion with foreach loops and conditional statements.

HTML Content in Lists​

Template:

<<foreach [section in sections]>>
<<[section.htmlContent] -html>>

<</foreach>>

Data:

{
  "sections": [
    {
      "htmlContent": "<h3>Section 1</h3><p>Content with <b>bold</b> and <i>italic</i> text.</p>"
    },
    {
      "htmlContent": "<h3>Section 2</h3><ul><li>Point A</li><li>Point B</li></ul>"
    }
  ]
}

Conditional HTML Display​

Template:

<<if [hasWarning]>>
<<[warningHtml] -html>>
<</if>>

<<[mainContent] -html>>

Data:

{
  "hasWarning": true,
  "warningHtml": "<div style='background-color: #FFF3CD; padding: 10px; border: 1px solid #FFC107;'><b>⚠ Warning:</b> Please review all terms carefully before proceeding.</div>",
  "mainContent": "<p>Your contract details are listed below...</p>"
}

HTML Tables​

Insert complete HTML table structures for complex data presentations.

Example: HTML Table​

Data:

{
  "salesTable": "<table border='1' cellpadding='5' cellspacing='0'><tr><th>Product</th><th>Units Sold</th><th>Revenue</th></tr><tr><td>Product A</td><td>150</td><td>$15,000</td></tr><tr><td>Product B</td><td>230</td><td>$23,000</td></tr><tr><td><b>Total</b></td><td><b>380</b></td><td><b>$38,000</b></td></tr></table>"
}

Template:

Sales Summary:
<<[salesTable] -html>>

Mixed Content Documents​

Combine standard merge fields with HTML content for flexible document generation.

Example: Mixed Format Report​

Template:

Report Title: <<[reportTitle]:caps>>
Generated: <<[generatedDate]:"MMMM dd, yyyy">>

Executive Summary:
<<[executiveSummary] -html>>

Details:
<<foreach [item in items]>>
• <<[item.name]>> - <<[item.status]>>
<</foreach>>

Conclusion:
<<[conclusion] -html>>

HTML Formatting Best Practices​

HTML Content Guidelines​

  1. Valid HTML - Use well-formed, valid HTML markup
  2. Inline styles - Prefer inline CSS styles over external stylesheets
  3. Simple structures - Keep HTML structures reasonably simple
  4. Test rendering - Test how different HTML renders in output documents
  5. Escape special chars - Properly escape quotes and special characters in HTML

Styling Recommendations​

  1. Basic formatting - Stick to basic HTML formatting tags
  2. Avoid complex CSS - Complex CSS may not render as expected
  3. Font compatibility - Use widely available font families
  4. Color codes - Use hex color codes (#RRGGBB) for consistency
  5. Size units - Use pt (points) for font sizes

Security Considerations​

When accepting HTML from external sources:

  1. Sanitize input - Clean potentially malicious HTML
  2. Validate structure - Verify HTML is well-formed
  3. Limit tags - Consider restricting allowed HTML tags
  4. Escape user input - Properly escape user-generated content
  5. Test output - Review generated documents for unexpected content

HTML vs. Template Formatting​

When to Use HTML Insertion​

Use HTML when:

  • Content comes from WYSIWYG editors
  • Complex formatting is required
  • Content includes tables, lists, and mixed formatting
  • Preserving rich text from external sources

Use Template Formatting when:

  • Simple text formatting is sufficient
  • Working with structured data
  • Maximum control over output formatting
  • Performance is critical

Limitations and Considerations​

Rendering Limitations​

  1. CSS support - Limited CSS support; inline styles work best
  2. Complex layouts - Very complex HTML may not render perfectly
  3. JavaScript - JavaScript in HTML is not executed
  4. External resources - External CSS/images may not load
  5. Browser-specific features - Advanced HTML5 features may not be supported

Performance​

  1. Processing time - HTML parsing adds processing overhead
  2. Large content - Very large HTML strings may impact performance
  3. Multiple instances - Many HTML insertions may slow generation

Complete Example: Newsletter Template​

Template:

<<[companyName]:upper>> Newsletter - <<[issueDate]:"MMMM yyyy">>

<<[headerHtml] -html>>

Articles:
<<foreach [article in articles]>>
<<[article.contentHtml] -html>>
---
<</foreach>>

<<[footerHtml] -html>>

Data:

{
  "companyName": "Tech Innovations Inc.",
  "issueDate": "2024/01/01",
  "headerHtml": "<div style='background-color: #4A90E2; color: white; padding: 20px; text-align: center;'><h1>Monthly Tech Update</h1><p>Your source for the latest technology news</p></div>",
  "articles": [
    {
      "contentHtml": "<h3>New Product Launch</h3><p>We're excited to announce our <b>latest innovation</b> in cloud computing. <a href='https://example.com/product'>Learn more</a></p>"
    },
    {
      "contentHtml": "<h3>Industry Insights</h3><p>Recent studies show that <i>automation</i> is transforming the workplace. Here's what you need to know:</p><ul><li>Increased efficiency</li><li>Cost savings</li><li>Better accuracy</li></ul>"
    }
  ],
  "footerHtml": "<p style='font-size: 10pt; color: #666;'><i>© 2024 Tech Innovations Inc. All rights reserved.</i></p>"
}
HTML Testing

Always test HTML insertion with sample data to verify rendering appears as expected. Different document formats (Word, PDF) may render HTML slightly differently.

HTML Complexity

Keep HTML content reasonably simple for best results. Very complex HTML structures with advanced CSS may not render perfectly in all output formats.