Webflow добавляет всплывающее окно Calendly к тексту или кнопке.

Эта статья предназначена для всех, кто хочет включить Calendly в свой веб-сайт Webflow. Следующие шаги необходимы для добавления calendly на ваш сайт.

1. Нажмите на кнопку, где вы хотите открыть всплывающее окно. Это также может быть текстовый элемент, ссылка или что-то еще, чему можно присвоить идентификатор и на что можно кликнуть.

после того как вы нажали на элемент нужно перейти к настройкам этого элемента. Там вы можете найти позицию установки идентификатора элемента. В файле введите имя startYourfreeTrialBtn.

2. Добавьте пользовательский элемент кода.

Добавьте пользовательский элемент кода на свой веб-сайт, щелкнув вкладку элементов и выбрав компонент для встраивания.

3. Добавьте пользовательский код

Добавьте следующий пользовательский код. И замените свою информацию (ссылка на встречу и, если вы использовали другой идентификатор кнопки, например, также замените идентификатор). В противном случае просто скопируйте и вставьте код.

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<!-- Calendly link widget end -->
<script>
  function openCalendlyPopUp(){
   //this is your meeting direct link
    var meetingDirectUrl = "https://calendly.com/max-mustermann/15min";
    // add your Calendly URL into the next row 
    Calendly.initPopupWidget({ url: meetingDirectUrl });
    return false;  
  }
  // Start your free trial button add click event
  var elementButtonId = 'startYourfreeTrialBtn';
  document.getElementById(elementButtonId).addEventListener("click", function(){openCalendlyPopUp()});
</script>

4. Опубликуйте свой веб-сайт.

Нажмите на кнопку публикации, и вы должны увидеть что-то подобное здесь, если вы нажмете на указанную кнопку.

Надеюсь статья помогла. Удачного кодирования!