Hello,
I'm interested in working on a survey in Qualtrics CX to get feedback on an existing website. We do not currently subscribe to Qualtrics' Website/App Feedback product, so I'm wondering if there's a way to embed a webpage in some sort of i-frame in the survey that respondents can interact with?
I was thinking of having respondents click on the link to the website and set the "target" to a new window, but then I'm relying on respondents to actually go back into the survey and answer questions - and I'm not sure that would work out as we'd hope.
Is there such a capability? Maybe a custom Javascript?
The other option would be to only use static images, but what I explained above would be much more useful. Interested to hear any and all options!
Thank you.
A
Hello @bridget ,
You can use below code in your website
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div style="width:inherit;height:90%" id="ex1" class="modal">
<iframe style="width:inherit;height:inherit;"allowfullscreen src="YOUR_WEBSITE_URL"></iframe>
<a href="#" rel="modal:close">Close</a>
</div>
<!-- Link to open the modal -->
<p><a href="#ex1" rel="modal:open">Visit website</a></p>
See the demo here
You can use below code in your website
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div style="width:inherit;height:90%" id="ex1" class="modal">
<iframe style="width:inherit;height:inherit;"allowfullscreen src="YOUR_WEBSITE_URL"></iframe>
<a href="#" rel="modal:close">Close</a>
</div>
<!-- Link to open the modal -->
<p><a href="#ex1" rel="modal:open">Visit website</a></p>
See the demo here
+3
Hi Shashi,
Appreciate the response, but I'm looking for the opposite. I want to embed the website into my Qualtrics survey.
Appreciate the response, but I'm looking for the opposite. I want to embed the website into my Qualtrics survey.
A
> @bridget said:
> Hi Shashi,
>
> Appreciate the response, but I'm looking for the opposite. I want to embed the website into my Qualtrics survey.
If you want your respondent can visit the website anytime in the survey then you can paste the code(updated) in the look and Feel -> Advanced -> header -> source (<>) , with src="YOUR_WEBSITE_URL"
Another Method:
Add below code in the header or footer(as per your requirement) of the advanced option in look and feel
` <a href="WEBSITE_URL" target="_blank">Visit Website</a>`
I think the above method is ideal
> Hi Shashi,
>
> Appreciate the response, but I'm looking for the opposite. I want to embed the website into my Qualtrics survey.
If you want your respondent can visit the website anytime in the survey then you can paste the code(updated) in the look and Feel -> Advanced -> header -> source (<>) , with src="YOUR_WEBSITE_URL"
Another Method:
Add below code in the header or footer(as per your requirement) of the advanced option in look and feel
` <a href="WEBSITE_URL" target="_blank">Visit Website</a>`
I think the above method is ideal
+3
Great to hear that's a capability if I ever need it, and appreciate your time. However, an i-frame (inline frame) isn't a link. An i-frame is used to embed an interactive application within a webpage. So you have the ability to interact with it (scroll, click around, etc.) See link here for an example: http://bcmoney-mobiletv.com/blog/wp-content/uploads/2012/03/iframeeg19.png
A
Hello @bridget ,
Paste the following code in the js(onLoad) of that question where you want to show your website:
jQuery("#Header").html('<iframe allowfullscreen="" src="YOUR_WEBSITE_URL" style="width:100%;height:100vh;"></iframe>');
Paste the following code in the js(onLoad) of that question where you want to show your website:
jQuery("#Header").html('<iframe allowfullscreen="" src="YOUR_WEBSITE_URL" style="width:100%;height:100vh;"></iframe>');
Instead of insert in the head or foot, any possible to insert the