> 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/attributes-html.md).
# Attributes (HTML)
## Attributes (HTML)
The Attributes delivery method lets you build a feed into any HTML page by adding two attributes to your own markup: one on a wrapper element, one on each post. FeedSpring handles data fetching, field injection, and updates automatically.
It is the fastest way to get a live feed on any website. No build step, no backend, no JavaScript to write. If you can edit HTML, you can ship a feed in minutes.
### When to use Attributes
Attributes is the right choice when:
* You are building in Webflow, Wordpress, Shopify, or any tool that exposes HTML and `` access.
* You want full design control without writing React or consuming an API.
* You need the fastest possible setup with no package installs or build tooling.
* You are prototyping, building marketing pages, or working in a no-code or low-code environment.
Choose a different delivery method if:
* You are working inside a React, Next.js, or similar framework, use React components.
* You are building in Framer and want design-time controls, use Framer components.
* You need server-side rendering, custom caching, or fully custom data handling, use the API.
### How it works
FeedSpring injects a small script into your page. On load, the script looks for any element with a `feedspring` attribute, fetches the feed data for that ID, then walks the DOM to find post wrappers and field targets. Your HTML stays yours, the data is layered on top.
The entire system uses three attributes:
| 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 (or the wrapper for profile fields) | Targets where a piece of content is injected |
That's the whole model. Everything else, filtering, limits, rendering mode, locale formatting, is configured with one optional `feed-options` attribute.
### Quick install
Three steps from a fresh account to a live feed.
#### 1. Add the script for your feed source
Paste the script for your feed type into your site's ``. In Webflow, that's Site Settings → Custom Code → Head Code. In plain HTML, inside ``.
```html
```
Only load the scripts for feed types you are actually using.
#### 2. Build your wrapper and post
Mark up a container and a single post template. Inside the post, place elements with `feed-field` attributes wherever you want data to appear.
```html
```
The `feedspring="post"` element acts as a template. In `render:dynamic` mode, FeedSpring clones it for each post in the feed and injects the right data into each copy.
#### 3. Publish
Replace `YOUR-FEED-ID` with the ID from your FeedSpring dashboard and publish the page. The feed renders on the next page load.
### The three attributes in detail
#### `feedspring="YOUR-FEED-ID"`, the feed wrapper
Placed on any element that will contain the feed. Typically a `` or `
`.
Each feed ID starts with a source prefix so the script knows which source to render:
| Prefix | Source |
| -------------- | -------------- |
| `inst_...` | Instagram |
| `google_...` | Google Reviews |
| `tiktok_...` | TikTok |
| `dribbble_...` | Dribbble |
Example:
```html
```
* Each page can have multiple wrappers, including multiple feeds from different sources.
* The wrapper is where you also add `feed-options` to control rendering.
* Any `feed-field` attribute placed on or inside the wrapper but outside a post template is treated as a profile-level field. Examples: follower count, average rating, business name.
#### `feedspring="post"`, the post template
The repeating element. FeedSpring finds the elements inside the wrapper with `feedspring="post"` and uses them to render per-item content.
* All `feed-field` attributes inside a post are post-level and receive the data for that specific post.
* Any styling, hover states, animations, or interactions you add to the template are preserved in each rendered copy.
* `feed-field="item"` is a supported alias for `feedspring="post"`, both mark an element as a post template.
#### `feed-field="FIELD-NAME"`, the data target
Placed on the element that should display a piece of data. The element type matters:
| Element | Behaviour |
| ----------------- | ------------------------------------------------------------------------------ |
| `![]()
` | The `src` attribute is set to the field value. `srcset` is removed if present. |
| `` | The `href` attribute is set to the field value. |
| `