Loading message | XM Community
Skip to main content
Question

Loading message

  • October 9, 2024
  • 1 reply
  • 48 views
Z
Forum|alt.badge.img+1

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. 

    1 reply

    Deepak
    QPN Level 8 ●●●●●●●●
    Forum|alt.badge.img+46
    • Deepak
    • October 11, 2024

    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>

     

    Terms & ConditionsAccessibility statement