Integration of the widget using Digital Data Layer (DDL)

1) Add call lines at the beginning of the script (product card):

<link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap" rel="preload" as="font">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap" rel="preload" as="font">
<link href="https://sx24.ru/CalcShoes/assets/js/widgets/select2.css?ver=2" rel="stylesheet" />
<link href="https://sx24.ru/CalcShoes/assets/js/widgets/simplebar.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/9d6c38ab7c.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/js/widgets/jquery.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/js/widgets/simplebar.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/localforage/localforage.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/select2/select2.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/select2/select2_locale_ru.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/widget/app2.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/widget/sx24API.js"></script>

For CMS BITRIX, add:

<link href="https://sx24.ru/CalcShoes/assets/widget/app2-bitrix.css?ver=14" rel="stylesheet"/>

For other CMS, add:

<link href="https://sx24.ru/CalcShoes/assets/widget/app2.css?ver=14" rel="stylesheet"/>

2) Add a container to the page for placing the widget:

<script type="text/javascript">
	
        //start of area for the Size button
        $(document).ready(() =>
        {		
	    var $showHint = document.querySelector('.size-btn__hint')
            var $hint = document.querySelector('.size-btn-hint')
            var $closeHint = document.querySelector('.size-btn-hint__btn')

            if ($showHint != null)
            {
                $showHint.addEventListener('click', function ()
                {
                    $hint.classList.add('is-visible')
                })
                $closeHint.addEventListener('click', function ()
                {
                    $hint.classList.remove('is-visible')
                })
            }		
		
            var language = 'Rus';          	//SET values here 
            var sex = 'M';			//SET values here
            var vendorcode = "13512410"; 	//SET values here

            function load()
            {
                sx24Load(
                    {
                        Language: language,
                        VendorCode: vendorcode,
                        Sex: sex,
                        IsShowWidget: false,
                        jSelectorContainer: "#IDWidgetContainer",
                        UseDDL: true,
                        jSelectorControlOpen: "#ButtonOpen",
                        CheckExistsVendorCode: true
                    },
                    () =>
                    { });
            }           

            function sx24SetCompleteCalculationSize2(funcomplete)
            {
                if (typeof funcomplete === "function")
                {
                    sx24WidgetCompleteCalculationSize = funcomplete;

                    if (sx24Widget)
                    {
                        sx24Widget.CompleteCalculationSize = funcomplete;
                    }
                }
            }

            sx24IsExistsVendorcode(vendorcode, isexists =>
            {
                console.log("IsExists: " + isexists);

                if (isexists)
                {
                    $("#IDButtonOpenWidget").show();


                    sx24SetCompleteCalculationSize2(result =>
                    {

                        if (result != null)
                        {
                            var aw = result.split('&');

                            if (aw && aw.length >= 2)
                            {
                                var i = aw[1].indexOf(">");

                                if (i != -1)
                                {
                                    var asw = aw[1].substr(i + 1).split("<");

                                    if (asw && asw.length > 1)
                                    {
                                        aw[1] = asw[0];
                                    }
                                }

                                result = aw[0] + " <span>" + aw[1] + " </span>";

                                $("#IDResultCalculationSize").css('display', 'inline-block');
                                $("#IDResultCalculationSize").html(result);
                                $("#IDResultCalculationSize").show();
                            }
                        }
                    });

                    sx24CaclculationSize(
                        {
                            VendorCode: vendorcode,
                            Sex: 'M',
                            UseDDL: true
                        });
                    load();
                }
            });
        });
//end of area for the Size button

3) Place this code into the item page:

<style>
    .preview {
        font-family: 'Proxima Nova Rg', sans-serif;
        padding: 50px;
    }

    .size-btn, .size-btn * {
        box-sizing: border-box;
    }

    .size-btn {
        display: inline-flex;
        height: 45px;
        border: 1px solid #000;
        cursor: default;
        position: relative;
    }

    .size-btn__text {
        display: flex;
        align-items: center;
        padding: 0 15px;
        font-size: 14px;
        font-weight: bold;
        border-right: 1px solid #000;
        transition: .15s ease;
        cursor: pointer;
        text-decoration: none;
        color: #000;
    }

        .size-btn__text:hover {
            background-color: #e5e5e5;
        }

    .size-btn__size-hint {
        display: flex;
        align-items: center;
        padding-left: 6px;
    }

    .size-btn__size {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 1;
    }

        .size-btn__size span {
            font-size: 10px;
            font-weight: normal;
        }

    .size-btn__hint {
        margin: 0 6px;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        background: #000 no-repeat center url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAQAAABwz0azAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflBgQNFgZ3XMHXAAAASklEQVQI10WIQQ2AMBDAGoIBLJwFkICFWZgFLKABCVhgWpCwSSiPZaGvthg+qh4wk2lsBLeFjqsaXbOaxtcdYALgov3xsjCwegJ8q+cem0BKf2UAAAAASUVORK5CYII=);
        border-radius: 50%;
        font-size: 12px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        transition: .15s ease;
      
    }

        .size-btn__hint:hover {
            background-color: #343433;
        }

    .size-btn-hint {
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateX(8px) translateY(-50%);
        opacity: 0;
        visibility: hidden;
        transition: .25s ease;
        min-width: 210px;
        padding: 27px 17px 50px;
        box-shadow: 0px 6px 29.75px 5.25px rgba(1, 1, 1, 0.22);
        background: #fff;
        cursor: default;
        z-index: 99999;
    }

        .size-btn-hint.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateX(-8px) translateY(-50%);
        }

    .size-btn-hint__text {
        font-size: 14px;
        line-height: 16px;
        color: #000;
    }

    .size-btn-hint__btn {
        font-size: 14px;
        color: #fff;
        background: #343433;
        font-weight: bold;
        width: 60px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 0;
        cursor: pointer;
        transition: .15s ease;
        text-decoration: none;
    }

        .size-btn-hint__btn:hover {
            background: #000;
        }
</style>


				<div class="preview">
                                    <div class="size-btn">
                                        <a href="javascript:void(0)" class="size-btn__text" onclick="sx24Show();" style="cursor:pointer" id="ButtonOpen">
                                            Coose the size
                                        </a>
                                        <div class="size-btn__size-hint">

                                            <div class="size-btn__size" id="IDResultCalculationSize">
                                            </div>
                                            <a href="javascript:void(0)" class="size-btn__hint"></a>
                                        </div>

                                        <div class="size-btn-hint">                                
						<div class="size-btn-hint__text">Recommendation for this model</div>
                                            <a href="javascript:void(0)" class="size-btn-hint__btn">OK</a>
                                        </div>
                                    </div>
                                </div>