# Load Widget

Use the url received from [response: ](/docs/widget.html/initialise-widget.md#response-example)

```markup
url="https://widget.kriptomat.io/?to_address=1DJ4N7mdUazDvrDe3H5eeRJtoXuAUSbTWy&amount=35&asset_type=eth&uuid=c472856c-d248-4e53-ae49-1d2f088cb732"
```

Url can be opened as new page, integrated within existing page in `iframe` or used in utility window. How to configure widget check [this page](/docs/widget.html/widget-configuration.md).

Below you will find simple examples how to load widget:

### **Button example**

This example show how to use url provided above in simple javascript `onclick` event to open KriptoRamp widget in new window 

```
<button onclick="window.open('url','_blank')">KriptoRamp Widget</button>
```

### **Iframe example**

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.

```
<iframe src="https://widget.kriptomat.io/?to_address=1DJ4N7mdUazDvrDe3H5eeRJtoXuAUSbTWy&amount=35&asset_type=eth&uuid=c472856c-d248-4e53-ae49-1d2f088cb732" allow="camera;microphone" height="600" width="515" title="Kriptomat Widget" allow="camera;microphone"></iframe>
```

Following attribute `allow="camera;microphone"`  for `iframe` is required to enable user to complete registration and KYC process

### **Utility Window**

```
<script>

var win = window.open(url , "myWin", "toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=yes, width=515, height=600");

</script>
```

### **Best Practices**

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.

```javascript
<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 [http header permission policy ](https://www.w3.org/TR/permissions-policy-1/)is set to allow [`camera`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/camera) and [`microphone`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/microphone) to enable users to complete registration and KYC process


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.kriptomat.io/docs/widget.html/load-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.