Integrations - how to use and create them
What you’ll learn:
What is an integration and what it’s for
How to add ready-made integration to your project
How to setup your own integration
What is an integration and what it’s for
How to add ready-made integration to your project
Go to the left panel.


Drop it in your project.
Open widget settings.
Provide the URL to your version of the application and fill in optional settings (some integrations require just the URL).

Run the code in creator for visual representation, or see how it works in the preview window of your project.

How to setup your own integration
Upgrade your project

Next go to the widget settings.
We’ll start by creating a parameter for us to use in custom integration. Go to the Params tab.Next go to the widget settings.
Add a new Parameter.
Open dropdown information and provide all the necessary data. The windows you need to fill in depend on the type of parameter you are trying to create. For this example we’ll focus on three parameters:
- Name, by which we can identify this param in HTML code
- Type, which defies what input can be written down
- Label, which helps us identify the param

Go to the HTML tab and provide the code portion of the Integration. In the place of the URL link to our integration we’ll write down the name of the param we created earlier and what we need from this element, in this case, a value. Next go to the widget settings.
<div class="calendly-inline-widget" data-url=""
style="width:100%; height:700px"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
(optional) Some providers block embedding their services in iframes and to counteract that you need to add a JavaScript code available from the provider’s documentation. If your integration isn’t blocked, then this step is not necessary. Just remember that our premade integrations already have this issue sorted out. Next go to the widget settings.
<div class="calendly-inline-widget" data-url="https://calendly.com/yakiv-bowwe/test-event-link" style="width:100%; height:700px"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
const combinedUrl = userLink.value + hidePageDetails.value;
const divArea = document.querySelector(".calendly-inline-widget");
divArea.setAttribute("data-url", combinedUrl);
const iframeArea = divArea.querySelector('iframe'); if (iframeArea) { const newIframeUrl = `${combinedUrl}`; iframeArea.src = newIframeUrl; }
