Embed Calendly into qualtrics survey using given html code

Question

I'm very new to using html on qualtrics and was hoping someone could help me figure out a placement issue I'm having. Essentially I want users to click on a button which opens up a calendar system so they can schedule an interview. The code is given from the scheduling system (Calendly). When I go to paste the code into qualtrics, it works but it is all the way at the bottom of the page. I am putting the code under the 'rich content editor' and clicking the 'source' button as shown here: Qualtrics input

Here is the html code given by 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 -->

I've also attached an image showing how it looks in qualtricsThe button is at the bottom

Is this an issue with the code given to me, or am I putting the code in the wrong place to make it appear so far down?

Answer 1

Looks to me like calendly is inserting the widget in a strange place. If you add the following to your js, it should help, though this assumes you are only including one of these widgets per page.

This moves the widget in to the question text box and adjusts the styling to relative instead of fixed.

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

});