The best part about Recal is that it's super easy to embed on your website. Just copy and paste the code below into your website.
Add the following <script> tag to the end of your body.
<script src="https://recal.me/recal-widget-v1.js"></script>Add the following <div> tag inside the body, where you want the widget to appear.
<div class="recalme-inline-widget" data-url="<your recal url here>"></div>Add the following <script> tag to the end of your body.
<script src="https://recal.me/recal-widget-v1.js"></script>Add the following <script> tag at the end of your body.
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".recalme-popup-button").forEach(btn => {
RecalEmbed.initPopupButton(btn);
});
});
</script>
Add the following <button> tag to where you want the popup trigger button to appear.
<button href="#" class="recalme-popup-button" data-url="<your recal url here>">Schedule a Meeting</button>Add the following <script> tag to the end of your body.
<script src="https://recal.me/recal-widget-v1.js"></script>Add the following <script> tag at the end of your body.
<script>
document.addEventListener("DOMContentLoaded", function () {
RecalEmbed.initBadgeWidget({
url: "<your recal url here>",
text: "Book Now",
backgroundColor: "#fff",
textColor: "#00796b",
borderRadius: "5px",
});
});
</script>