Integrating an address lookup tool

Hello again. I'm trying to use a third party service to look up a New Zealand address from a text input field and return an NZ census identifier.

I've taken the original code from the service addressfinder.nz, and it is working fine in this codepen https://codepen.io//pen/vPMBJv, however I'm in no way smart enough to get this working in Qualtrics. If anyone had any pointers for me to research I would be grateful.

I've used my own API key, but the demo key should work. And I've tried referring strait to the input ID e.g. 'document.getElementById("QR~QID4")'.

Thank you!
Dan

Qualtrics.SurveyEngine.addOnload(function() {
var widget, initAddressFinder = function() {
widget = new AddressFinder.Widget(
document.getElementById("QR~"+this.questionId),
'ADDRESSFINDER_DEMO_KEY',
'NZ', {
"address_metadata_params": {
"census": 2018
}
}
);
widget.on('result:select', function(fullAddress, metaData) {
var selected = new AddressFinder.NZSelectedAddress(fullAddress, metaData);

// TO DO - You will need to update these ids to match those in your form
document.getElementById("QR~"+this.questionId).value = metaData.meshblock;
});
};

function downloadAddressFinder() {
var script = document.createElement('script');
script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
script.async = true;
script.onload = initAddressFinder;
document.body.appendChild(script);
};

document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();