Skip to main content
You can embed a PDF directly into your Weavely form, allowing users to view documents like product specs, guides, or legal disclaimers without leaving the form experience. This tutorial walks you through embedding a PDF from Google Drive and optimizing how it’s displayed in your form.

Upload the PDF to Google Drive

If you haven’t already, upload your PDF to Google Drive. Open the PDF by double-clicking and select **“Open in new tab” **from the three-dot menu. Within this new tab, click the three-dot menu (it’s weird we know) and choose “Embed item”.Animated screenshot showing how to get an embeddable iframe code from a PDF hosted on Google DriveCopy the HTML <iframe> code provided by Google, which we’ll use in the next step.
Make sure the sharing permissions are set to “Anyone with the link can view”. Without this, the embed will not load in your form.

Embed in Weavely

In your Weavely form, add an Embed HTML element. Open the element’s settings pane and copy-paste the <iframe> code from the first step. Once published, your PDF will appear directly inside the form, and users can preview it without leaving the page. They can also click the pop-out button in the PDF viewer to open it full screen.Animated screenshot showing how to embed a PDF into a Weavely AI form
We suggest you set both the width and height in the <iframe> code to 100% to ensure it fills the container.

Improve the PDF Display

If the embedded PDF appears too small or scroll-heavy, you can adjust the layout. Go to the Theme Editor in Weavely. Under Advanced Settings, increase the Form Width to give the PDF more space and add the following Custom CSS to adjust the aspect ratio:
.embed-html {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: var(--surface-color);
    overflow: auto;
}
Animated screenshot showing how to change the appearance of an embedded pdf in Weavely AI