Add Ready-Made Integration to Your Website - How to do It?
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

Integrations - how to use and create them

What is an integration and what it’s for

Integrations are a way of expanding your website with applications and widgets from outside providers. It allows you to include an application right within your page without necessity to redirect your user to an outside link. They can simply and comfortably stay in your ecosystem. A lot of applications provide their connection data and the way to include it on an unrelated website, but searching for this in documentation and understating the steps necessary for it to work can prove challenging for the inexperienced user. Luckily our BOWWE Integrations are designed to be quick and easy to set up in your project.

How to add ready-made integration to your project

1
Open your project.
2

Go to the left panel.

3
Open integration menu.
4
Select any premade integration you want from our vast library.
5

Drop it in your project.

6

Open widget settings.

7

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

8

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

Integrations are based on the embed widget available in the premium version of BOWWE, however this version allows you to add those integrations completely for free and thanks to our developers you don’t have to worry about coding desired behaviors, all that is done behind the scene and you can easily change the provided values as well as adjust the size to whatever you want.

How to setup your own integration

In case, when you don’t see an integration that you need, or simply you created your own application, there is a way to add your own integration to BOWWE. This feature is based on our embed widget, which is only available for premium accounts.

Upgrade your project

Integrations will help you optimize maintaining multiple instances of your code with different variables, like having different accounts connected to the same provider. In this case having an integration would be simpler and easier for you or other users to edit without having to modify the main code.
1
First we need to drop an empty embed code widget.
2

Next go to the widget settings.

3

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.

4

Add a new Parameter.

5

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
Next go to the widget settings.

6

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.

HTML code

<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>

7

(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.

JavaScript code

<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>

hidePageDetails.value = hidePageDetails.value ? "?hide_landing_page_details=1" : ""; 

​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; }

Result
Congratulations!
Now you know how to use BOWWE Integrations.
Expert left Expert middle Expert right
SEO
Web Development
Need Web Dev, SEO, or Marketing Experts?
Lead Generation
Marketing
Hire a expert