How do I insert a scrollable PDF into a question block? | XM Community
Question

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

  • 4 October 2021
  • 10 replies
  • 2440 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!

10 replies

C
Rank
Badge +8

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
Badge 
 

<!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
Rank
Userlevel 3
Badge +11

This seems interesting! Thanks @FyreRayne 

D
Rank
Badge +5

@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
Badge

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

A
Rank
Userlevel 7
Badge +21

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
Badge

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
Rank
Userlevel 5
Badge +19

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

S
Badge 
<!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
Badge +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>

Leave a Reply


Terms & Conditions