Встраивание календаря Cue на сайт

<!-- Cue Widget -->
<style>
  .cq-fab-wood123{position:fixed;right:32px;bottom:40px;z-index:2147483645;
    display:inline-flex;align-items:center;justify-content:center;
    padding:18px 32px;background:#5b4c9f;color:#ffffff;border:2px solid #ffffff;
    border-radius:16px;font-family:Helvetica,Arial,sans-serif;
    font-size:16px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;
    box-shadow:0 4px 24px #5b4c9f66;
    isolation:isolate;
    transition:background .2s,transform .2s,box-shadow .2s;
    -webkit-tap-highlight-color:transparent;}
  .cq-fab-wood123:hover{background:#493a8d;
    transform:translateY(-2px);box-shadow:0 8px 28px #5b4c9f80;}
  .cq-fab-wood123:active{transform:translateY(0);}
  @media(max-width:768px){.cq-fab-wood123{right:16px;bottom:22px;
    padding:15px 24px;font-size:15px;}}

  .cq-ov-wood123{display:block;position:fixed;inset:0;
    z-index:2147483646;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .3s,visibility 0s linear .3s;}
  .cq-ov-wood123.vis{opacity:1;pointer-events:auto;visibility:visible;
    transition:opacity .3s,visibility 0s linear 0s;}

  .cq-pn-wood123{position:fixed;top:0;right:0;bottom:0;
    z-index:2147483647;width:50vw;max-width:100vw;
    background:#fff;box-shadow:-8px 0 40px rgba(0,0,0,.18);
    display:flex;flex-direction:column;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    border-radius:16px 0 0 16px;overflow:visible;}
  .cq-pn-wood123.on{transform:translateX(0);}

  .cq-tab-wood123{position:absolute;background:#5b4c9f;color:#ffffff;
    font-family:Helvetica,Arial,sans-serif;font-size:13px;font-weight:600;line-height:1;
    white-space:nowrap;letter-spacing:.5px;z-index:1;transition:opacity .3s,transform .3s;}
  .cq-tab-wood123:not(.h){left:0;top:50%;transform:translateY(-50%);writing-mode:vertical-lr;
    padding:30px 10px 30px;border-radius:0 8px 8px 0;}
  .cq-tab-wood123.h{left:50%;top:0;transform:translateX(-50%);writing-mode:horizontal-tb;
    padding:10px 34px 10px 34px;border-radius:0 0 8px 8px;}
  .cq-tab-wood123.hide:not(.h){opacity:0;transform:translateY(-50%) translateX(-100%);
    pointer-events:none;}
  .cq-tab-wood123.h.hide{opacity:0;transform:translateX(-50%) translateY(-100%);
    pointer-events:none;}
  .cq-tabx-wood123{position:absolute;writing-mode:horizontal-tb;
    width:18px;height:18px;border:none;background:transparent;
    color:#ffffff;cursor:pointer;padding:0;opacity:.6;transition:opacity .15s;
    display:flex;align-items:center;justify-content:center;}
  .cq-tab-wood123:not(.h) .cq-tabx-wood123{bottom:4px;left:50%;transform:translateX(-50%);}
  .cq-tab-wood123.h .cq-tabx-wood123{right:6px;top:50%;transform:translateY(-50%);}
  .cq-tabx-wood123:hover{opacity:1;}
  .cq-tabi-wood123{position:absolute;display:flex;align-items:center;justify-content:center;
    width:14px;height:14px;border:1px solid rgba(255,255,255,.45);
    background:rgba(255,255,255,.16);color:#ffffff;border-radius:50%;
    cursor:default;padding:0;font-family:Helvetica,Arial,sans-serif;
    font-size:9px;font-weight:700;line-height:1;letter-spacing:0;}
  .cq-titp-wood123{display:none;position:absolute;writing-mode:horizontal-tb;
    background:#1a1a1a;color:#fff;padding:8px 12px;border-radius:8px;
    font-family:Helvetica,Arial,sans-serif;
    font-size:12px;font-weight:500;line-height:1.4;letter-spacing:0;
    white-space:normal;word-wrap:break-word;overflow-wrap:break-word;
    width:max-content;max-width:240px;
    box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:2;pointer-events:none;}
  .cq-tab-wood123.h .cq-tabi-wood123{left:8px;top:50%;transform:translateY(-50%);}
  .cq-tab-wood123.h .cq-titp-wood123{left:0;top:calc(100% + 12px);transform:none;}
  .cq-tab-wood123:not(.h) .cq-tabi-wood123{top:8px;left:50%;transform:translateX(-50%);}
  .cq-tab-wood123:not(.h) .cq-titp-wood123{left:calc(100% + 12px);top:50%;transform:translateY(-50%);max-width:min(240px,calc(100vw - 80px));}
  .cq-tab-wood123:hover .cq-titp-wood123{display:block;}
  .cq-tab-wood123.hide .cq-titp-wood123,
  .cq-tab-wood123.hide:hover .cq-titp-wood123{display:none !important;}

  .cq-hd-wood123{display:flex;align-items:center;
    justify-content:space-between;padding:16px 20px;
    background:#fff;border-bottom:1px solid #f0f0f0;flex-shrink:0;}
  .cq-hd-wood123 p{font-family:Helvetica,Arial,sans-serif;
    font-size:15px;font-weight:600;color:#1a1a1a;margin:0;}
  .cq-xb-wood123{width:32px;height:32px;border:none;
    background:transparent;cursor:pointer;display:flex;
    align-items:center;justify-content:center;border-radius:8px;
    color:#666;padding:0;transition:background .15s;}
  .cq-xb-wood123:hover{background:#f5f5f5;color:#111;}

  .cq-bd-wood123{position:relative;flex:1;overflow:hidden;}
  .cq-ld-wood123{position:absolute;inset:0;display:flex;
    flex-direction:column;align-items:center;justify-content:center;
    gap:16px;background:#fff;z-index:1;transition:opacity .3s;}
  .cq-ld-wood123.dn{opacity:0;pointer-events:none;}
  .cq-sp-wood123{width:44px;height:44px;border:3px solid #f0f0f0;
    border-top-color:#5b4c9f;border-radius:50%;
    animation:cqSwood123 .75s linear infinite;}
  @keyframes cqSwood123{to{transform:rotate(360deg);}}
  .cq-lt-wood123{font-family:Helvetica,Arial,sans-serif;
    font-size:14px;color:#999;}
  .cq-if-wood123{position:absolute;inset:0;width:100%;height:100%;
    border:none;opacity:0;transition:opacity .3s;}
  .cq-if-wood123.dn{opacity:1;}

  @media(max-width:768px){
    .cq-pn-wood123{width:100vw !important;border-radius:0;}}
</style>

<button class="cq-fab-wood123" id="cqFabwood123" type="button">Забронировать</button>

<div class="cq-ov-wood123" id="cqOwood123"></div>

<div class="cq-pn-wood123" id="cqPwood123">
  <div class="cq-tab-wood123" id="cqTwood123">
    <div class="cq-tabi-wood123" id="cqTIwood123">i
      <div class="cq-titp-wood123" id="cqTIPwood123">Скидка 15%</div>
    </div>
    <span id="cqTTwood123">Скидка 15% при бронировании от двух часов</span>
    <button class="cq-tabx-wood123" id="cqTXwood123" type="button" aria-label="Скрыть">
      <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
        <path d="M8 2L2 8M2 2l6 6" stroke="currentColor"
          stroke-width="1.5" stroke-linecap="round"/>
      </svg>
    </button>
  </div>
  <div class="cq-hd-wood123">
    <p>Бронирование</p>
    <button class="cq-xb-wood123" id="cqXbwood123" type="button" aria-label="Закрыть">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
        <path d="M14 4L4 14M4 4l10 10"
          stroke="currentColor" stroke-width="2"
          stroke-linecap="round"/>
      </svg>
    </button>
  </div>
  <div class="cq-bd-wood123">
    <div class="cq-ld-wood123" id="cqLwood123">
      <div class="cq-sp-wood123"></div>
      <span class="cq-lt-wood123">Загружаем...</span>
    </div>
    <iframe class="cq-if-wood123"
      id="cqFwood123" title="Бронирование"
      allow="payment" loading="lazy"></iframe>
  </div>
</div>

<script>
(function(){
  var BOOKING_URL="https://wood123.cue.business/services";
  var ANCHOR="#zabronirovat";
  var SERVICES={};
  var DEF_TAB="Скидка 15% при бронировании от двух часов";
  var DEF_INFO="Скидка 15%";
  var SEO_TITLE="Бронирование | Cue";
  var SEO_DESC="Скидка 15%";
  var loaded=false,lastSrc=null;
  var isOpen=false,inTransit=false,savedY=0;
  var TR=360;

  try{
    var u0=new URL(BOOKING_URL,location.href);
    function addLink(rel){
      var sel='link[rel="'+rel+'"][href="'+u0.origin+'"]';
      if(document.head.querySelector(sel)) return;
      var l=document.createElement("link");
      l.rel=rel;l.href=u0.origin;
      if(rel==="preconnect") l.crossOrigin="";
      document.head.appendChild(l);
    }
    addLink("preconnect");
    addLink("dns-prefetch");
  }catch(e){}

  function upsertMeta(attr,key,content){
    if(!content) return;
    var sel='meta['+attr+'="'+key+'"]';
    var el=document.head.querySelector(sel);
    if(!el){el=document.createElement("meta");el.setAttribute(attr,key);document.head.appendChild(el);}
    el.setAttribute("content",content);
  }

  function applySeo(){
    upsertMeta("name","description",SEO_DESC);
    upsertMeta("property","og:title",SEO_TITLE);
    upsertMeta("property","og:description",SEO_DESC);
    upsertMeta("property","og:type","website");
    upsertMeta("property","og:url",location.href);
    var ld={
      "@context":"https://schema.org",
      "@type":"WebPage",
      "name":SEO_TITLE,
      "description":SEO_DESC,
      "potentialAction":{"@type":"ReserveAction","target":BOOKING_URL}
    };
    var sid="cqSeowood123";
    var s=document.getElementById(sid);
    if(!s){s=document.createElement("script");s.type="application/ld+json";s.id=sid;document.head.appendChild(s);}
    s.textContent=JSON.stringify(ld);
  }

  function applyTab(svc){
    var tt=document.getElementById("cqTTwood123");
    var ti=document.getElementById("cqTIwood123");
    var tip=document.getElementById("cqTIPwood123");
    var tabEl=document.getElementById("cqTwood123");
    if(tabEl) tabEl.classList.remove("hide");
    if(tt) tt.textContent=(svc&&svc.tab)||DEF_TAB;
    var info=(svc&&svc.info)||DEF_INFO;
    if(ti) ti.style.display=info?"flex":"none";
    if(tip) tip.textContent=info;
  }

  var UTM_KEYS=["utm_source","utm_medium","utm_campaign","utm_term","utm_content","yclid","gclid","fbclid","yadclid","ysclid"];
  function addUtm(u){
    try{
      var target=new URL(u,location.href);
      var src=new URLSearchParams(location.search);
      for(var i=0;i<UTM_KEYS.length;i++){
        var v=src.get(UTM_KEYS[i]);
        if(v&&!target.searchParams.has(UTM_KEYS[i])) target.searchParams.set(UTM_KEYS[i],v);
      }
      var ref=document.referrer;
      if(ref&&!target.searchParams.has("utm_referrer")) target.searchParams.set("utm_referrer",ref);
      return target.toString();
    }catch(e){return u;}
  }

  function go(src){
    if(isOpen||inTransit) return;
    inTransit=true;
    src=addUtm(src);
    var o=document.getElementById("cqOwood123");
    var w=document.getElementById("cqPwood123");
    document.body.appendChild(o);
    document.body.appendChild(w);
    var f=document.getElementById("cqFwood123");
    if(!loaded||lastSrc!==src){
      var ld=document.getElementById("cqLwood123");
      if(ld) ld.classList.remove("dn");
      f.classList.remove("dn");
      f.src=src;
      f.addEventListener("load",function(){
        var l=document.getElementById("cqLwood123");
        if(l) l.classList.add("dn");
        f.classList.add("dn");
        try{f.focus();}catch(e){}
      },{once:true});
      loaded=true;lastSrc=src;
    }
    savedY=window.pageYOffset||document.documentElement.scrollTop||0;
    document.documentElement.style.overflow="hidden";
    document.body.style.overflow="hidden";
    requestAnimationFrame(function(){
      o.classList.add("vis");
      w.classList.add("on");
    });
    document.addEventListener("keydown",ek);
    setTimeout(function(){inTransit=false;isOpen=true;},TR);
  }

  window.cqOpen_wood123=function(src){go(src||BOOKING_URL);};
  window.cqOpenDef_wood123=function(){applyTab(null);cqOpen_wood123();};

  window.cqClose_wood123=function(){
    if(!isOpen||inTransit) return;
    inTransit=true;
    var o=document.getElementById("cqOwood123");
    var w=document.getElementById("cqPwood123");
    o.classList.remove("vis");
    w.classList.remove("on");
    document.removeEventListener("keydown",ek);
    requestAnimationFrame(function(){
      document.documentElement.style.overflow="";
      document.body.style.overflow="";
      if(savedY) window.scrollTo(0,savedY);
    });
    setTimeout(function(){inTransit=false;isOpen=false;},TR);
  };

  function ek(e){if(e.key==="Escape") cqClose_wood123();}

  function svcByHash(h){
    var m=h&&h.match(/^#cue-(\d+)$/);
    return m&&SERVICES[m[1]]?SERVICES[m[1]]:null;
  }
  function openFromHash(h,svc){
    if(svc===undefined) svc=svcByHash(h);
    var target=svc?svc.url:BOOKING_URL;
    if(isOpen){
      applyTab(svc);
      var withUtm=addUtm(target);
      if(lastSrc!==withUtm){
        var f=document.getElementById("cqFwood123");
        var ld=document.getElementById("cqLwood123");
        if(ld) ld.classList.remove("dn");
        if(f){f.classList.remove("dn");f.src=withUtm;}
        lastSrc=withUtm;
      }
      return;
    }
    if(inTransit) return;
    applyTab(svc);
    if(svc) cqOpen_wood123(svc.url); else cqOpen_wood123();
  }
  function tryO(){
    var h=location.hash;
    if(h===ANCHOR||svcByHash(h)){
      history.replaceState(null,"",location.pathname+location.search);
      openFromHash(h);
    }
  }

  document.addEventListener("click",function(e){
    if(e.defaultPrevented||e.button||e.ctrlKey||e.metaKey||e.shiftKey||e.altKey) return;
    var t=e.target;
    var el=t&&t.closest?t.closest("a[href]"):null;
    if(!el) return;
    var h=el.getAttribute("href");
    if(!h) return;
    var svc=svcByHash(h);
    if(h!==ANCHOR&&!svc) return;
    e.preventDefault();
    e.stopImmediatePropagation();
    openFromHash(h,svc);
  },true);

  function wire(){
    var fb=document.getElementById("cqFabwood123");
    if(fb) fb.addEventListener("click",function(){applyTab(null);cqOpen_wood123();});
    var ov=document.getElementById("cqOwood123");
    if(ov) ov.addEventListener("click",cqClose_wood123);
    var xb=document.getElementById("cqXbwood123");
    if(xb) xb.addEventListener("click",cqClose_wood123);
    var tx=document.getElementById("cqTXwood123");
    if(tx) tx.addEventListener("click",function(e){
      e.stopPropagation();
      var tab=document.getElementById("cqTwood123");
      if(tab) tab.classList.add("hide");
    });
  }

  window.addEventListener("hashchange",tryO);
  if(document.readyState==="loading"){
    document.addEventListener("DOMContentLoaded",function(){applySeo();wire();tryO();});
  }else{applySeo();wire();tryO();}
})();
</script>