Embedding Feeds

Embedding your feed on your website is as easy as adding a single line of code.

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

With this you'll get your feed rendered just like it is on Graze Social.

## Customizing the feed

The feed support light customization though query string parameters.

### Theme

The following parameters are supported:

* `bgColor` - The background color of a post.
* `primaryTextColor` - The primary text color of a post.
* `secondaryTextColor` - The secondary text color of a post.
* `replyHeaderBgColor` - The background color of a reply header.
* `replyHeaderTextColor` - The text color of a reply header.
* `font` - Set the default font to any [Google Font](https://fonts.google.com/)

You can also hide the "frame" from the iframe with the `frameless=1` param.

```html
<iframe
  src="https://graze.social/feeds/embed/123?bgColor=white&primaryTextColor=black&secondaryTextColor=gray"
></iframe>```

### Presentation Type

Using query string params you can modify the type of layout for the embed.

* `carousel` - Present the post in a carousel
* `carousel-auto` - A carousel that automatically scrolls to the next item
* `masonry` - Lay the posts out pinterest style, users must click to load more posts
* `masonry-infinite` - A masonry layout that loads more posts as the user scrolls

If you have a feed that consists mainly of images you can use the `imageStyle=1` param and the images will be featured more prominently.

## Integrating the iframe

The default iframe is ugly and it is very obvious that it is an iframe.If you're embedding a feed on your website, you probably want it to feel like part of your website.  
To enable this the `iframe` will post a message to the parent window when it resizes. The parent window can then adjust the height of the iframe to fit the content.

```html
<div>
  <iframe
    src="http://localhost:4321/feeds/embed/1702"
    frameborder="0"
    style="width: 100%; border: none"
    id="myIframe"
  ></iframe>

  <script>
    window.addEventListener(
      "message",
      function ({ data }) {
        if (!data || !Array.isArray(data)) return;

        // We'll send an event with the name `setHeight` and the data will be a
        // object with the `id` of the iframe and the `height` of the iframe.
        const [eventName, eventData] = data;

        switch (eventName) {
          case "setHeight": {
            const iframes = document.getElementsByTagName("iframe");

            for (const iframe of iframes) {
              if (iframe.id === eventData.id) {
                iframe.style.height = eventData.height + "px";
                break;
              }
            }
          }
        }
      },
      false
    );
  </script>
</div>```

Updated on: 01/07/2026