LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • What is Flotiq?
  • Prerequisites
  • 1. Setting up Flotiq
  • Create a content type
  • Add sample data
  • 2. Setting Up Webstudio
  • Create a new project
  • Create a Dynamic Page
  • Add a GraphQL Data Variable
  • Bind Flotiq data to your page
  • Create a listing page
  • Conclusion

Was this helpful?

Edit on GitHub
  1. university
  2. Integrations

How to integrate Flotiq with Webstudio

Learn how to integrate Flotiq with Webstudio to build dynamic, content-driven websites—visually.

PreviousHow to integrate a Webhook Form with AirtableNextCraft

Last updated 1 month ago

Was this helpful?

This guide demonstrates how to integrate Flotiq with Webstudio to build a fully dynamic, content-driven website.

What is Flotiq?

Flotiq is a headless CMS designed to make content management simple and powerful. It allows you to create, manage, and deliver content through APIs, offering flexibility and scalability.

Paired with Webstudio, you can design dynamic frontends while keeping content stored and managed in Flotiq.

Prerequisites

Before starting, ensure you have the following:

  • Flotiq account – .

  • Flotiq API Key – Learn more about .

  • Webstudio account – .

Webstudio’s Pro tier plan is required to use the Resource feature. Flotiq does not require a paid plan.

1. Setting up Flotiq

Create a content type

Start by creating a content type in Flotiq. For this tutorial, we’ll use Flotiq’s Blogpost Template, which includes fields like title, slug, excerpt, content, and headerImage.

Add sample data

Populate your content type with a few example blog posts to test your integration.

2. Setting Up Webstudio

Create a new project

  1. Log in to Webstudio and either create a new project or edit an existing one.

  2. Choose a template or start with a blank project.

Create a Dynamic Page

To create a page with a dynamic path, go to Pages > Add New Page. In the Dynamic Path field, use a parameter to represent the dynamic part of the URL, such as the slug of your blog posts.

Add a GraphQL Data Variable

Go to Page Settings > Data Variables > Add New Variable.

Next, configure the variable:

  • Name: A custom name for the variable.

  • Type: Use GraphQL for this integration.

  • URL: Set to https://api.flotiq.com/api/graphql.

  • Headers: Add a header with X-Auth-Token as the key and your Flotiq API Key as the value.

  • Query: Use a GraphQL query to fetch data. Here’s an example for the Blogpost template:

    query Post($slug: String = "") {
      blogpost(field: "slug", value: $slug) {
        id
        title
        slug
        excerpt
        headerImage {
            alt
            url
        }
      }
    }
  • GraphQL Variables: Bind the slug from the dynamic path:

    {
      "slug": system.params.slug
    }

The variable should be configured as shown in the screenshot below:

Test the variable - if it is configured correctly, the fetched Flotiq content will appear in the Inspect Tool.

Bind Flotiq data to your page

Bind data to components

Add components such as headings or images to your page.

To bind data:

  • Select a component and navigate to its settings.

  • Click the "+" button next to the desired property (e.g., Text Content).

For images add an Image Component, and bind the Source Property to the image URL: "https://api.flotiq.com/" + VariableName.data.data.blogpost.headerImage[0].url.

Create a listing page

Showcase multiple content items, like blog posts or portfolio entries, on a single page by fetching and displaying a list of data.

Add a new Data Variable

This variable will fetch a list of all objects from your Flotiq content type. Example query for BlogpostList:

query Posts {
 blogpostList {
   id
   title
   slug
   excerpt
   headerImage {
       alt
       url
   }
 }
}

Add a collection component

  • The collection component iterates over each item and replicates your design. Bind the collectionItem to get the current iteration's data.

Customize the collection

Add components to the collection item (e.g., cards with titles, excerpts, and images). Editing one item applies the same layout to all items.

Conclusion

Now you should have your content from Flotiq displayed on Webstudio on both a listing page and a dynamic page that changes depending on the slug viewed.

in Webstudio allow you to create a single template that dynamically changes based on the currently viewed URL.

In the , provide a test value.

fetch external content.

Once your Flotiq data is fetched, you can it to your components and page settings.

Open the and map values from your Flotiq data variable, for example, VariableName.data.data.blogpost.title.

Bind the list (array) of items from the Data Variable to the : <Data Variable Name>.data.data.<Content Type API Name>List.

🔗
Dynamic pages
Expression Editor
collection
Register here
Flotiq API Keys
Sign up here
GraphQL Data Variables
Create content type in Flotiq
Create a Page with a Dynamic Path
Set the dynamic path
Configure a data variable
Create overwiev page
Address Bar
bind