Embed a PDF in WordPress, Wix, Squarespace and other website builders

Most website builders have an element for your own HTML code. Paste the complete Viewnamic embed code there – in WordPress, that is the Custom HTML block. If your builder only accepts a web address, use Copy URL in the embed window instead.

Step by step

1. In the Workspace, open the project’s ⋯ menu, choose Embed and click Copy embed code. The options are explained in Embed a PDF on your website.
2. Open the page in your website builder and add an element for HTML code (see below).
3. Paste the whole code into the element without shortening it.
4. Save or publish the page, then open it on a computer and on a phone.

Where to paste the code

The names differ between builders and versions. Look for an element called HTML, Code or Embed.

• WordPress: the block Custom HTML. In page builders such as Elementor, the HTML widget.
• Wix: an embed element for HTML code.
• Squarespace: a Code block.
• Webflow: a Code Embed element.
• Jimdo: the element Widget/HTML.
• Shopify: the HTML view of the page editor, or a Custom Liquid section in the theme editor.

When your builder uses a frame of its own

Some builders, Wix for example, show custom code inside a frame of their own. The PDF works there, but the height is set by the builder’s element: make it tall enough for the PDF. SEO for your website does not help in this case, because the text stays inside that frame (SEO for your website).

When only a web address is accepted

Some elements, for example an iframe element or “embed a website”, ask only for an address.

1. In the embed window, set the options you want and click Copy URL.
2. Paste the address into the element and give the element a height, for example 600 pixels.

With the address alone, the height does not follow the PDF, and the line below the PDF and the text for search engines are missing. Use the full embed code where you can.

When the builder removes scripts

Some systems remove scripts from pasted code, for example for certain user roles. An Auto fit embed then appears in a square frame that does not follow the page format. Choose Fill parent instead and place the code in an element with a fixed height, or ask the administrator of the website to allow the code.

Fullscreen on phones

iPhones have no fullscreen mode for parts of a web page. With the Auto fit code placed directly in your page, the embed covers the whole screen when a reader taps fullscreen, and goes back to its place afterwards. With Fill parent, with an address-only frame or inside a builder’s own frame, the fullscreen button opens the publication in a new tab at the same page. On computers and Android devices, the embed code uses the browser’s fullscreen; a frame that does not allow fullscreen opens a new tab there too.

If your website has strict security settings for content from other websites, viewnamic.com must be allowed there. Otherwise the area of the PDF stays empty.