[Yandex Cloud documentation](../../index.md) > [Yandex SmartCaptcha](../index.md) > [Step-by-step guides](index.md) > Advanced method of adding the widget
# Adding the SmartCaptcha widget
## Adding the SmartCaptcha widget using the advanced method {#advanced}
You can control the widget loading process via the `window.smartCaptcha` [object](../concepts/widget-methods.md#methods). However, in this guide, we will use the `onloadFunction` callback function:
1. Add the widget’s JS script to the user’s page by placing the following code inside the `` tag (or anywhere on the page):
```html
```
1. Add an empty container on the page. The system will use it to insert the widget:
```html
```
Where `id` is a random identifier.
1. Add the callback function code on the page:
```html
```
Where:
* ``: ID that was generated at the previous step.
* `sitekey`: [Client-side key](../concepts/keys.md).
* `hl`: [Language](../concepts/widget-methods.md#render) used for the widget and the challenge.
Consider adding an existence check for the `window.smartCaptcha` object in the callback function. It will prevent errors caused by calling the function before the script has finished loading.
{% note info %}
Upon loading, the widget adjusts its container height to `100px`, which may cause an unwanted layout shift. To avoid the layout shift, set the container height to `100px` prior to the widget being loaded.
```html
```
{% endnote %}
## Adding a SmartCaptcha widget with on-demand loading {#dynamic}
To add a widget with on-demand CAPTCHA loading, use the following approach:
```js
window.onloadFunction = () => {
if (window.smartCaptcha) {
// Creating a CAPTCHA
}
}
function handleScriptLoadingError() {
// Error handling
}
const scriptElement = document.createElement('script');
scriptElement.src = 'https://smartcaptcha.cloud.yandex.ru/captcha.js?render=onload&onload=onloadFunction';
scriptElement.onerror = handleScriptLoadingError;
document.body.appendChild(scriptElement);
```
## What's next {#whats-next}
* [Invisible CAPTCHA](../concepts/invisible-captcha.md).
* [Integrating CAPTCHA in React](../concepts/react.md).