I’m trying to embed a reddit post in a qualtrics survey question and it doesn’t seem to be working.

I have the following html in the question section:

<p>Please take a look at the following Reddit post:</p>
<div id="embeddedPost">
    <blockquote id="redditBlockquote" class="reddit-embed-bq" style="height:316px" data-embed-height="316">
        <a id="redditLink" href=""></a>
    </blockquote>
    <script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
</div>

And then this code in the custom javascript section:

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    const redditUrls = ["https://www.reddit.com/r/copenhagen/comments/xfmjbi/secret_gems_of_cph/", "https://www.reddit.com/r/copenhagen/comments/tpn0tc/what_to_do_in_copenhagen_as_a_girl_in_her/", "https://www.reddit.com/r/copenhagen/comments/wnw6ad/in_copenhagen_for_1_day_what_are_some_mustsees/"];
    const randomIndex = Math.floor(Math.random() * redditUrls.length);
    const randomUrl = redditUrls[randomIndex];

    // Set the href attribute of the blockquote anchor tag
    const redditLink = document.getElementById('redditLink');
    redditLink.href = randomUrl;

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

But when I actually preview the question, it doesn’t show up. When I inspect the element, the code seems fine.

screenshot of inspected element

Another thing I’ve tried is just hardcoding the reddit embedding in the question html itself.And that worked completely fine. One thing to note is when I inspect the element in this case, it has already converted to an iframe object and isn’t tagged as a blockquote object anymore. I feel like this is where the problem is…

In my own js fiddle, my code works fine: https://jsfiddle.net/Lmbwcvqu/1/ so this seems to be qualtrics specific.

Does anyone know what might be going wrong?