Tutorials

Tutorials

Hands-on walkthroughs that combine the dashboard, headless APIs, and integrations. Each section includes estimated effort, prerequisites, and verification steps.

Tutorial 1: Launch a Hotel Site in 15 Minutes

Goal: Publish a fully branded hotel microsite using the built-in template.

Time: 15 minutes

Prerequisites:

  • Admin-level access to GammaCMS.
  • Brand assets (logo SVG, hero photography, primary color palette).
  • Sample copy for rooms, dining, amenities, and CTAs.

Steps

  1. Create Organization (if needed)

    • Visit /admin/organizations/organization/add/.
    • Add name, slug, and primary contact.
    • Save and switch to the new organization in the dashboard.

  2. Create Site from Template

    • Navigate to Sites → New Site.
    • Select the Hotel Classic template.
    • Enter site name (Hampton Bay Retreat), primary domain (hamptonbay.gammacms.com), and optional custom domain.
    • Click Create Site.

  3. Brand the Site

    • Open Settings → Theme inside the site editor (coming soon). Until then, adjust colors via CSS tokens in frontend/app/globals.css or by editing section background settings.
    • Upload logo and favicon under Settings → Branding.

  4. Customize Home Page

    • Go to Pages → Home.
    • Update hero section copy, background image, and CTA buttons.
    • Replace placeholder highlights with property-specific selling points.
    • Add testimonials or local experiences sections as needed.

  5. Verify Navigation

    • Open Navigation tab.
    • Confirm primary menu links to Rooms, Dining, Experiences, Contact.
    • Add a Specials link pointing to a promotional landing page.

  6. Preview & Publish

    • Use the Preview toggle to review changes.
    • Click Save Draft, then Publish when ready.
    • Confirm the site loads at https://hamptonbay.gammacms.com.

  7. Optional: Configure Custom Domain

    • Update DNS (CNAME to your hosting provider).
    • Add domain under Sites → Domains and verify SSL issuance.

Validation Checklist

  • All hero CTAs point to live pages.
  • Mobile preview looks correct (use responsive mode in browser dev tools).
  • Google Lighthouse score > 80 (performance + accessibility).

Tutorial 2: Trigger a Marketing Email When Pages Publish

Goal: Notify the hotel marketing automation platform whenever a page is published.

Time: 20 minutes

Prerequisites:

  • Admin role in GammaCMS.
  • HTTPS endpoint capable of receiving webhooks (e.g., a Zapier Catch Hook, Make scenario, or custom serverless function).
  • API credentials for the downstream marketing tool (optional for basic demo).

Steps

  1. Prepare the Destination Endpoint

    • For Zapier: create a new Zap → Trigger → Webhooks by Zapier → Catch Hook.
    • Copy the provided HTTPS URL.

  2. Create Webhook in GammaCMS

    • Go to Settings → Webhooks.
    • Click Create Webhook.
    • Enter name Marketing Publish Hook and paste the Zapier URL.
    • Select events page.published and page.unpublished.
    • Save — copy the secret displayed once.

  3. Secure the Endpoint

    • In Zapier (or your code), verify X-GammaCMS-Signature using the secret (HMAC SHA256). Zapier Code steps can run a quick validation.

  4. Test the Hook

    • Back in GammaCMS, click Test next to the new webhook.
    • Ensure the downstream tool logs the delivery and shows the payload (page slug, title, organization ID).

  5. Build the Automation

    • In Zapier, add an Action to send an email (e.g., Gmail, SendGrid) or create a new campaign in Mailchimp.
    • Map JSON payload fields to email body (page title, preview URL, author).

  6. Publish a Page

    • Edit any page, click Publish.
    • Confirm the webhook fires and the automation sends the email.

Troubleshooting

SymptomFix
Zapier shows no requestEnsure webhook is active and organization ID header is present. Test again.
Signature mismatchConfirm your code uses the exact secret and raw request body.
Email not deliveredCheck action app credentials and rate limits; view webhook delivery history in GammaCMS.

Extension Ideas

  • Route different page types to different email lists.
  • Add Slack notifications for the content team.
  • Store publish events in a data warehouse via the public API.

Tutorial 3: Build a Static Landing Page with the Public API

Goal: Generate a marketing landing page in a Next.js site using GammaCMS public endpoints and Incremental Static Regeneration (ISR).

Time: 30 minutes

Prerequisites:

  • Access to a GammaCMS organization with at least one published page.
  • Generated API key with read permissions.
  • Node.js 18 and Next.js project scaffold.

Steps

  1. Create Project Skeleton

    • npx create-next-app@latest hotel-landing --typescript.
    • cd hotel-landing and install axios (or use fetch).

  2. Configure Environment Variables

    • Add .env.local: 
      GAMMACMS_API_URL=https://api.gammacms.com/api/public/v1
GAMMACMS_API_KEY=pk_live_...
GAMMACMS_ORG_ID=ec9a9dcb-24d7-4074-9f5c-9c2fcee5c462
GAMMACMS_SITE_DOMAIN=hamptonbay.gammacms.com

  3. Create API Client

    • Add lib/gammacms.ts:

      const baseUrl = process.env.GAMMACMS_API_URL!;
 
async function request(path: string) {
  const response = await fetch(`${baseUrl}${path}`, {
    headers: {
      "X-API-Key": process.env.GAMMACMS_API_KEY!,
      "X-Organization-ID": process.env.GAMMACMS_ORG_ID!,
    },
    next: { revalidate: 60 },
  });
  if (!response.ok) throw new Error("Request failed");
  return response.json();
}
 
export async function getPage(slug: string) {
  return request(
    `/sites/${process.env.GAMMACMS_SITE_DOMAIN}/pages/${slug}/`
  );
}

  4. Implement Page Route

    • In app/[slug]/page.tsx:

      import { getPage } from '@/lib/gammacms';
import { RichTextRenderer } from '@/components/rich-text-renderer';
 
export const revalidate = 60;
 
export default async function Page({ params }: { params: { slug: string } }) {
  const page = await getPage(params.slug);
  return (
    <main>
      <h1>{page.title}</h1>
      <RichTextRenderer content={page.content.lexical}</n>
    </main>
  );
}

      (Replace with your rendering logic for sections.)

  5. Generate Static Params

    • Fetch published slugs from /sites/{domain}/pages/ with ?status=published and export generateStaticParams to prebuild top pages.

  6. Deploy to Vercel or Netlify

    • Add environment variables in the hosting dashboard.
    • Deploy; ISR ensures updates propagate within 60 seconds of publish.

Validation Checklist

  • Page renders with hotel-specific content.
  • Re-publish in GammaCMS → page updates after ISR window.
  • Build includes error handling for unpublished slugs.

Need a tutorial that isn’t listed? Open an issue or reach out to the product team.

Client QuickstartIndex