Overview

ZERKO_CMS_URL=https://cms.zerko.app
ZERKO_CMS_API_KEY=zrk_live_your_key_here

X-Zerko-Api-Key: zrk_live_your_key_here

GET /content?type=blog&page=1&limit=12

{
  "data": [],
  "meta": {
    "page": 1,
    "limit": 12,
    "total": 0,
    "pages": 0
  }
}

{
  "data": {
    "full_name": "Asha Mushi",
    "email": "[email protected]",
    "message": "I would like a proposal."
  },
  "sourceUrl": "https://example.com/contact"
}

{
  "bookingTypeId": "consultation_id",
  "customerName": "Asha Mushi",
  "customerEmail": "[email protected]",
  "customerPhone": "+255700000000",
  "startsAt": "2026-08-12T09:00:00+03:00",
  "notes": "First consultation"
}

{
  "productId": "product_id",
  "quantity": 1,
  "firstName": "Asha",
  "lastName": "Mushi",
  "email": "[email protected]",
  "phoneNumber": "+255700000000"
}

POST /newsletter/subscribe
{ "email": "[email protected]", "name": "Asha", "sourceUrl": "https://example.com" }

POST /membership/request
{ "email": "[email protected]", "name": "Asha", "level": "member" }

POST /analytics/events
{ "event": "page_view", "path": "/services", "referrer": "https://google.com" }

{
  "type": "blog",
  "title": "Launching our new service",
  "slug": "launching-our-new-service",
  "excerpt": "A short introduction for listing pages.",
  "content": "<p>The full rich HTML article.</p>",
  "coverImage": "https://cdn.example.com/launch.jpg",
  "featured": true,
  "status": "published"
}

{
  "title": "Launching our updated service",
  "status": "published"
}

PATCH /api/cms/content/{contentId}
{ "status": "archived" }

PATCH /api/cms/content/{contentId}
{ "status": "draft" }

DELETE /api/cms/content/{contentId}

{
  "$id": "article_id",
  "type": "blog",
  "title": "Building better customer experiences",
  "slug": "building-better-customer-experiences",
  "excerpt": "A practical guide for growing teams.",
  "content": "<p>Rich, sanitized HTML content...</p>",
  "coverImage": "https://.../hero.jpg",
  "featured": true,
  "tags": ["customer experience", "growth"],
  "metadata": {
    "client": "Acme Energy",
    "year": "2026",
    "location": "Dar es Salaam, Tanzania",
    "industry": "Energy",
    "scope": "Installation and commissioning",
    "projectStatus": "Completed",
    "websiteUrl": "https://example.com"
  },
  "downloads": [],
  "galleryImages": [
    {
      "id": "gallery_image_id",
      "url": "https://.../project-detail.jpg",
      "altText": "Project installation detail",
      "position": 0
    }
  ],
  "publishedAt": "2026-08-09T10:00:00Z",
  "updatedAt": "2026-08-09T10:00:00Z"
}

type PageProps = { params: Promise<{ slug: string }> };

export default async function ArticlePage({ params }: PageProps) {
  const { slug } = await params;
  const response = await fetch(
    `${process.env.ZERKO_CMS_URL}/api/cms/public/content/${slug}`,
    {
      headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY! },
      next: { revalidate: 60 }
    }
  );

  if (response.status === 404) return <p>Article not found.</p>;
  if (!response.ok) throw new Error("Could not load article");

  const { data: article } = await response.json();
  return (
    <article>
      <h1>{article.title}</h1>
      <div
        className="article-content"
        dangerouslySetInnerHTML={{ __html: article.content }}
      />
    </article>
  );
}

.article-content { color: #27272a; font-size: 1.08rem; line-height: 1.8; }
.article-content h2 { margin: 2.5rem 0 1rem; font-size: 1.8rem; }
.article-content h3 { margin: 2rem 0 .75rem; font-size: 1.35rem; }
.article-content p, .article-content ul, .article-content ol { margin: 1rem 0; }
.article-content blockquote { border-left: 3px solid #c8a45d; padding-left: 1rem; }
.article-content img { display: block; max-width: 100%; height: auto; border-radius: 1rem; }
.article-content a { color: inherit; text-decoration: underline; }
.article-content pre { overflow-x: auto; padding: 1rem; border-radius: .75rem; }

{
  "site": {
    "siteName": "Zerko",
    "tagline": "Build better, faster.",
    "logoUrl": "https://.../logo.png",
    "faviconUrl": "https://.../favicon.png",
    "primaryColor": "#C8A45D",
    "locale": "en",
    "timezone": "Africa/Dar_es_Salaam",
    "seoTitle": "Zerko",
    "seoDescription": "...",
    "heroSlides": [
      "https://.../hero-1.jpg",
      "https://.../hero-2.jpg"
    ],
    "heroSlideshowEnabled": true,
    "heroSlideIntervalSeconds": 3,
    "imageOptimizationEnabled": true,
    "imageQuality": 85,
    "imageMaxWidth": 2560,
    "social": { "linkedin": "https://linkedin.com/company/zerko" }
  },
  "content": [],
  "team": [],
  "partners": [],
  "forms": [],
  "extensions": ["ecommerce", "services"]
}

const { data: publications } = await cms.publications();

return publications.map((publication) => (
  <article key={publication.$id}>
    <h2>{publication.title}</h2>
    {publication.downloads.map((file) => (
      <a key={file.id} href={file.url} download>
        Download {file.name} ({file.mimeType})
      </a>
    ))}
  </article>
));

async function getPosts() {
  const response = await fetch(
    `${process.env.ZERKO_CMS_URL}/api/cms/public/blogs`,
    {
      headers: {
        "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY!
      },
      next: { revalidate: 60 }
    }
  );

  if (!response.ok) throw new Error("Could not load posts");
  return response.json();
}

export default async function BlogPage() {
  const { data: posts } = await getPosts();

  return posts.map((post) => (
    <a key={post.$id} href={`/blog/${post.slug}`}>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
    </a>
  ));
}

const response = await fetch(
  `${process.env.ZERKO_CMS_URL}/api/cms/public/content/${slug}`,
  { headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY } }
);

const { data: article } = await response.json();

const response = await fetch(
  `${process.env.ZERKO_CMS_URL}/api/cms/public/bootstrap`,
  { headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY } }
);

const website = await response.json();
// website.site, website.content, website.team,
// website.partners, website.forms, website.extensions

const response = await fetch(
  "https://cms.zerko.app/api/cms/public/projects?page=1&limit=12",
  { headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY } }
);

if (!response.ok) throw new Error(`Zerko CMS returned ${response.status}`);
const { data: projects, meta } = await response.json();

const response = await fetch(
  "https://cms.zerko.app/api/cms/public/services?page=1&limit=50",
  { headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY } }
);

const { data: services } = await response.json();

return services.map((service) => ({
  title: service.title,
  summary: service.excerpt,
  page: `/services/${service.slug}`,
  image: service.coverImage
}));

{
  "data": {
    "$id": "form_id",
    "name": "Project enquiry",
    "slug": "project-enquiry",
    "successMessage": "Thanks — we received your request.",
    "active": true,
    "fields": [
      {
        "id": "full_name",
        "name": "full_name",
        "label": "Full name",
        "type": "text",
        "required": true,
        "placeholder": "Amina Said",
        "helpText": "",
        "options": []
      },
      {
        "id": "service",
        "name": "service",
        "label": "What do you need?",
        "type": "select",
        "required": true,
        "placeholder": "",
        "helpText": "Choose the closest option.",
        "options": ["Website", "Branding", "Consulting"]
      }
    ]
  }
}

{
  "data": {
    "name": "Amina Said",
    "email": "[email protected]",
    "message": "I would like to discuss a project."
  },
  "sourceUrl": "https://example.com/contact"
}

{
  "submissionId": "submission_id",
  "message": "Thank you. We will be in touch shortly."
}

const { data: products } = await cms.products(1, 24);

const { data: services } = await cms.serviceCatalog(1, 24);

const payment = await cms.checkout({
  productId: product.$id,
  // or serviceId: service.$id,
  quantity: 1,
  firstName: "Amina",
  lastName: "Said",
  email: "[email protected]",
  phoneNumber: "255781000000"
});

// Save payment.reference, then poll until paid or failed.
const latest = await cms.paymentStatus(payment.reference);

const { data: types } = await cms.bookingTypes();
const { data: slots } = await cms.bookingSlots(types[0].$id, "2026-08-15");

await cms.createBooking({
  bookingTypeId: types[0].$id,
  customerName: "Amina Said",
  customerEmail: "[email protected]",
  startsAt: slots.find((slot) => slot.available)!.startsAt
});

const { data: seo } = await cms.seoMeta("blog-slug");
const { data: sitemap } = await cms.sitemap();

await cms.track({ event: "page_view", path: "/pricing" });

await cms.subscribe({
  email: "[email protected]",
  name: "Reader"
});

const access = await cms.membershipAccess("[email protected]");
await cms.requestMembership({ email: "[email protected]", name: "New Member" });