const button = document.createElement('button');
    button.className='clyconButton';
    button.innerHTML = 'Онлайн-запись';
    button.style.zIndex = 999;

    const closeButton = document.createElement('button');
    closeButton.className='clyconCloseIframeButton';
    closeButton.innerHTML = '✕';

    const bg = document.createElement('div');
    bg.className = 'clyconWidgetBackground';
    bg.id = 'clyconWidgetBackground';
    bg.classList.add('clyconWidgetBackgroundHidden');

    const clyconIFrame = document.createElement('iframe');
    clyconIFrame.src="https://app.clycon.com/widget/127";
    clyconIFrame.sandbox.add('allow-same-origin');
    clyconIFrame.sandbox.add('allow-top-navigation');
    clyconIFrame.sandbox.add('allow-forms');
    clyconIFrame.sandbox.add('allow-scripts');
    clyconIFrame.style.width = '600px';
    clyconIFrame.style.height = '100vh';
    clyconIFrame.style.border = 'none';
    clyconIFrame.classList.add('clyconWidgetIFrame');
    clyconIFrame.classList.add('clyconWidgetIFrameHidden');

    bg.appendChild(clyconIFrame);
    bg.appendChild(closeButton);

    document.body.appendChild(bg);
    document.body.appendChild(button);

    var cssId = 'clyconCss';
    if (!document.getElementById(cssId))
    {
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = 'https://api.clycon.com/static/clyconWidget.css';
        link.media = 'all';
        head.appendChild(link);
    }

    button.addEventListener("click", () => {
      if(window.screen.width >= 600){
        bg.classList.remove('clyconWidgetBackgroundHidden');
        clyconIFrame.classList.remove('clyconWidgetIFrameHidden');
      } else {
        window.open('https://app.clycon.com/widget/127');
      }
    }, false);

    const clyconButtons = document.querySelectorAll('.clycon_widget_button');

    if(clyconButtons && clyconButtons.length){
      clyconButtons.forEach((clyconButtonElement) => {
        clyconButtonElement.addEventListener('click', () => {
          if(window.screen.width >= 600){
            bg.classList.remove('clyconWidgetBackgroundHidden');
            clyconIFrame.classList.remove('clyconWidgetIFrameHidden');
          } else {
            window.open('https://app.clycon.com/widget/127');
          }
        }, false);
      })
    }

    bg.addEventListener("click", () => {
      bg.classList.add('clyconWidgetBackgroundHidden');
      clyconIFrame.classList.add('clyconWidgetIFrameHidden');
      clyconIFrame.src = "https://app.clycon.com/widget/127";
  }, false);