如何在Qualtrics中嵌入无“Read More”按钮的Reddit组件？

问题核心 #

在Qualtrics中嵌入Reddit帖子时，组件默认只显示部分内容并带有“Read More”按钮，模拟点击的方案受页面加载状态影响稳定性不足，需更可靠的实现方式。

稳定解决方案 #

1. 移除固定高度限制（核心修改）

现有代码中固定的data-embed-height和style="height:316px"会强制组件高度，导致长内容被截断。先移除这两个属性，让组件自适应内容高度：

修改后的HTML：

<div id="embeddedPost3">
    <blockquote class="reddit-embed-bq" id="redditBlockquote3">
        <a href="" id="redditLink3"></a>
    </blockquote>
</div>

2. 优化脚本加载与渲染逻辑

通过监听Reddit组件脚本的加载完成事件，确保组件在资源就绪后完整渲染，避免内容截断：

修改后的JavaScript：

Qualtrics.SurveyEngine.addOnReady(function() {
    const url_1c = "https://www.reddit.com/r/webdev/comments/134ldxr/recommended_way_to_embed_reddit_posts/";
    const platform_1 = "reddit";

    if (platform_1 === "reddit") {
        const redditLink3 = document.getElementById('redditLink3');
        redditLink3.href = url_1c;

        // 加载Reddit组件脚本并监听加载完成事件
        const s = document.createElement("script");
        s.src = "https://embed.reddit.com/widgets.js";
        s.onload = function() {
            // 脚本加载完成后触发组件重新渲染，确保内容完整显示
            window.redditEmbed?.(".reddit-embed-bq");
        };
        document.body.appendChild(s);
    }
});

3. 备选方案：使用Reddit官方嵌入代码

直接使用Reddit帖子页面「分享」→「嵌入」生成的官方代码，官方代码自带适配内容的参数，可稳定显示完整帖子：

示例官方嵌入代码（替换为目标帖子链接即可）：

<div id="embeddedPost3">
    <blockquote class="reddit-embed-bq" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false">
        <a href="https://www.reddit.com/r/webdev/comments/134ldxr/recommended_way_to_embed_reddit_posts/">Recommended way to embed reddit posts?</a>
    </blockquote>
    <script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
</div>

将这段代码直接放入Qualtrics的HTML编辑器，无需额外JS即可生效。

原理说明 #

• 移除固定高度后，Reddit组件会自动计算内容所需高度，避免强制截断。
• 监听脚本加载完成事件触发渲染，确保组件在资源就绪后完整加载内容，比模拟点击更稳定。
• 官方嵌入代码包含Reddit优化的适配参数，是最可靠的实现方式。

内容的提问来源于stack exchange，提问作者Gauri Jain