Creating Decision Letters with Slate AI

HTML/CSS v2 decision letters are rendered by a headless browser. This gives you more control over the web and printed versions of a decision letter, but the legacy /apply/decision.pdf wrapper does not control HTML/CSS v2 output.

Use print media queries to keep the browser version unchanged while adding print-only elements such as a header, address block, footer, or letterhead margins.

Printed decision letter preview with full-width header and footer bars.

⭐ Get Inspired

This article was adapted from a post by Technolutions staff in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? Let us know!

Before you begin

📝 Note
Make and test these changes in a test environment before you update a production decision letter.

Confirm that the letter template uses HTML/CSS v2 (full) for PDF output.
Identify the image path, merge fields, and Liquid Markup that the printed version needs.
Preview both the web version and the printed version after each meaningful change.

For broader decision letter printing setup, see Download and Print Decision Letters.

Understanding the print problem

In this example, the browser version of the decision letter includes the preferred name from the MergePublic query and appears correctly in the application portal.

An original decision letter in a web browser congratulating the student on admission.

The downloaded or printed version does not include the visual treatment, logo, or address block that the office wants for printed letters.

The original decision letter rendered as a PDF without logos or visual formatting.

Prompting Slate AI for print-only elements

After opening the decision letter for editing, open the Slate AI pane and describe the print-only changes. Be specific about the output medium, the elements to add, and the merge fields that the printed version should use.

I have a decision letter that is currently formatted for the web. Add media queries so the web version stays the same, but the printed version includes the following print-only elements:

- A header with the image /shared/slate-university.svg.
- A left-aligned address block in this format:
  {{name}}
  {{address_street1}}
  {{address_city}}, {{address_region}} {{address_postal}}

Slate AI pane next to the Edit Decision Letter modal.

After Slate AI updates the letter, preview the browser version first. The browser preview should remain unchanged if the new elements are limited to the print medium.

An original decision letter in a web browser congratulating the student on admission.

Then preview the printed version. The print preview should include the header and address block.

Printed decision letter preview with a logo header and recipient address block.

Refining the generated draft

Treat the Slate AI response as a draft. Review the output for missing fields, design issues, and assumptions that Slate AI could not know from the original prompt.

Adding missing merge fields

If a field is missing from the print-only content, add it directly or ask Slate AI to revise the draft. In this example, the first prompt included the address fields but did not include the recipient name.

Decision letter markup with the recipient name added above the address fields.

Adjusting the print design

If the printed design needs more styling, ask for concrete changes. Include exact values when they matter, such as colors, dimensions, and footer text.

Update the print styles so the header has a background color of #00669e. Add a small footer with the same background color and this text:

Slate University Admissions
157 Church Street, 22nd Floor
New Haven, CT 06510

After this change, the header and footer may still inherit default print margins from the browser.

Printed decision letter preview with header and footer bars that do not extend across the full page width.

Removing default print margins

Browsers can add default margins when they render printed content. If your header, footer, or other print-only elements should extend to the edge of the page, add print CSS that removes the default body padding and page margins.

My content appears full width on a web page, but it has extra whitespace when printed with a headless Chrome instance. What default print settings should I override with CSS?

Slate AI response recommending print CSS for body and page margins.

The following CSS removes the default body spacing and page margin for printed output:

@media print {
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  @page {
    margin: 0;
  }
}

Reviewing the generated code

Before you use generated code in a production environment, make sure you understand what each part does. Slate AI can draft the HTML and CSS, but your team remains responsible for maintaining the letter template.

In the example output, the important pieces are:

@media print: Applies the enclosed CSS only when the letter is printed or rendered as a PDF.
@page: Controls page-level print formatting, including default page margins.
.print-header, .print-address, and .print-footer: Identify print-only elements.
display: none: Hides the print-only elements outside the print context.
position: fixed: Anchors the footer to the bottom of the printed page.

The following simplified example shows the pattern:

<style type="text/css">
  @media print {
    body {
      margin: 0 !important;
      padding: 0 !important;
    }

    @page {
      margin: 0;
    }

    .print-header {
      display: block !important;
      width: 100%;
      box-sizing: border-box;
      background: #00669e !important;
      padding: 24px 0 16px 0;
    }

    .print-footer {
      display: block !important;
      width: 100%;
      box-sizing: border-box;
      background: #00669e !important;
      color: #ffffff !important;
      font-size: 13px;
      padding: 16px 24px 12px 24px;
      position: fixed;
      bottom: 0;
      left: 0;
    }

    .print-address {
      display: block !important;
      padding: 25px;
      margin-top: 45px;
    }
  }

  .print-header,
  .print-address,
  .print-footer {
    display: none;
  }
</style>

<div class="print-header">
  <img alt="Slate University Logo" src="/shared/slate-university.svg">
</div>

<div class="print-address">
  {{name}}<br>
  {{address_street1}}<br>
  {{address_city}}, {{address_region}} {{address_postal}}
</div>

<main>
  <h1>Congratulations on Your Admission!</h1>
  <p>Dear {{preferred}},</p>
  <p>Your decision letter content appears here.</p>
</main>

<div class="print-footer">
  <strong>Slate University Admissions</strong><br>
  157 Church Street, 22nd Floor<br>
  New Haven, CT 06510
</div>

Formatting for existing letterhead

You can also use Slate AI to adapt a letter for preprinted letterhead. Instead of adding a header and footer, ask Slate AI to remove those elements and apply the margins required by your paper stock.

Remove the header and footer elements from this letter template. Keep the <main> element, but set the printed version to use a top margin of 1.15 inches and a bottom margin of 1 inch.

Slate AI response updating the print layout for letterhead paper with top and bottom margins.

Testing the letter

Before you update a production environment, test the full decision letter workflow:

Preview the letter in the browser.
Preview or download the printed version.
Confirm that merge fields and Liquid Markup resolve as expected.
Check short and long applicant addresses.
Check letters with enough content to create more than one printed page.
Confirm that headers, footers, and margins match your print requirements.

For more information about print CSS, see Using CSS media queries and The @page selector.

Documentation Index