使用给定的html代码将Calendly嵌入qualtrics调查

Question

我刚开始在qualtrics上使用html，希望有人能帮我解决我遇到的一个布局问题。本质上，我希望用户点击一个按钮，打开一个日历系统，这样他们就可以安排一次面试。代码来自调度系统(Calendly)。当我将代码粘贴到qualtrics中时，它可以正常工作，但它一直位于页面的底部。我将代码放在“富内容编辑器”下，然后单击“源”按钮，如下所示：Qualtrics input

下面是Calendly给出的html代码

    <!-- Calendly badge widget begin -->
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>
<script type="text/javascript">Calendly.initBadgeWidget({url: 'https://calendly.com/mckaykj', text: 'Schedule time with me', color: '#00a2ff', branding: true});</script>
<!-- Calendly badge widget end -->

我还附上了一张图片，展示了它在qualtricsThe button is at the bottom中的样子

这是给我的代码的问题吗，还是我把代码放错了地方，让它看起来太低了？

Answer 1

在我看来calendly是在一个奇怪的地方插入小工具。如果您将以下内容添加到js中，它应该会有所帮助，尽管这假设您每个页面只包含这些小部件中的一个。

这会将小部件移到问题文本框中，并将样式调整为相对样式而不是固定样式。

​

Qualtrics.SurveyEngine.addOnload(function()
{
	var questionText = this.questionContainer.select('.QuestionText')[0];
	var calendyItem = $$('.calendly-badge-widget')[0];
	calendyItem.setStyle({
		position: 'relative',
		right: '0px',
		left: '0px',
		top: '0px',
		bottom: '0px'
	});
	
	questionText.insert(calendyItem);

});

​