Documentation

Embed options

Configure your feed directly in HTML using data- attributes on the container element.

Basic usage

Pane has two embed modes — Standard (custom element) and Compatibility (data attribute). Both support the same layout options. Learn when to use each.

Standard (recommended)

<pane-widget
  feed-id="abc123"
  data-columns="4"
  data-gap="8"
  data-border-radius="12"
></pane-widget>

Compatibility

<div
  data-pane-feed="abc123"
  data-columns="4"
  data-gap="8"
  data-border-radius="12"
></div>

Available attributes

Attribute	Type	Default	Description
`feed-id`	`string`	—	Required (Standard mode). Your feed's unique embed key — place on <pane-widget>. Found in the dashboard under Feeds.
`data-pane-feed`	`string`	—	Required (Compatibility mode). Your feed's unique embed key — place on any <div>. Equivalent to feed-id.
`data-columns`	`number`	3	Number of columns in the grid. Recommended values: 2–6. The grid is always equal-width columns.
`data-gap`	`number (px)`	4	Gap between posts in pixels. A value of 0 creates a seamless mosaic effect.
`data-border-radius`	`number (px)`	0	Border radius of each post in pixels. Set to 8 or 12 for a card-like look.

Examples

3-column grid (default)

<pane-widget feed-id="your-key"></pane-widget>

4-column seamless mosaic

<pane-widget
  feed-id="your-key"
  data-columns="4"
  data-gap="0"
></pane-widget>

2-column rounded cards

<pane-widget
  feed-id="your-key"
  data-columns="2"
  data-gap="12"
  data-border-radius="16"
></pane-widget>

Post count

The number of posts displayed is controlled from the dashboard, not via HTML attributes. Go to your feed’s settings and adjust Max posts. This is enforced server-side to prevent clients from requesting more posts than your plan allows.

Multiple feeds on one page

You can embed multiple feeds on the same page. Each element needs its ownfeed-id key. The loader script only needs to appear once — the type="module" attribute tells the browser to deduplicate it automatically.

<!-- Feed 1 -->
<pane-widget feed-id="key-one"></pane-widget>

<!-- Feed 2 -->
<pane-widget feed-id="key-two"></pane-widget>

<!-- Loader — only once -->
<script>
(()=>{const d=document,s=d.createElement("script");
s.type="module";s.src="https://wgt.pane.so/widget.js";
d.head.append(s)})()
</script>