Blot
Back to home

Integration Guide

Add a blog to your website in minutes. Copy the code snippets below or use the AI prompt to get personalized help.

AI Integration Prompt
Copy this prompt and paste it into Claude, ChatGPT, Cursor, or any AI assistant. Fill in the bracketed sections with your details.
I want to integrate Blot (blot.so) as my headless CMS for blog content. Here's what I need help with:

**My Setup:**
- Framework: [Next.js / Astro / React / Vue / Other]
- Styling: [Tailwind CSS / CSS Modules / Styled Components / Other]
- My Blot site slug: [YOUR_SITE_SLUG]

**What Blot Provides:**
- REST API at: https://blot.so/api/v1/sites/{site-slug}/posts
- Content is returned as HTML (from TipTap editor)
- No authentication needed for published posts
- Supports pagination, category/tag filtering

**API Response Format:**
```json
{
  "posts": [{
    "id": "uuid",
    "title": "string",
    "slug": "string",
    "content": "<p>HTML content</p>",
    "excerpt": "string",
    "cover_image": "url",
    "published_at": "ISO8601",
    "reading_time": 5,
    "category": { "name": "string", "slug": "string" },
    "author": { "name": "string", "avatar": "url" },
    "tags": [{ "name": "string", "slug": "string" }],
    "meta_title": "string",
    "meta_description": "string"
  }],
  "pagination": { "page": 1, "total": 42, "hasMore": true }
}
```

**Please help me:**
1. Create an API client to fetch posts from Blot
2. Build a blog listing page with pagination
3. Build individual post pages with proper SEO meta tags
4. Style the HTML content properly (recommend @tailwindcss/typography)
5. Set up webhooks to rebuild my site when content changes (if static)

Use TypeScript and follow best practices for my framework.
Fetch Posts in 3 Lines
No authentication needed for published content. Just fetch and display.
// Fetch posts from Blot - no auth needed for published content
const response = await fetch('https://blot.so/api/v1/sites/YOUR_SITE_SLUG/posts');
const { posts, pagination } = await response.json();

// Display posts
posts.forEach(post => {
  console.log(post.title, post.slug, post.excerpt);
});
API Endpoint
https://blot.so/api/v1/sites/YOUR_SITE_SLUG/posts

Query Parameters:

  • page - Page number (default: 1)
  • limit - Items per page (default: 10, max: 100)
  • category - Filter by category slug
  • tag - Filter by tag slug