Вставить Календари в опрос кватрит с использованием заданного html-кода

Question

Я очень новичок в использовании html на qualtrics и надеялся, что кто-то поможет мне разобраться с проблемой размещения, которую у меня есть. По сути, я хочу, чтобы пользователи нажимали на кнопку, которая открывает систему календаря, чтобы они могли запланировать собеседование. Код указан из системы планирования (Calendly). Когда я перехожу, чтобы вставить код в qualtrics, он работает, но все это находится в нижней части страницы. Я помещаю код под «богатым содержанием редактора» и нажав кнопку «источник», как показано здесь: Qualtrics input

Вот HTML код дается Calendly

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

Похоже, что календарно вставляет виджет в странное место. Если вы добавите следующее в js, оно должно помочь, хотя это предполагает, что вы включаете только один из этих виджетов на страницу.

Это перемещает виджет в текстовое поле вопроса и корректирует стиль относительно относительного, а не фиксированного.

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

 
});