simplepdf.github.io/index.html at main · SimplePDF/simplepdf.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet" />
    <link rel="shortcut icon" type="image/png" href="favicon-32x32.png" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Embed a JS PDF editor, filler & annotator in your website</title>
    <meta httpEquiv="content-language" content="en"></meta>
    <meta name="description" content="Enable your website visitors to fill, annotate, merge and edit PDF files without leaving your website. Use the iframe, Javascript script or React component." />
    <meta content="Embed a JS PDF editor, filler & annotator in your website" property="og:title" />
    <meta content="Enable your website visitors to fill, annotate, merge and edit PDF files without leaving your website. PDFTron, PDF.JS Express PDF-Tools and PSPDFKit alternative." property="og:description" />
    <meta content="https://simplepdf.github.io" property="og:url" />
    <meta content="https://cdn.simplepdf.com/simple-pdf/assets/meta/simplepdf-embed-pdf-editor.png" property="og:image" />
    <meta content="summary_large_image" name="twitter:card" />
    <meta content="Embed a JS PDF editor, filler & annotator in your website" property="twitter:title" />
    <meta content="Enable your website visitors to fill, annotate, merge and edit PDF files without leaving your website. Use the iframe, Javascript script or React component." property="twitter:description" />
    <meta content="https://cdn.simplepdf.com/simple-pdf/assets/meta/simplepdf-embed-pdf-editor.png" property="twitter:image" />
    <meta content="@simple_pdf" property="twitter:creator" />
    <script>
      const logStyles = [
        "color: #fff",
        "background-color: #444",
        "padding: 2px 4px",
        "border-radius: 2px"
      ].join(";");
    </script>
    <script>
      async function sendMessage() {
        // Head over here for the Iframe documentation:
        // https://github.com/SimplePDF/simplepdf-embed/blob/main/documentation/IFRAME.md
        const editor = document.getElementById("simplepdf");
        const button = document.getElementById("button");

        const response = await fetch("./pdf_form_example.pdf");
        const blob = await response.blob();
        const reader = new FileReader();
        await new Promise((resolve, reject) => {
          reader.onload = resolve;
          reader.onerror = reject;
          reader.readAsDataURL(blob);
        });

        editor.contentWindow.postMessage(
          JSON.stringify({
            type: "LOAD_DOCUMENT",
            data: { data_url: reader.result, name: 'fw8ben.pdf' },
          }),
          "*"
        );

        button.style.display = 'none';
      }
    </script>
  </head>
  <body>
    <div class="github-star-container">
      <iframe
        src="https://ghbtns.com/github-btn.html?user=SimplePDF&repo=simplepdf-embed&type=star&count=true&size=large"
        frameborder="0"
        scrolling="0"
        width="150"
        height="30"
        title="GitHub"
      ></iframe>
    </div>
    <div class="title-container">
      <h1>SimplePDF Embed</h1>
    </div>
    <div class="subtitle-container">
      <h2>Fill & Sign PDF with a <u>single</u> line of code</h2>
    </div>
    <div class="offerings">
      <p class="cta">
        <a href="https://simplepdf.com/embed#ghio" class="create-account"><b>Add to your website</b></a>
      </p>
      <ul class="bullet-points">
        <li><a href="https://simplepdf.com/portal#ghio" target="_blank">PDFs to web forms in minutes</a></li>
        <li>
          <a href="https://simplepdf.com/help/how-to/use-your-own-s3-bucket-storage-for-pdf-form-submissions#ghio" target="_blank"
            >Use your own storage</a
          >
        </li>
        <li>
          <a href="https://simplepdf.com/help/how-to/configure-webhooks-pdf-form-submissions#ghio"
            >Get notified via webhooks</a
          >
        </li>
      </ul>
    </div>
    <h3 class="interactive-demo-title">Interactive demo<button id="button" onclick="sendMessage()">Try with a fillable form</button></h3>
    <p class="google-sheet-disclaimer">The submitted document can be seen <a href="https://webhooks.simplepdf.com/" target="_blank">on this website</a></p>

    <div class="iframe-wrapper">
      <iframe
      class="iframe"
      id="simplepdf"
      src="https://webhooks-playground.simplepdf.com/editor?open=https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
    ></iframe>
  </div>
  </body>
</html>