Design and build your agency website, part 4: API integration

Step-by-step instructions to make your very own agency site in Webflow.

No items found.

In this fourth and final part of our series, we'll tackle API integration with a quick tutorial on setting up Zapier. We’ll also take a look at how smooth Webflow has made it to hand off your site to content creators. Hint: silky smooth.

Part 4: API integration and content creation

In part three of this series, we looked at steps six to eight to create your agency site in Webflow:

6. Harness the power of flexbox

7. Design logical interactions that don’t overwhelm users

8. Invert the palette for readability

In the fourth and final part of this series, we’ll look at steps nine and ten:

9. Use Webflow CMS’s API integraion

10. Call your favorite content creators

Step 9: Use Webflow CMS’s API integration

I won’t get too much into the technical weeds with this — Webflow covers a lot of the technical aspects of API integration.

If you’re unfamiliar with APIs, fear not. An API can be thought of as one of two things: data that a company or app allows you to use elsewhere, or a gateway to input data into an app or website. If apps and websites were a taco truck, APIs would supply the taco shells and the takeout window.

Or, maybe I need to work on my analogies …

But how does this impact you? Well, this allows you to take information and data from any source that exposes it, and put it on your site. This could mean tweets, maps, pricing tables, inventory, images … really anything you can think of.

All you need to do is find sites and apps that allow you to receive that data and then create a Collection inside of Webflow to catch the data. Oh — you’ll also need a delivery person (Zapier), but I’ll get into that later.

The first step in using the API with Webflow is to create a Collection for the data. For the Bespke site, I wanted to showcase the most recent Dribbble posts I liked.

Here’s what that Collection looked like:

Once I had that Collection set up, I added a couple test items so I could style them on my site. I positioned that section on the bottom of the homepage and used a similar style and interaction as my featured Collection. I wanted to drive traffic to the Dribbble posts themselves — instead of to an individual Collection page — so the original designer was properly attributed.

Now, if you’re looking closely at the Collection I had above, you’ll notice the image field is not actually an image at all, but rather a link to an image.

Here’s what that looks like:

And here’s the code snippet I used:

<a target="_blank" href="{Link Field}"><img border="0" alt="{Name Field}" src="{Image Link Field}" width="100%" height="200px"></a>

Set up Zapier

Zapier is a service that allows you to join 2 APIs together. You can use it for some automation rules, but it gets much more powerful with Webflow’s CMS.

The first step will obviously be to create a Zapier account.

Once you’ve done that, click Make A Zap at the top of the screen and start typing in your triggering app — in my case Dribbble — and select from the list of available triggers. You’ll have to authenticate with the account you want to use, but that’s just a few clicks, depending on your service. Zapier does a great job of getting you authenticated quickly.

Here's what that process looks like:

Learn flexbox the fun way...

Master the basics of flexbox in 28 increasingly challenging — and fun!— levels, without writing a line of code.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Play now

Once you have your trigger and the action you want to take in Webflow selected, select the correct site from your Webflow account, and the Collection you made to consume the API event.

Once you’ve done that, you’ll come to a page that shows all of the Collection fields you set up in Webflow. You’ll want to fill each of those with the data from your service, and in the end, it should look something like this:

Each of the fields that has a Dribbble logo will be filled with content from Dribbble. It’s important that the data you select here matches the datatype you’ve defined in your Collection. For example, if I were to put the number of likes or shot title in a field that’s expecting to have a link, Zapier will throw an error. Zapier can’t expose the data types to you, so it will allow anything to be put there. You’ll only encounter the issue after you hit continue and it tries to test with a past entry.

Once you’ve done all of the bindings, the next step is to test your set up. There’s a bunch of different ways this can be wrong, but once you’ve done it right, you’ll see this page:

And then you’ll see that a new Collection entry will have been added to your Webflow site.

Congratulations! You’ve mastered the art of API integrations and can boast to everyone in earshot. #webflowandzapierbff4life #apihavethepower

Step 10: Call your favorite content creators

This is one of the easiest parts of the process. You’ve created the shells for your content, you’ve set up pages to contain that content, you’ve styled everything, and you’ve created the classes and interactions. Now you need to get someone to fill in the content.

That someone could be you, but in most cases it’s someone in marketing, or a freelancer you’ve never met. You may worry that you’ll have a lot to explain to that person by documenting a complex system or teaching someone about CMS.

But fear not, oh potentate of pixels, Webflow has made a template to make the handoff to your content creators silky smooth.

To use it, simply duplicate it into your account and open it. I could walk you through the steps to use it — but the site itself does that already! Take some time, read through the copy, and you should be able to figure it out. Come back here when you’re done.

Done already? That was fast!

Now, you can either take that site as it currently exists — publish it and pass it along to your content writers — or, you can go to the style guide page and customize it. This lets you hand off something that not only helps your content writers write, but it will be cohesive and not have that template/afterthought feel.

Here’s the CMS guide I made for Bespke.

I didn’t go crazy with it. The H2s, H3s, and H4s don’t match perfectly, but no one but you will notice.

Once you’re done with all of that, publish it and — voila! Not only will you not have to write a long-winded email every time someone new comes on board, but you now look ultra-legit and cool for your clients — just like we always knew you were.

Published

April 10, 2018

Category

Tutorials

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

Define your own content structure, and design with real data.

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

Set up lightning-fast managed hosting in just a few clicks.

More about Hosting