How do I embed a PDF directly in a content block for inline viewing?

Last updated: May 20, 2026

When you want the employee to scroll through the actual PDF on the form — not click out to a link, not read an AI-generated summary — paste an iframe snippet into the Code tab of a content block. The form's mapped PDF is available as {{ input.urls.pdf_url }}.

When to use this pattern

A content block has three options for surfacing a source document. They aren't interchangeable — pick the one that matches what the customer actually wants the employee to read.

  • Embed the PDF inline — the employee scrolls through the source document inside the form and then acknowledges below it. Use this when legal or compliance team has said no summaries and no off-form clicks (handbooks, policy acknowledgments, community benefits summaries, anything the customer wants verbatim).

  • Link out to the PDF — the content block shows a short call to action with a link to the PDF in a new tab. Use this when the PDF is long enough that inline scrolling fights the rest of the form.

  • AI-generated summary — the content block paraphrases the PDF in plain language. Use this when speed-to-acknowledge matters more than verbatim reading, and the customer is comfortable with a summary standing in for the document.

If the form was originally built with an AI summary and you're switching to embed, remove the summary content first. See the warning below.

Steps

  1. Open the form in the editor and click into the content block you want to use for the embed. If you don't have one yet, drag a Content field onto the page first.

  2. Click Edit to open the content editor.

  3. Switch from the Editor tab to the Code tab. This is where raw HTML works.

  4. Paste the snippet below.

<style>
.pdf-container {
  position: relative;
  width: 100%;
  padding-bottom: 129.4%; /* Desktop: Letter size */
  height: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .pdf-container {
    padding-bottom: 177.78%; /* Mobile: more vertical space */
  }
}

.pdf-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="pdf-container">
  <iframe src="{{ input.urls.pdf_url }}#navpanes=0"
          frameborder="0"
          allowfullscreen></iframe>
</div>

{{ input.urls.pdf_url }} is the form's mapped PDF — the one you uploaded when you built the form. You don't need to paste the PDF URL by hand. If you want to embed a different PDF (one not bound to this form), upload it through the asset gallery in the editor and swap {{ input.urls.pdf_url }} for the asset URL the gallery gives you (it'll look like /assets/<id>).

  1. Switch to the Preview tab to confirm the PDF renders inside the block.

  2. Save the content and open the form's preview link. The PDF should render inline, sized to the page, with the reader's sidebar suppressed.

Alternative: link to the PDF instead

If you'd rather link out than embed — the PDF is long, or you're fine with the employee opening it in a new tab — you can do this entirely from the Editor tab without touching code.

  1. In the Editor tab of the content block, type the text you want to make clickable (for example, View the policy document) and select it.

  2. Click the hyperlink button in the toolbar.

  3. Paste {{ input.urls.pdf_url }} into the URL field — the same variable used in the embed snippet above. It resolves at render time to the form's mapped PDF.

  4. Apply the link, then save the content.

The link label can be anything — the variable always points at the form's current PDF, so it survives PDF swaps and version updates without you needing to re-edit the link.

Remove any AI summary content first.

If the form was built with the AI Form Builder, the content block may already contain a generated summary of the PDF. Embedding the iframe without clearing the summary leaves the employee reading both a paraphrase and the source document on the same page — which is usually the exact thing the customer asked you to fix. Clear the block on the Code tab before pasting the embed snippet.

Verify

Open the form's preview link on both desktop and mobile. You should see:

  • The PDF rendered inside the content block, not as a download or external link.

  • No native PDF reader sidebar (the #navpanes=0 fragment suppresses it).

  • The block's height adjusts on mobile so the document is still readable without horizontal scrolling.

If the embed shows up blank, the most common cause is a typo in the variable — {{ input.urls.pdf_url }} needs both braces and the exact path. If the variable is right and the block is still empty, confirm a PDF is actually attached to this form on the PDF mapping page; the variable resolves to nothing if there isn't one.

Related