👉 Відкриття віджету або онлайн-запису за своєю кнопкою

Оновлено 10 місяців тому

➡️ Якщо ви хочете, щоб онлайн запис відкривався не по кнопці віджету, а по своїй кнопці, приклад реалізації:

Приклад сайту із кастомною кнопкою:
https://cleverbox-crm.com/widget2/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
html,body{
min-height: 100vh;
margin:0;
padding:0;
}
body{
background: url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80') center no-repeat;
background-size: cover;
}
.demo-btn-wrap{
margin: 20px;
}
.demo-btn-wrap p {padding:10px; margin:5px 0px;}
.code{ background-color: white; color:green; font-weight: bold; padding:6px;}
code{background-color: white;padding: 10px;}
</style>
</head>
<body>
<div class="demo-btn-wrap">
<div>
<h1> Кастомная кнопка для открытия он-лайн записи </h1>
<code> &lt;script src="//cbox.mobi/go/ws.min.js" charset="UTF-8" rel="lm" lang="RU" data-open="hide" id="__cleverbox_wm"&gt;&lt;/script&gt;</code>
<p>Код кнопки: <code> &lt;button onclick="CleverBoxWm.Online()"&gt;Записаться&lt;/button&gt;</code></p>
<div style="margin-top:40px; width:200px;">
<button class="__cleverbox-button" onclick="CleverBoxWm.Online()">Записаться</button>
</div>
<div style="margin-top:40px; width:200px;">
<button class="__cleverbox-button" onclick="CleverBoxWm.Open()">Открыть виджет</button>
</div>
<p>Атрибут скрипта <span class="code">data-open="hide"</span> - необязателен,</p>
<p>предназначен для скрытия кнопки самого виджета</p>
</div>
<p>Другие примеры:</p>
<p>
<a href="index.html" class="__cleverbox-button">Обычная кнопка</a>
</p>
<p>
<a href="start.html" class="__cleverbox-button">Открытие стартового экрана виджета сразу после загрузки</a>
</p>
<p>
<a href="online.html" class="__cleverbox-button">Открытие экрана онлайн-записи сразу после загрузки</a>
</p>
</div>
<!-- виджет кнопки CleverBox -->
<script src="ws.min.js" charset="UTF-8" rel="lm" lang="RU" data-open="hide" id="__cleverbox_wm"></script>
</body>
</html>

Чи була наша стаття корисною?