Use of external API and db's

Design help Custom code
1

Hi folks.

Im a software developer used to write Windows, Webapp and Web services.
I have been using Webflow for almost 2 years now, and love it. All the time i have been missing an interface to connect to external API’s. I have now spent 2 days doing some research on the topic.

I have actualy found a quite good way of solving the problem. In my test environment i have connected my Webflow site to both external open API’s and some of my own API’s i have built over some years. The Web Services are connected to different db’s.

I have been using Vue.js and Axios http client. It works pretty good. I have not tested all yet, but some things and IT WORKS! There are some issues with Vue.js but i don’t se them to be a big problem. Object that i hooked in to Vue will loose the possibility to do animation, but i don’t se that as a big problem since i don’t want animations on object where im pulling in data.

So far i have been able to use the visual interface for the design of my site, with one exeption so far. The Webflow Form can not be used, here i hade to use HTML embedd.

I dont know how much more time i will spend on this, since i know it works. My problem is that im a good oop programer but im realy bad in JS and it takes to long time for me.

Any comments??

Janne

3 Likes
2

Hi Janne,

Mind explaining the workflow for routing your API calls to elements in the Webflow designer interface?

3

You need to take a look at Vue.js and Axios HTTP client.
You will find all on vue.js HomePage. Start there come back If you have Any Questions

4

I’ve also been using Vue.js, Axios, and Firebase with Webflow. It’s a really solid workflow.

Check out usebasin.com for forms. It’s really easy to set in Webflow.

5

Can you be more explicit about how you’re using Vue with the Webflow designer? Are you exporting code from Webflow?

I’m looking for a solution where I can make an API call directly in the Webflow designer.

6

I have been using it in the webflow designer. It do not work with webflow form. Vue.js is called using CDN.

On Holiday now so i can’t show you Any example until next week.

I did read the vue.js documentation to get it to work. Site must be published to run since it using external code.

7

If you could publish an example of how you’re binding or linking data to elements that would be awesome. Thanks and enjoy your vacation :slight_smile:

8

I’d love to see a followup answer from Janne. How did you connect to an external API in the designer without exporting?

1 Like
9

@JanneWassberg This sounds really interesting! I’d love to see an example too - just thought I’d try and poke and see if you have time to link to something.

Are you able to generate pages from other APIs or are you just talking about embedding javascript and presenting data from remote APIs on static or CMS pages? We’re doing something like the latter with this hackdash-embed/embed.js at master · OpenUpSA/hackdash-embed · GitHub and then styled the HTML from webflow designer.

10

this is revolutionary. would you share if I said please :smiling_face:?

11

Just thought I’d share how we do this these days. This doesn’t work in the designer, so we have the webflow developer mock up example pages using symbols, then on proper pages we put those symbols into a hidden div, then we clone the symbols to use them like components of a component library using javascript.

Example django site with meta tags templated server side and the rest client side
municipalmoney.gov.za
Dropdown menu example municipal-data/comparison-menu.js at master · OpenUpSA/municipal-data · GitHub

Example single page app with data from api

Best practises How to build pages in Webflow so that content can be added using Javascript - How we work (org handbook)

We’re making a start in a standard component library project that we’ll for each project and then style https://openup-boilerplate.webflow.io/documentation

Shout if anything is unclear.

2 Likes
12

https://beta.youthexplorer.org.za/ is this website in Webflow with data from API ?

13

it’s a webflow export, that is then hosted on netlify, with cutom javascript added. That custom javascript fetches data from an API and populates and shows hidden components built in webflow.