> For the complete documentation index, see [llms.txt](https://docs.feedspring.com/introduction/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feedspring.com/introduction/delivery-methods/webflow-components.md).

# Webflow Components

## Webflow Components

Webflow is a first-class FeedSpring integration. Feeds are built using the Attributes system, added visually in the Webflow Designer — no code editor required. Add the script once, then apply `feedspring` and `feed-field` attributes to elements through the Designer's settings panel.

Because Webflow is one of our largest and most active customer bases, we provide a growing library of [pre-made components](https://www.feedspring.com/components) you can copy and paste directly into your project to get started in seconds.

### **How it works in Webflow**

FeedSpring uses HTML attributes, and Webflow lets you add custom attributes to any element visually. So the entire attributes workflow applies — you just add the attributes through the Designer instead of typing them into markup.

The three core attributes are the same everywhere:

| Attribute                   | Placed on                              | Purpose                                            |
| --------------------------- | -------------------------------------- | -------------------------------------------------- |
| `feedspring="YOUR-FEED-ID"` | A wrapper element                      | Declares a feed container and which feed to render |
| `feedspring="post"`         | A repeating element inside the wrapper | Marks the template that repeats for each post      |
| `feed-field="FIELD-NAME"`   | Any element inside a post              | Targets where a piece of content is injected       |

For the full attribute model, rendering modes, and field behaviour, see Attributes (HTML).

### **Quick start**

#### **1. Add the script**

In Webflow, go to **Site Settings → Custom Code → Head Code** and paste the script for your feed source. For a feed on a single page only, use **Page Settings → Custom Code** instead.

```html
<!-- Instagram -->
<script src="https://scripts.feedspring.com/instagram-attrs.js" async defer></script>

<!-- Google Reviews -->
<script src="https://scripts.feedspring.com/google-attrs.js" async defer></script>

<!-- TikTok -->
<script src="https://scripts.feedspring.com/tiktok-attrs.js" async defer></script>

<!-- Dribbble -->
<script src="https://scripts.feedspring.com/dribbble-attrs.js" async defer></script>

<!-- YouTube -->
<script src="https://scripts.feedspring.com/youtube-attrs.js" async defer></script>
```

Only add the script for the feed types you are using.

#### **2. Add the feed wrapper**

Add a `<div>` (or any container) to your canvas. In the element settings panel, open **Custom Attributes** and add:

* Name: `feedspring`
* Value: `YOUR-FEED-ID`

Your feed ID is available on the feed setup page in the [FeedSpring dashboard](https://app.feedspring.com).

To control rendering, add a second attribute:

* Name: `feed-options`
* Value: `render:dynamic|limit:6`

#### **3. Add the post wrapper**

Add a child `<div>` inside the feed wrapper. In its Custom Attributes, add:

* Name: `feedspring`
* Value: `post`

This is the template that repeats for each post.

#### **4. Add field attributes**

Inside the post wrapper, add the elements you want (images, text, links) and give each a custom attribute:

* Name: `feed-field`
* Value: the field name (e.g. `img`, `caption`, `timestamp`)

Remember to place image fields on Image elements and link fields on Link elements — the element type determines the behaviour. See Rendering Behaviour for the full element rules.

#### **5. Publish**

Publish your site and the feed renders on the next page load.

### **Pre-made components**

The fastest way to start is to copy a ready-built component from the [FeedSpring Components library](https://www.feedspring.com/components). Each component is a fully styled Webflow layout with the wrapper, post template, and field attributes already in place. Paste it into your project, swap in your feed ID, and customise the styling to match your site.

#### **Available fields**

Field names depend on the feed source. See the per-source pages for the full list:

* Instagram fields
* Google Reviews fields
* TikTok fields
* Dribbble fields
* YouTube fields

#### **Next steps**

* Attributes (HTML) — the full attribute model
* Filtering & Limits — `limit`, `skip`, and dashboard filters
* Rendering Behaviour — static vs dynamic, `appear`, locale


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.feedspring.com/introduction/delivery-methods/webflow-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.