Sign in to your account
Open your CrossFeed dashboard and sign in with your email and password.
- Navigate to the Dashboard from the CrossFeed landing page (click "Get Started Free" or "Dashboard" in the nav).
- Enter your email and password.
- Click Sign In.
Demo mode: The login form comes pre-filled with demo credentials (demo@crossfeed.app / crossfeed). Just click Sign In to explore.
Once authenticated, you'll be redirected to the main dashboard. Sessions last 30 days, so you won't need to log in often.
Explore your dashboard
The dashboard shows all your connected social media feeds at a glance.
Each feed card displays:
- Platform icon and handle — e.g. the Instagram camera icon and
@poshpeony01 - Post count — how many posts have been synced
- Last synced — when content was last pulled from the platform
- Status badge — green = active, orange = paused, red = error
Each card has two action buttons:
- Get Embed Code — opens the visual embed builder for that feed
- View API — opens the raw JSON feed in a new tab, useful for developers
The Connect Feed button is coming soon. For now, demo feeds are pre-configured for you to explore the full workflow.
Use the embed builder
The embed builder is a visual tool that lets you customize how your feed looks and generates the code snippet to paste on your site.
- From the dashboard, click Get Embed Code on any feed card.
- On the left panel, pick a layout (Grid, Masonry, Carousel, or List).
- Adjust the settings:
- Columns — how many columns to display (1–6)
- Number of Posts — how many posts to show (1–50)
- Gap — spacing between items in pixels (0–32)
- Link to original posts — make images clickable to the source
- Lazy load images — defer offscreen images for performance
- Watch the live preview update in real-time on the right panel as you tweak settings.
- When you're happy, click the Copy button above the code snippet.
The preview is a live render of the actual embed script — what you see is exactly what your visitors will see.
Add the embed to your website
Paste the copied code snippet into your website's HTML wherever you want the feed to appear.
<!-- 1. Add a container where the feed will render -->
<div id="crossfeed-widget"></div>
<!-- 2. Include the embed script -->
<script src="https://crossfeed.app/embed.js"
data-feed="feed_poshpeony"
data-target="#crossfeed-widget"
data-layout="grid"
data-columns="3"
data-limit="9"
data-gap="8"
data-link="true"
data-lazy="true">
</script>That's it. The script handles everything automatically:
- Shows a skeleton loader with shimmer animation while fetching
- Fetches your latest posts from the CrossFeed API
- Renders the feed in your chosen layout
- Uses Shadow DOM so CrossFeed styles never conflict with your site's CSS
The embed script is under 8 KB gzipped. It loads asynchronously and won't block your page.
Choose a layout
CrossFeed ships with four built-in layouts. Set the data-layout attribute to switch between them.
Grid
Fixed columns, square images. Clean and uniform — great for Instagram-style feeds.
Masonry
Pinterest-style columns with variable image heights. Best for mixed content and photography.
Carousel
Horizontal scroll with snap points and prev/next buttons. Ideal for featured content or limited space.
List
Vertical list with thumbnails, captions, and dates. Perfect for blogs or news-style feeds.
All layouts are responsive out of the box — they automatically adapt to 2 columns on mobile screens (under 640px).
Configure with data attributes
Every aspect of the embed is controlled through data-* attributes on the script tag. No JavaScript configuration needed.
| Attribute | Default | Description |
|---|---|---|
data-feed |
— | Required. Your feed ID (e.g. feed_poshpeony) |
data-target |
auto | CSS selector for the container element. If omitted, a div is created automatically. |
data-layout |
grid |
One of: grid, masonry, carousel, list |
data-columns |
3 |
Number of columns (1–6) |
data-limit |
9 |
Number of posts to display (1–50) |
data-gap |
8 |
Space between items in pixels (0–32) |
data-link |
true |
Wrap images in links to the original post |
data-lazy |
true |
Lazy load offscreen images for performance |
Use the REST API directly
If you prefer to build your own UI or integrate with a framework, you can fetch feed data directly from the API.
Get feed posts
# Fetch the latest 9 posts
GET /v1/feed/{feed_id}?limit=9
# With API key authentication
curl https://crossfeed.app/v1/feed/feed_poshpeony?limit=9 \
-H "X-CrossFeed-Key: cf_your_api_key"Response
{
"feed": {
"id": "feed_poshpeony",
"platform": "instagram",
"handle": "@poshpeony01"
},
"posts": [
{
"id": "post_001",
"image_url": "/media/feed_poshpeony/post_001",
"caption": "Sunday brunch vibes",
"source_url": "https://instagram.com/p/...",
"posted_at": "2025-01-15T10:30:00Z"
}
]
}Get feed metadata
GET /v1/feed/{feed_id}/metaReturns feed name, platform, avatar URL, total post count, and last sync timestamp.
Rate limits apply based on your plan. Free tier allows 1,000 API calls per day. Check the plans section for details.
Plans and pricing
CrossFeed offers five tiers to match your needs. All plans include the embed script and REST API access.
- Free $0/mo
- Creator $5/mo
- Pro POPULAR $12/mo
- Agency $49/mo
- Scale $99/mo
| Feature | Free | Creator | Pro | Agency |
|---|---|---|---|---|
| Feeds | 1 | 3 | 10 | 50 |
| API calls/day | 1K | 10K | 50K | 200K |
| Sync interval | 24h | 6h | 1h | 15 min |
| Layouts | Grid | All 4 | All 4 | All 4 |
| Watermark | Yes | No | No | No |
The Scale plan ($99/mo) adds unlimited feeds, 1M API calls/day, 5-minute sync, and white-label branding.
Troubleshooting
"No posts found" message
- Double-check the
data-feedvalue matches your feed ID exactly. - Make sure the feed has been synced at least once (check the dashboard for "Last Synced" timestamp).
"Failed to load feed" error
- Verify the embed script
srcURL is correct and accessible. - Check the browser console for
[CrossFeed]error messages with details. - If using domain restriction (Pro+), ensure your site's domain is in your allowed list.
Styles look broken on my site
- CrossFeed uses Shadow DOM for style isolation — your site's CSS should not affect it. If it does, ensure the container element (
data-target) isn't being styled withall: initialor similar resets.
Images load slowly
- Make sure
data-lazy="true"is set (default). This defers offscreen images. - Reduce the number of posts with
data-limitif you're loading many at once.
Carousel buttons don't scroll
- The carousel requires enough posts to overflow the container. Try increasing
data-limitor narrowing the container width.
Need help? Open the browser console and look for messages prefixed with [CrossFeed] — they'll point you to the issue.