Goal: a working /blog index on your destination site, pulling from Mentionwell, in under 5 minutes.
1. Get your credentials
In the Mentionwell dashboard, open your site and click Ship. You'll see three values:
MENTIONWELL_API_URL=https://mentionwell.com
MENTIONWELL_SITE_SLUG=your-site-slug
MENTIONWELL_API_KEY=bgo_read_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Paste those into your destination site's environment (.env.local for local dev, your hosting provider's env settings for prod).
Important:
MENTIONWELL_API_KEYis a server-side key. Never expose it viaNEXT_PUBLIC_,VITE_, or any client-visible env. The dashboard issues a per-site key with read-only scope, but treat it like any secret.
2. Install the SDK (recommended)
npm install mentionwell-reader
The SDK is a tiny wrapper around fetch. You can skip it and call the API directly — see the API reference — but the SDK gives you typed responses and HTML cleanup helpers.
3. Fetch posts
// lib/blog.ts
import { getBlogPostsViaApi, getBlogPostViaApi } from "mentionwell-reader/api";
const config = {
apiUrl: process.env.MENTIONWELL_API_URL!,
siteSlug: process.env.MENTIONWELL_SITE_SLUG!,
apiKey: process.env.MENTIONWELL_API_KEY!
};
export const listPosts = (page = 1, perPage = 12) =>
getBlogPostsViaApi(config, page, perPage);
export const getPost = (slug: string) =>
getBlogPostViaApi(config, slug);
4. Render /blog
// app/blog/page.tsx (Next.js App Router)
import { listPosts } from "@/lib/blog";
export const revalidate = 300;
export default async function BlogIndex() {
const { posts } = await listPosts(1, 12);
return (
<ul>
{posts.map((post) => (
<li key={post.slug}>
<a href={`/blog/${post.slug}`}>{post.title}</a>
<p>{post.excerpt}</p>
</li>
))}
</ul>
);
}
5. Verify
- Approve a draft in the Mentionwell dashboard so at least one post is published.
- Visit
/blogon your site. - You should see the post.
If it's empty, check that all three env vars are set on the running deployment and that the API key matches the one in your Mentionwell dashboard.
What's next
- Add post detail pages → Next.js App Router or your framework's quickstart.
- Wire instant publishing → Webhooks.
- Make it look good → Styling & theming.
- Stuck? → How it works explains the data model so you can debug from first principles.