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?

Did you put the html in a question's question text or in the footer under Look&Feel/Advanced? Is this is the same code that created the button? When I tried it created a "powered by Calendly" iframe, not a button. — T. Gibbons, Jan 06 '17 at 18:59
I put it in the question's text. That's the only code I've used. — mmmkay, Jan 06 '17 at 19:09
Now that you've added the last line to the code, I get the same thing. So it is the initBadgeWidget function that is putting a button at the bottom right. The original code you posted added an iframe. — T. Gibbons, Jan 06 '17 at 21:11

score 1 · Accepted Answer · answered Jan 09 '17 at 23:15

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

});

Embed Calendly into qualtrics survey using given html code

1 Answers1