# Chipp Sites

Generate AI-powered landing pages for your chatbot agent with built-in chat, pricing, and custom domains.

---

Chipp Sites lets you generate a full landing page for your AI agent directly from the builder. Describe what you want, and the Alchemist builds a multi-page website complete with navigation, responsive design, and a built-in link to your chatbot. Sites are published to `{slug}.sites.chipp.ai` or your own custom domain.

## What You Get

Each site is a self-contained, server-rendered website that includes:

- **AI-generated HTML and CSS** tailored to your agent's purpose
- **Multi-page support** with automatic navigation (Home, About, Pricing, etc.)
- **Same-origin chat** -- your chatbot lives on the same domain as your site
- **SEO-ready** markup with proper meta tags
- **Responsive design** that works on mobile, tablet, and desktop
- **Version history** so you can roll back to any previous version
- **Stripe Connect integration** for pricing pages with real checkout buttons

## Creating a Site


  **1.** 
    <strong>Open the Site tab</strong>

    Navigate to your app in the builder and click the **Site** tab. You will see an empty state prompting you to create your first site.
  


  **2.** 
    <strong>Describe your site</strong>

    Open the Alchemist panel and describe the landing page you want. Be specific about the purpose, audience, and content:

    - "Create a landing page for a legal document review AI. Include sections for features, how it works, and a CTA to try the chatbot."
    - "Build a professional site for my fitness coaching agent with testimonials, pricing tiers, and an about section."
    - "Make a minimal one-page site with a hero section and a 'Start chatting' button."
  


  **3.** 
    <strong>Watch the progressive build</strong>

    The AI generates your site in multiple phases. As each phase completes, the live preview on the right updates with a smooth transition so you can see the site taking shape in real time.
  


  **4.** 
    <strong>Iterate</strong>

    Ask the Alchemist to make changes:

    - "Add a pricing section with three tiers"
    - "Change the hero background to a gradient"
    - "Make the testimonials section more prominent"
    - "Update the copy to target small business owners"

    Each refinement saves a new draft automatically.
  


  **5.** 
    <strong>Publish</strong>

    Click the **Publish Site** button in the toolbar. Your site goes live immediately at your vanity subdomain.
  


## Multi-Page Support

Sites can have multiple pages with their own content and navigation. The home page (`/`) is always present. Additional pages are managed through page tabs above the preview.

### Adding pages

Click the **+** button in the page tabs bar, enter a title (e.g., "About" or "Pricing"), and the slug is auto-generated from the title. You can then ask the Alchemist to generate content for the new page.

### Removing pages

Click the **x** button on any page tab (except the home page) to remove it.

### Navigation

When your site has multiple pages, a navigation bar is automatically included with links to each page. The AI generates navigation items based on your page structure.

## Publishing and URLs

When you publish a site, it is served at your app's vanity subdomain:

```
https://{your-slug}.sites.chipp.ai
```

The toolbar shows a **LIVE** badge and the full URL with copy and edit buttons when your site is published.

| Action | What happens |
|--------|-------------|
| **Publish** | Makes the current draft live. Creates a published version snapshot. |
| **Unpublish** | Takes the site offline. The URL returns a 404 until you publish again. |
| **Edit after publishing** | Ask the Alchemist to make changes, then publish again to push updates. |

> **Note:** Your app's vanity subdomain is shared between your site and your chatbot. The site is served at the root URL, while the chat interface is accessible via the site's CTA buttons or direct chat links.

## Custom Domains

Connect your own domain to serve the site at a branded URL. Click the **Domain** button in the toolbar to open the custom domain drawer.

Custom domains require:

1. A **Builder plan** or higher
2. A CNAME DNS record pointing to `fallback.chipp.ai`
3. SSL is provisioned automatically via Cloudflare

See the [Custom Domains guide](/docs/guides/custom-domains) for detailed DNS configuration instructions.

## Pricing Pages and Stripe Connect

If your site includes a pricing page with checkout buttons, those buttons create real Stripe Checkout sessions for your consumers. This requires Stripe Connect to be configured.

> **Warning:** If your site has a pricing page but Stripe Connect is not set up, a warning banner appears in the builder. Checkout buttons will not work until you connect a Stripe account in your billing settings.

The checkout flow works like this:

1. Consumer clicks a pricing button on your published site
2. They are redirected to Stripe Checkout (an anonymous consumer is created if needed)
3. After payment, Stripe redirects them back to your site
4. Credits are fulfilled automatically via webhook

See the [Selling Access guide](/docs/guides/selling-access) for details on configuring credit packages and pricing tiers.

## Version History

Every draft save and publish creates a version. Click the **History** button in the toolbar to open the version history drawer.

From the version history you can:

- **View** all previous versions with timestamps
- **Restore** a previous version, which makes it the current live version
- **Compare** what changed between versions

This gives you a safety net when making changes -- you can always roll back to a version that was working well.

## Site Content Structure

Under the hood, site content is stored as a structured JSON object with:

- **Pages array** -- Each page has a `slug`, `title`, and `html` body
- **Navigation config** -- Automatically generated link items, with optional CTA styling
- **CSS** -- Site-specific styles separate from your chatbot's custom CSS
- **Base styles** -- A shared CSS foundation that ensures consistent typography and responsive behavior

The AI generates semantic HTML with proper heading hierarchy, accessible markup, and responsive layouts.

## Tips for Better Sites

1. **Start with your agent's purpose**: "This agent helps freelancers write proposals" gives the AI strong content direction
2. **Mention your audience**: "Target enterprise CTOs" vs "Target indie hackers" produces very different copy and design
3. **Ask for specific sections**: "Include a features grid, social proof, and FAQ" gets more structured results than "make a landing page"
4. **Iterate on copy separately**: After the initial generation, ask the AI to refine specific text without changing the layout
5. **Add pages incrementally**: Start with the home page, publish it, then add About and Pricing pages one at a time