Для партнёров

Добавьте примерку дисков на свой сайт

Разместите компактную кнопку на сайте автосалона, шинного центра или магазина дисков. Посетители смогут открыть Примерку Колёс на сайте, в MAX или Telegram.

Скопируйте код

Нажмите кнопку — весь код виджета попадёт в буфер обмена.

Вставьте на сайт

Добавьте код перед закрывающим тегом </body> на нужных страницах.

Опубликуйте

Виджет сразу готов к работе и адаптируется под мобильные устройства.

Готовый код виджета

<style>
#pk-widget{position:fixed;right:18px;bottom:18px;z-index:99999;font:600 14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#pk-widget *{box-sizing:border-box}
#pk-links{display:none;min-width:190px;margin:0 0 10px auto;padding:8px;background:#1a2238;border-radius:14px;box-shadow:0 8px 28px #0004}
#pk-widget.open #pk-links,#pk-widget:focus-within #pk-links{display:block}
#pk-links a{display:block;padding:10px 12px;border-radius:8px;color:#fff;text-decoration:none}
#pk-links a:hover,#pk-links a:focus-visible{background:#a34e20;outline:0}
#pk-button{display:flex;align-items:center;gap:9px;margin-left:auto;padding:12px 16px;border:0;border-radius:40px;background:#1a2238;color:#fff;font:inherit;box-shadow:0 4px 20px #0004;cursor:pointer}
#pk-button:hover,#pk-button:focus-visible{background:#a34e20;outline:3px solid #fbe9dd}
#pk-button svg{width:30px;height:30px}
#pk-dot{width:8px;height:8px;border-radius:50%;background:#4ade80}
@media(hover:hover){#pk-widget:hover #pk-links{display:block}}
@media(max-width:480px){#pk-widget{right:14px;bottom:14px}#pk-button{font-size:13px}}
</style>
<div id="pk-widget">
  <nav id="pk-links" aria-label="Примерка дисков онлайн">
    <a href="https://app.primerkakoles.ru" target="_blank" rel="noopener">На сайте</a>
    <a href="https://max.ru/id770201041579_bot" target="_blank" rel="noopener">MAX</a>
    <a href="https://t.me/Primerkakoles_bot" target="_blank" rel="noopener">Telegram</a>
  </nav>
  <button id="pk-button" type="button" aria-expanded="false" aria-controls="pk-links">
    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <circle cx="16" cy="16" r="14.5" stroke="white" stroke-width="2.8"/>
      <circle cx="16" cy="16" r="11" stroke="white" stroke-width="1.2" stroke-opacity=".45"/>
      <circle cx="16" cy="16" r="9.2" stroke="white" stroke-width="1.6"/>
      <line x1="16" y1="13.4" x2="16" y2="6.8" stroke="white" stroke-width="2.2" stroke-linecap="round"/>
      <line x1="16" y1="13.4" x2="16" y2="6.8" stroke="white" stroke-width="2.2" stroke-linecap="round" transform="rotate(72 16 16)"/>
      <line x1="16" y1="13.4" x2="16" y2="6.8" stroke="white" stroke-width="2.2" stroke-linecap="round" transform="rotate(144 16 16)"/>
      <line x1="16" y1="13.4" x2="16" y2="6.8" stroke="white" stroke-width="2.2" stroke-linecap="round" transform="rotate(216 16 16)"/>
      <line x1="16" y1="13.4" x2="16" y2="6.8" stroke="white" stroke-width="2.2" stroke-linecap="round" transform="rotate(288 16 16)"/>
      <circle cx="16" cy="16" r="3.2" fill="#1a2238" stroke="white" stroke-width="1.8"/>
      <circle cx="16" cy="16" r="1.2" fill="white"/>
    </svg>
    <span>Примерка дисков онлайн</span><i id="pk-dot" aria-hidden="true"></i>
  </button>
</div>
<script>
(function(){
  var widget=document.getElementById('pk-widget');
  var button=document.getElementById('pk-button');
  function close(){widget.classList.remove('open');button.setAttribute('aria-expanded','false')}
  button.addEventListener('click',function(e){e.stopPropagation();var open=widget.classList.toggle('open');button.setAttribute('aria-expanded',open)});
  document.addEventListener('click',function(e){if(!widget.contains(e.target))close()});
  document.addEventListener('keydown',function(e){if(e.key==='Escape')close()});
}());
</script>

Код не использует внешние библиотеки и не влияет на стили сайта.

Нужна помощь с установкой? Напишите на info@primerkakoles.ru.