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

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

low-code

Connecting Webflow and Contentful (Prismic) together - part 2

The article have found many people who are interested in extending Webflow functionalities.

Connecting Webflow and Contentful (Prismic) together - part 2

Connecting Webflow and Contentful (Prismic) together - part 2

In the last article we created a simple integration between Webflow, Contentful and API Gateway.

The article have found many people who are interested in extending Webflow functionalities.

We have also received many e-mails regarding integrations and few questions on how to integrate Webflow with the simple post page. In the previous article I skipped it as I wanted to show the general approach on how to integrate these services together. However, the devil is in the detail, so the part number two is to quickly show how to design another page on Webflow (single post), fetch the data from Airtable and display a single post using API gateway/orchestration.

The general approach

The approach haven't changed since the last article, so the architecture remains the same as follows:

enter image description here

What needs to be done

  • Webflow page to display a single blog post,
  • A new route /post/{slug}/ in the API gateway,

The single blog post design

We need to design a simple blog post page first. Please keep in mind, we do it without any UX/UI design - just to show the integration, so the design is quite poor and we know about it ๐Ÿ˜Š๐Ÿ˜Š

enter image description here

Three important elements here:

  • Title is a H1 header with a special tag pulled from Airtable post.title variable,
  • Description is taken from the airtable from post.description variable,
  • Image is pulled from Airtable as well from post.image variable

Once the design is done, let's update our gateway

Our preview single blog page is available at https://contentful-test-338fce.webflow.io/post - do not hesitate to check it out :)

So let's get more into the code:

As you can see, we had to write around 13 lines of code to handle /post/{slug}/ request - the route has to find the right post and return post.html view (cached html view from Webflow) with the post variable.

The final result

This is how the final result looks like ๐Ÿ”ฅ

enter image description here

Tags that I used in the Webflow have been parsed and the gateway returned a blog post page.

You can now extend this basic functionality by:

  • Adding comments section (comments can be stored on Airtable and verified by the administrator before they are visible on the blog post page),
  • Adding media sharing buttons,
  • And much much more...

What can I do with similar integrations?

We create B2B platforms, CRM systems, Booking systems, Blogs, Video on demand platforms and Marketplaces. You can integrate MySQL and other more enterprise solutions with Webflow. It gives you a number of options that can be used in many different ways.

... And you still have an option to manage your page using Webflow!

Sky is the limit!

Need more 3rd party services to connect?

Check our article on how to integrate MySQL, Redis and other databases into Webflow.

How to connect Webflow and external databases

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! ;-)