> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.graze.social/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Embedding Feeds

Any feed you build on Graze can be shown on your own website. You add a single `iframe`, and your readers see the feed's latest posts without leaving your page.

## Getting the embed code

Open your feed in Graze, click the **Share** button (the share icon in the feed's header) and click **Copy Embed**. You'll get something like this, with your own feed's number in place of `123`:

```html
<iframe src="https://graze.social/feeds/embed/123"></iframe>
```

Paste it into your page's HTML and you're done. Everything below is optional.

## Give it a size

An iframe doesn't grow to fit its content, so give it a width and a height that suit your page. The feed scrolls inside the frame.

```html
<iframe
  src="https://graze.social/feeds/embed/123"
  style="width: 100%; height: 600px; border: 0;"
></iframe>
```

> Older versions of this guide included a script to resize the iframe automatically. It doesn't work on other websites, so use a fixed height instead.

## Customising the embed

You change the embed by adding parameters to the end of the `src` address. Start the first one with `?` and join the rest with `&`:

```html
<iframe
  src="https://graze.social/feeds/embed/123?mode=masonry-infinite&brandBar=top&bgColor=white"
  style="width: 100%; height: 600px; border: 0;"
></iframe>
```

### Layout

Use `mode` to choose how posts are laid out. Leave it out for a simple scrolling list.

- `mode=masonry`: a Pinterest-style grid. Readers click **Load more** to see more posts.
- `mode=masonry-infinite`: the same grid, loading more posts as the reader scrolls.
- `mode=carousel`: one row of posts that readers scroll sideways.
- `mode=carousel-auto`: a carousel that moves on to the next post by itself.

Other layout options:

- `limit`: how many posts to load at a time (the default is 20).
- `imageStyle=1`: makes images the star. Good for feeds that are mostly pictures.
- `frameless=1`: drops the embed's own background, so the feed sits directly on your page. A frameless embed also has no Graze bar and no **Post** button.

### Colours

These parameters take any CSS colour, such as `white`, `black` or a hex code. Write a `#` as `%23` in the address, so `#1a1a1a` becomes `%231a1a1a`.

- `bgColor`: the background of each post.
- `primaryTextColor`: the main text colour.
- `secondaryTextColor`: the colour of the smaller, secondary text.
- `replyHeaderBgColor`: the background of the bar shown above replies.
- `replyHeaderTextColor`: the text colour of that bar.

### Font

Use `fontFamily` to set the font to any [Google Font](https://fonts.google.com/). Write spaces as `+`, for example `fontFamily=Open+Sans`.

```html
<iframe
  src="https://graze.social/feeds/embed/123?fontFamily=Open+Sans&primaryTextColor=%23222222"
  style="width: 100%; height: 600px; border: 0;"
></iframe>
```

## The Graze bar and the Post button

By default an embed shows two extras:

- A slim bar along the bottom that reads "Build your own feed with Graze" and links to Graze.
- A **Post** button in the corner that opens the Bluesky composer in a new tab, so readers can join the conversation.

You can change or remove both:

- `brandBar=top` moves the bar to the top. `brandBar=off` removes it.
- `brandBarLabel` changes the words before "Graze", for example `brandBarLabel=Feed+powered+by`.
- `compose=0` removes the **Post** button.
- `composeText` fills in the start of the reader's post. For example, `composeText=%23MyConference` starts every post with your event's hashtag, which helps posts written from your page find their way back into your feed.

Neither appears when you use `frameless=1`.

## Sensitive posts

An embed sits on someone else's website and its readers aren't logged in, so it is more careful than Graze itself:

- Posts that Bluesky says should be hidden, or not shown to logged-out readers, never appear in an embed.
- Images and videos labelled as adult or graphic (for example nudity, porn or gore) are covered. The reader clicks **Show** to see them.
- Posts you've removed from your feed don't appear.

If your page is meant for an adult audience, add `showSensitive=1` to show labelled images and videos without the cover. Posts that must be hidden stay hidden either way.

## Common questions

**My embed is empty.**
If your feed has no posts yet, the embed shows nothing and checks again every 15 seconds. Check that your feed has posts in Graze first.

**Can I show the same feed in two styles on one page?**
Yes. Add two iframes with different parameters.