Loading message | XM Community
Skip to main content

Hi all,

 

When the Qualtrics survey loads with SSO, it takes some time to get the handshake going but you can see there’s something happening in the URL. However, when I embed the survey in an iframe, users don’t see the URL, so basically they’re staring at a white something for a while. With today’s attention span, it looks the page is broken. 

My question is: is there a way to display a graphic or anything while the single sign on is happening? Either out of the box or adding jQuery or any way show that the page is not broken? 

P.S. I don’t create the HTML page parent for the iframe, it’s out of my control. I only provide the iframe code. 

Try something on these lines where you update the URL in code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey with Loader</title>
    <style>
        /* Styles for the loading graphic */
        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 80px;
            height: 80px;
            animation: spin 2s linear infinite;
            margin: 20px auto;
        }
        /* Animation for the spinner */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Hide iframe until loaded */
        iframe {
            display: none;
            width: 100%;
            height: 600px;
        }
        /* Center the loader */
        .center {
            text-align: center;
            padding: 50px;
        }
    </style>
</head>
<body>
<div class="center" id="loading">
    <div class="loader"></div>
    <p>Loading, please wait...</p>
</div>
<iframe id="surveyIframe" src="YOUR_SURVEY_URL_HERE" frameborder="0"></iframe>
<script>
    var iframe = document.getElementById('surveyIframe');
    var loader = document.getElementById('loading');
    iframe.onload = function() {
        // Hide loader and show iframe when the survey has fully loaded
        loader.style.display = 'none';
        iframe.style.display = 'block';
    };
</script>
</body>
</html>

 

Leave a Reply


Terms & Conditions