html - 使用给定的 html 代码将 Calendly 嵌入到质量调查中

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 -->

我还附上了一张图片，显示了它在 qualtrics 中的外观 The 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);

});