How do I insert a scrollable PDF into a question block? | Experience Community
Skip to main content
Solved

How do I insert a scrollable PDF into a question block?

  • October 4, 2021
  • 13 replies
  • 7740 views
S

Hi all,
I'm trying to insert a consent form (PDF) into a survey and I was wondering if there was any way that I could make it so that the survey as a whole shows up on one question block as a scrollable PDF instead of a link that leads to the form? They don't need to be able to click/edit it, just scroll through it.
I've tried inserting it as PDF, picture, and as an RTF file to no avail.
Thank you!

Best answer by Yichuan Yan

Hi, Shivam and all,

I tried a few things out and finally got it work to display my PDF in the survey with a much simpler code as follows:

<iframe width="1200" src="URL of your pdf file" height="750"></iframe>

Based on StudentUser612’s instruction above, I found the tricky part is the “URL of your PDF file.” To get the correct URL of your PDF, you need to upload your file to Qualtrics library first. Select that file and hit “view.” It will open the file in a new tab or window. The first time I tried it, I just copied the entire URL from the browser and it didn’t work. What you need is the URL starts with “http://xyz.qualtrics.com/abc...” See the screenshot below. Copy the correct URL and replace the “URL of your pdf file” in the code. 

Now, you can change the numbers to fit the PDF in your survey. I set the width to 1200 and height to 750, which looks great on a 28” screen. So you just need to try it out the numbers to align with your needs. Good luck. 

    13 replies

    C
    Level 2 ●●
    Forum|alt.badge.img+8
    • ChiragK
    • Level 2 ●●
    • October 5, 2021

    Hello, You can add below HTML code into your question text using rich content editor, change the iframe src url with your own PDF file url and it should work.


    F
    Forum|alt.badge.img
    • FyreRayne
    • June 11, 2023
     

    <!DOCTYPE html> <html> <head> <style> #pdfContainer { width: 100%; height: 500px; /* Adjust the height as per your requirements */ overflow: auto; } #pdfContent { width: 100%; height: 100%; } </style> </head> <body> <div id="pdfContainer"> <iframe id="pdfContent" src="path_to_your_pdf_file.pdf"></iframe> </div> </body> </html>

     

     

    In the code above, you need to replace "path_to_your_pdf_file.pdf" with the actual path or URL of the PDF file you want to display. Make sure the PDF file is accessible and hosted on a server.

    Save the code in an HTML file (e.g., scrollable_pdf.html) and upload it to your library as an HTML page. Then, you can use the  Text/Graphic question type to insert the HTML page into your survey.

    Umang Upadhyay
    QPN Level 4 ●●●●
    Forum|alt.badge.img+31
    • Umang Upadhyay
    • QPN Level 4 ●●●●
    • January 10, 2024

    This seems interesting! Thanks @FyreRayne 

    D
    Level 1 ●
    Forum|alt.badge.img+5
    • Duhr
    • Level 1 ●
    • January 22, 2024

    @FyreRayne 

     

    Do you upload to the library as a “file”

    When I do that I’m not seeing it listed when trying to insert it into the question. I can only seem to insert it as a downloadable file. Any ideas how to resolve this? Thank you!

    J
    Forum|alt.badge.img
    • jeevus
    • March 6, 2024

    @FyreRayne yeah I’m facing the same doubt as @Duhr above. Any ideas how we should attach the html to make it scrollable?

    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • March 6, 2024

    Embedding the PDF requires custom code, i.e. editing the HTML of the question. It won’t be available as an option via the editor. When you click to edit a question text, you’ll see two options on the right, click the one that says HTML, then paste the code mentioned above.

    You can upload it to the library, however, that is not required, any publically accessible PDF link should be fine.

     

    J
    Forum|alt.badge.img
    • jeevus
    • March 6, 2024

    Oh I see. Thanks for the clarification!

     

    I used a shareable public google drive link to the pdf but this doesnt seem to work. A google drive page is displayed instead and it asks me if I want to open the document directly. Seems like I need to host the PDF elsewhere.

    Thanks for the advice tho !

    Swanand_Chavan_Ugam
    QPN Level 5 ●●●●●
    Forum|alt.badge.img+26

    Thanks @FyreRayne  and @ahmedA for your responses, really helpful 

    S
    Forum|alt.badge.img
    <!DOCTYPE html> <html> <head> <style> #pdfContainer { width: 100%; height: 500px; /* Adjust the height as per your requirements */ overflow: auto; } #pdfContent { width: 100%; height: 100%; } </style> </head> <body> <div id="pdfContainer"> <iframe id="pdfContent" src="path_to_your_pdf_file.pdf"></iframe> </div> </body> </html>

     

     

    This code is useful

    Unfortunately the explanation on how to insert it was either incorrect or confusing

    1. Upload your pdf to the library (if its a word doc, you have to “print as a pdf” or save it as a pdf before uploading it to the library)
    2. Click on the file after its uploaded to the library and copy the URL for the file from qualtrics’ library (don’t save it to google drive or somewhere else)
    3. Insert that qualtrics library URL of your pdf into the above formula exactly where it says "path_to_your_pdf_file.pdf" making sure to delete the “ “ as well.
    4. Copy that entire code with your correct pdf link inserted and create a new question. It can be multiple choice or whatever if for example you need them to accept a consent.
    5. To the far right of the question creation box you should see 2 tabs: “html view” and “normal view”. Select html view and paste your code.
    6. Now you have your inserted, scrollable pdf
      S
      Forum|alt.badge.img+1

      Hello. Thank you so much I was able to embed the PDF in my survey. However it is not displayed as full size. Is there a way I can increase the width and height of the PDF.

      I am using this code

      <!DOCTYPE html> <html> <head> <style> #pdfContainer { width: 100%; height: 500px; /* Adjust the height as per your requirements */ overflow: auto; } #pdfContent { width: 100%; height: 100%; } </style> </head> <body> <div id="pdfContainer"> <iframe id="pdfContent" src="path_to_your_pdf_file.pdf"></iframe> </div> </body> </html>

      Y
      Forum|alt.badge.img+1
      • Yichuan Yan
      • Answer
      • August 16, 2024

      Hi, Shivam and all,

      I tried a few things out and finally got it work to display my PDF in the survey with a much simpler code as follows:

      <iframe width="1200" src="URL of your pdf file" height="750"></iframe>

      Based on StudentUser612’s instruction above, I found the tricky part is the “URL of your PDF file.” To get the correct URL of your PDF, you need to upload your file to Qualtrics library first. Select that file and hit “view.” It will open the file in a new tab or window. The first time I tried it, I just copied the entire URL from the browser and it didn’t work. What you need is the URL starts with “http://xyz.qualtrics.com/abc...” See the screenshot below. Copy the correct URL and replace the “URL of your pdf file” in the code. 

      Now, you can change the numbers to fit the PDF in your survey. I set the width to 1200 and height to 750, which looks great on a 28” screen. So you just need to try it out the numbers to align with your needs. Good luck. 

        S
        Forum|alt.badge.img
        • ss2571
        • August 20, 2024

        Hi, Shivam and all,

        I tried a few things out and finally got it work to display my PDF in the survey with a much simpler code as follows:

        <iframe width="1200" src="URL of your pdf file" height="750"></iframe>

        Based on StudentUser612’s instruction above, I found the tricky part is the “URL of your PDF file.” To get the correct URL of your PDF, you need to upload your file to Qualtrics library first. Select that file and hit “view.” It will open the file in a new tab or window. The first time I tried it, I just copied the entire URL from the browser and it didn’t work. What you need is the URL starts with “http://xyz.qualtrics.com/abc...” See the screenshot below. Copy the correct URL and replace the “URL of your pdf file” in the code. 

        Now, you can change the numbers to fit the PDF in your survey. I set the width to 1200 and height to 750, which looks great on a 28” screen. So you just need to try it out the numbers to align with your needs. Good luck. 

        Hey! This worked beautifully! Thank you!

          B
          Forum|alt.badge.img+1
          • ByronK
          • September 26, 2024

          Thank you @Yichuan Yan!! This worked well for me too - but I’m trying to optimise this for mobile (and other screen size adjustments).

          Currently I have:

          <iframe height="1125" src="pdf file" width="100%"></iframe>

          100% for the iframe width worked well to adjust for web and mobile (and all), but I want to have a responsive height so the mobile view isn’t a fixed height - I’m very new to css so I’m hoping there’s an easy solution!

           

           

          Ideally I’d like the iframe to adjust dynamically as images and text appear to do automatically in qualtrics).

          Thanks for any help!


           

          Terms & ConditionsAccessibility statement