This example shows how to implement iframe for KriptoRamp widget. For src parameter you use use url from response. iframe content has responsive layout so this can be used for any screen size.
It is best to have a button that initialises the widget rather than doing it on page load, regardless of how you choose to display the widget to the user.
Additionally the below function disables the button so that only 1 widget can be called at a time, and then continually checks to see if the widget is open, if closed, enables the button again.
<script>
$(document).on("click", "buyCrypto", function() {
var buyCryptoButton = document.getElementById("buyCrypto");
buyCryptoButton.disabled = true;
var data='id=userId&csrfToken=csrfToken';
$.ajax({
type:"GET",
url:"WidgetInitialiseScript.php",
data:data,
success:function(url){
if (url == "checks failed") {
} else {
var win = window.open(url , "myWin", "toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=yes, width=515, height=600");
// sets interval timer to see if the utility window is open.
// If it is open the interval timer continues
// if the window has been closed, enable the button to start a new widget,
// and clear the timer
var interval = window.setInterval(function() {
try {
if (win == null || win.closed) {
window.clearInterval(interval);
buyCryptoButton.disabled = false;
}
}
catch (e) {
}
}, 1000);
return win;
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error type" + textStatus + "occured with value " + errorThrown);
}
});
return false;
});
</script>
Note: when using widget on page, make sure that correct is set to allow and to enable users to complete registration and KYC process
