Dashboard

Manage your PDF rendering integration

Upgrade Plan

API Key

Your API key for authenticating requests to the PDF rendering service

Basic Plan

No API key available on the basic plan

Upgrade to Standard or Pro to access API features

Upgrade Now

Integration Guide

Follow these steps to integrate PDF-render.js into your website

Add PDF-render.js to your Wix site

Go to your Wix editor and add a new HTML element to your page.

<script src="https://pdf-renderjs.pages.dev/pdf-render.js"></script>

Create a canvas element

Add a canvas element where you want the PDF to be displayed.

<canvas id="pdfCanvas"></canvas>

Initialize the renderer

Add JavaScript code to initialize and render your PDF.

                                        const renderer = new PDFRenderer({
  canvas: document.getElementById('pdfCanvas'),
  scale: 1.5
});

renderer.loadDocument('your-pdf-url.pdf')
  .then(() => renderer.renderPage(1));
                                    

Test your integration

Preview your Wix site to ensure the PDF renders correctly. Make sure your PDF file is publicly accessible.

Enable Code Injection

Go to Settings > Advanced > Code Injection and add the PDF-render.js script to the header.

<script src="https://pdf-renderjs.pages.dev/pdf-render.js"></script>

Add a Code Block

Add a Code Block to your page where you want the PDF to appear.

                                        <canvas id="pdfCanvas"></canvas>
<script>
  const renderer = new PDFRenderer({
    canvas: document.getElementById('pdfCanvas'),
    scale: 1.5
  });
  
  renderer.loadDocument('your-pdf-url.pdf')
    .then(() => renderer.renderPage(1));
</script>
                                    

Upload your PDF

Upload your PDF file to Squarespace and use the file URL in your code. Make sure the file is set to public access.

Test and publish

Preview your page to test the integration, then publish when ready.

Install PDF-render.js

Add the PDF-render.js script to your WordPress site's header using a plugin like "Insert Headers and Footers".

<script src="https://pdf-renderjs.pages.dev/pdf-render.js"></script>

Add HTML Widget

In Elementor editor, drag an HTML Widget to your page and add the following code:

                                        <canvas id="pdfCanvas"></canvas>
<script>
  const renderer = new PDFRenderer({
    canvas: document.getElementById('pdfCanvas'),
    scale: 1.5
  });
  
  renderer.loadDocument('your-pdf-url.pdf')
    .then(() => renderer.renderPage(1));
</script>
                                    

Upload PDF to Media Library

Upload your PDF to WordPress Media Library and copy the file URL to use in your integration code.

Customize styling

Use Elementor's styling options to customize the appearance of your PDF viewer container.

Include PDF.js and PDF-render.js

Add the required scripts to your HTML file's head section.

                                        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="pdf-render.js"></script>
                                    

Create canvas element

Add a canvas element to your HTML where the PDF will be rendered.

<canvas id="pdfCanvas"></canvas>

Initialize and render

Add JavaScript to initialize the renderer and load your PDF.

                                        <script>
  const renderer = new PDFRenderer({
    canvas: document.getElementById('pdfCanvas'),
    scale: 1.5
  });
  
  renderer.loadDocument('your-pdf.pdf')
    .then(() => renderer.renderPage(1))
    .catch(error => console.error('Error:', error));
</script>
                                    

Add annotations (optional)

Enhance your PDF with annotations like highlights, text notes, and signatures.

                                        // Add highlight
renderer.addHighlight(1, {
  x: 100, y: 200, width: 200, height: 50
}, '#ffff00');

// Add text annotation
renderer.addTextAnnotation(1, {
  x: 100, y: 300
}, 'Important note', '#ff0000');

// Re-render to show annotations
renderer.renderPage(1);
                                    

Complete example

Here's a complete working example with all features:

                                        <!DOCTYPE html>
<html>
<head>
  <script src="pdf.min.js"></script>
  <script src="pdf-render.js"></script>
</head>
<body>
  <canvas id="pdfCanvas"></canvas>
  
  <script>
    const renderer = new PDFRenderer({
      canvas: document.getElementById('pdfCanvas'),
      scale: 1.5
    });
    
    renderer.loadDocument('document.pdf')
      .then(() => {
        renderer.renderPage(1);
        renderer.addHighlight(1, {
          x: 50, y: 100, width: 150, height: 30
        }, '#ffff00');
        renderer.renderPage(1);
      });
  </script>
</body>
</html>
                                    