` block to wrap your feed and applying the attribute directly to this element. Add the attribute `name="feedspring"` and`value="YOUR-UNIQUE-ID"` to the `

` block {% hint style="info" %} Your unique feed ID is available on the feed setup page within the app and can be copied directly from there. {% endhint %}

Wireframe example showing the the feed wrapper enclosing the entire feed

### 2.2. Post Wrapper \* The Post Wrapper contains the main content of a post and is nested inside the Feed Wrapper. This is where you'll add any layout elements related to your posts, such as captions or timestamps. To create the Post Wrapper, add the following attribute to a `

` block that will enclose your post. You can duplicate this block for as many posts as you wish to display. Simply add the attribute `name="feedspring"` and`value="post"`

Wireframe example showing the the post wrapper inside the previously created feed wrapper

*** ## 3. Building Once the feed wrapper and the feed post have been created, you can start adding attributes to the required layout created inside them. For example, if you want to display a timestamp, you can add this attribute to a text element inside the post wrapper. ### 3.1. Available Attributes The following attributes can be added to your layout to start displaying their respective data. {% hint style="info" %} **Post Attribute:** Some attributes can only be added to structure inside the post wrapper, these attributes are labeled as 'Post Attribute' below. All other attributes can be placed anywhere inside your feed wrapper. {% endhint %}

Field	Attribute Name	Attribute Value	Post Attribute*
Review Text	feed-field	review	true
Review Author Image	feed-field	avatar	true
Review Author Name	feed-field	name	true
Star (Active)	feed-field	star	true
Star (Inactive)	feed-field	star-inactive	true
Timestamp	feed-field	timestamp	true
Rating (#)	feed-field	rating	true
Rating (String)	feed-field	rating-string	true
Total Rating	feed-field	total	false
Average Rating	feed-field	average-rating	false
Link	feed-field	link	false

### 3.2. Build Feed Building your feed is super simple, add the following attributes detailed below to your structural content and publish your site to see the feed in action. #### 3.2.1 Review Text To display the **review text**, add the following attribute to a **\** element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper. `name="feed-field"` and `value="review"` #### 3.2.2 Review Author Image To display the **review author image**, add the following attribute to a **\** element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper. `name="feed-field"` and `value="avatar"` #### 3.2.3 Review Authors Name To display the **review author name**, add the following attribute to a **\** element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper. `name="feed-field"` and `value="name"` #### 3.2.4 Star Rating To display star ratings for your reviews, you need to include two elements in your layout: 1. **Active Star**: This represents a positive rating and is typically yellow and filled. 2. **Inactive Star**: This represents a missing rating and is usually greyed-out or has lower opacity. FeedSpring will handle the display of these elements to reflect the rating. For example, for a 4/5 rating, FeedSpring will display 4 active stars and 1 inactive star. **Active Star** To display an active star, add the attribute: `name="feed-field" value="star"` **Inactive Star** To display an inactive star, add the attribute: `name="feed-field" value="star-inactive"` #### 3.2.5 Timestamp To display the **timestamp**, add the following attribute to a **\** element on your page. Since this attribute is related to a post, it should be placed within an element that has the Post Wrapper. `name="feed-field"` and `value="timestamp"` {% hint style="info" %} **Timestamp Format:** We also provide options to format the timestamp to suit your own requirements. Please review our [timestamp documentation](https://docs.feedspring.com/feedspring/getting-started/options-and-advanced/timestamps) to learn more about this. {% endhint %} #### 3.2.6 Rating (#) To display the **rating**, add the following attribute to a **\** element on your page. *This will display the rating as a number, for example '4'* `name="feed-field"` and `value="rating"` #### 3.2.7 Rating (String) To display the **rating** as a string, add the following attribute to a **\** element on your page. *This will display the rating as a string, for example 'four'* `name="feed-field"` and `value="rating-string"` #### 3.2.8 Total Rating To display the **total rating**, add the following attribute to a **\** element on your page. `name="feed-field"` and `value="total"` #### 3.2.9 Average Rating To display the **average rating,** add the following attribute to a **\** element on your page. `name="feed-field"` and `value="average-rating"` #### 3.2.10 Link To **link** to the business page, add the following attribute to a **\** element on your page. `name="feed-field"` and `value="link"` *** ## 4. Additional Settings FeedSpring provides a range of advanced options to further customize your feeds and enhance their functionality. Explore the following sections to discover how to implement these features into your builds: ### 4.1 Feed Options [Learn about additional options](https://docs.feedspring.com/feedspring/getting-started/options-and-advanced/feed-options) you can add to your feeds, such as language tags and more. ### 4.2 Placeholder & Loading [Learn how to create a seamless](https://docs.feedspring.com/feedspring/getting-started/options-and-advanced/placeholder-and-loading) loading experience for your feeds using placeholders. ### 4.3 Dynamic Attribute [Learn how to create a dynamic feed](https://docs.feedspring.com/feedspring/getting-started/options-and-advanced/dynamic-feeds), using the layout of a single post. ### 4.4 Timestamp [Learn how to adjust timestamp format](https://docs.feedspring.com/feedspring/getting-started/options-and-advanced/timestamps) to suit exactly what you want for your feed. ### 4.5 Coded Solutions [View our collection of coded solutions](https://docs.feedspring.com/feedspring/getting-started/options-and-advanced/custom-code) built to help you solve problems with simple CSS/JS