Lazycoders.tech - we do the best no-code apps

Implementing no-code solutions into real world - Webflow, Airtable, Zapier ๐Ÿ”ฅ

no-code

How do I connect Contentful CMS (Prismic) with Webflow

Webflow and a headless CMS - skip Webflow's CMS Collections. Does it make sense to you?.

How do I connect Contentful CMS (Prismic) with Webflow

How do I connect Contentful CMS (Prismic) with Webflow

On the 5th of March I asked the Webflow's audience on Facebook the following question:

Facebook question

And I've got 25 answers for now. That means - to me - this is very hot topic and many Webflow users want to understand how to integrate CMS with Webflow ๐Ÿ”ฅ

The example, that I am showing in this article explains how to integrate Webflow and Contentful. I used Contentful because I am more familiar with this CMS, however you can use Prismic as well - the idea is the same.

I've got a bad and a good news.

The good news - it is doable, works perfect & I always use Contentful or Airtable as my data management & storage instead of CMS Collections.

The bad news - It requires super-basic coding skills to build a PHP gateway,

How does it work?

Webflow and Contentful architecture

The gateway simply does a request to Webflow, takes the response and caches it. The detailed algorithm is visible at Step 1.

After that, at step 2 the API gateway is connecting to other services (like: Prismic, Contentful) and takes the data from their API.

At the end (step 3) the gateway executes a chain of actions that looks for special tags on Webflow, modifies the content (DOM) and returns the final result to the user.

Simple blog system based on Webflow and Contentful

I want to show you - in details - how it works. I decided to write a simple blog page, that is designed on Webflow and takes the recent blog posts from the Contentful CMS. It took me 30 minutes to get it all working!

The example is based on Contentful, but any other headless CMS (if has an API) can be used. Airtable can be used as well - I know it's not a CMS, but it also can be used.

I will follow the diagram (that I've posted above) and show three simple steps to get it working.

Step 1. Design a view on Webflow and publish the website under Webflow's URL

It is build in - really! - 5 minutes ๐Ÿ”ฅ I know - it should look better, but it's just an example of the integration

Webflow design

Once we've got the design, we can go to Step 2 which is - Contentful.

Step 2 - Contentful

What we need to do first is to define Content Model - I named the model Blog Posts.

Content Model

A blog post has 4 attributes - a title, a description, a long text description & a photo. After that, we can populate the blog posts with example posts.

Example posts

Pretty straightforward. We're done. We have got 2 blog posts added in the CMS system.

It's time for using the API gateway. If you are interested how our API gateway works, check it at https://lazycoders.tech/post/how-do-i-connect-webflow-and-external-databases-mysql-airtable-redis/

How to connect Webflow and databases

We need to write a few lines of code to fetch data from Contentful CMS using API Gateway (I used the official library available at: https://github.com/contentful/contentful.php.

This is how the integration looks like:

enter image description here

What this piece of code does it:

  • Takes the homepage.html template (it's
  • Takes the data from the Contentful API and stores to $post variable,
  • Parses tags in the HTML to manipulate DOM and replace the tagged places (in the HTML) with the real data taken from the Contentful,

Step 3 - display result to the customer

We're done. Here is the result!

Result

We can fully control the design on Webflow and add new blog posts using the CMS. Isn't it wonderful? :-)

How many tools can we integrate this way?

There are no limits ๐Ÿ”ฅ We have used > 10 integrations in the same time and it really works and the performance is great! Tools that we have used:

  • Relational and non-relational databases such as : MySQL, MongoDB,
  • Temporary database used for cache - Redis,
  • Webflow and Airtable connected directly, without CMS collections and Zapier,
  • Custom Webhooks to do actions for us - register form, login form,
  • Payment gateways connected directly via API - Stripe
  • CRM systems as a User Data Management,
  • Identity Access Management to authenticate users across the website with roles management,
  • and many many others

If you have any questions regarding integrations, do not hesitate to contact us at https://lazycoders.tech/contact

Thanks

My name is Mateusz and I'm from Poland.

I have developed many applications, as an IT consultant (Solution Architect, Team Leader or Senior developer), starting from small e-commerce applications build on top of PHP to bigger government-related applications (Java & PHP). I always try to deliver best approach, that can be scaled.

This blog not about hard-coding. This is about a new way, called no-code. I am here to show you how no-code can be used to build scalable, fast & reliable applications from scratch. This is the journey to show, that more than 80% MVPs should not take more than 4 weeks to get done!

Feel free to contact me if you have any question. I hope, that we will be able to meet in person one day and talk one day! ;-)