Landing Pages

Create and manage custom landing pages with built-in form handling and list integration.

Overview

Landing pages allow you to:

• Create custom subscription pages with visual editor
• Connect forms directly to email lists
• Host on custom domains or PostBeagle subdomains
• Track views and submissions
• Capture custom field data from subscribers

List All Landing Pages

Get all landing pages for your account.

GET /api/landing-pages

Response

[
  {
    "id": "lp_123",
    "name": "Newsletter Signup",
    "slug": "newsletter",
    "description": "Main newsletter landing page",
    "list_id": "list_456",
    "list_name": "Newsletter Subscribers",
    "domain_id": null,
    "domain_name": null,
    "landing_page_identifier": "mycompany",
    "full_url": "/lp/mycompany/newsletter",
    "is_published": true,
    "views": 1250,
    "submissions": 89,
    "created_at": "2024-01-15T10:00:00Z",
    "updated_at": "2024-01-20T14:30:00Z"
  }
]

Get Single Landing Page

Get details for a specific landing page.

GET /api/landing-pages/:id

Response

{
  "id": "lp_123",
  "name": "Newsletter Signup",
  "slug": "newsletter",
  "description": "Main newsletter landing page",
  "list_id": "list_456",
  "list_name": "Newsletter Subscribers",
  "domain_id": null,
  "domain_name": null,
  "landing_page_identifier": "mycompany",
  "full_url": "/lp/mycompany/newsletter",
  "html": "<div>...</div>",
  "css": "body { ... }",
  "published_html": "<html>...</html>",
  "is_published": true,
  "views": 1250,
  "submissions": 89,
  "created_at": "2024-01-15T10:00:00Z",
  "updated_at": "2024-01-20T14:30:00Z"
}

Create Landing Page

Create a new landing page.

POST /api/landing-pages

Request Body

{
  "name": "Product Launch",
  "slug": "product-launch",
  "description": "Pre-launch signup page",
  "list_id": "list_456",
  "domain_id": "domain_789"
}

Field Options

Slug Validation

• Only lowercase letters, numbers, and hyphens
• Must be unique per account
• Example valid slugs: newsletter, join-us, product-2024

Response

{
  "id": "lp_789",
  "name": "Product Launch",
  "slug": "product-launch",
  "description": "Pre-launch signup page",
  "list_id": "list_456",
  "domain_id": "domain_789",
  "created_at": "2024-01-22T09:00:00Z",
  "updated_at": "2024-01-22T09:00:00Z"
}

Update Landing Page Settings

Update landing page settings (name, slug, list, domain).

POST /api/landing-pages/:id/save-settings

Request Body

{
  "name": "Updated Name",
  "slug": "new-slug",
  "description": "Updated description",
  "list_id": "list_456",
  "domain_id": "domain_789"
}

Response

{
  "id": "lp_123",
  "name": "Updated Name",
  "slug": "new-slug",
  "description": "Updated description",
  "list_id": "list_456",
  "domain_id": "domain_789",
  "updated_at": "2024-01-22T11:00:00Z"
}

Update Landing Page Design

Save the HTML and CSS for a landing page.

POST /api/landing-pages/:id/save-design

Request Body

{
  "html": "<div class=\"container\">...</div>",
  "css": ".container { max-width: 1200px; }"
}

Response

{
  "success": true,
  "message": "Design saved successfully"
}

Publish Landing Page

Publish a landing page to make it publicly accessible.

POST /api/landing-pages/:id/publish

Request Body

{
  "html": "<html>...</html>",
  "css": "body { ... }"
}

What Happens When Publishing

1. HTML and CSS are combined with form handler JavaScript
2. Published version is saved separately
3. Landing page becomes publicly accessible
4. Forms automatically submit to the connected email list

Response

{
  "success": true,
  "message": "Landing page published successfully",
  "url": "/lp/mycompany/newsletter"
}

Unpublish Landing Page

Unpublish a landing page to make it private.

POST /api/landing-pages/:id/unpublish

Response

{
  "success": true,
  "message": "Landing page unpublished successfully"
}

Delete Landing Page

Delete a landing page permanently.

DELETE /api/landing-pages/:id

Response

{
  "success": true,
  "message": "Landing page deleted successfully"
}

Landing Page URL Structure

Landing pages are accessible at:

/lp/{identifier}/{slug}

Where:

• {identifier} is either your custom domain or your PostBeagle subdomain identifier
• {slug} is the landing page slug you specified

Examples

With Custom Domain:

https://yourdomain.com/lp/newsletter

With PostBeagle Subdomain:

https://app.postbeagle.com/lp/mycompany/newsletter

Form Integration

Landing pages automatically handle form submissions when forms include the data-pb-form="subscribe" attribute.

Required Form Attributes

<form data-pb-form="subscribe">
  <input type="email" name="email" required />
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <button type="submit" data-pb-submit>Subscribe</button>
  <div data-pb-message></div>
</form>

Standard Fields

• email - Email address (required)
• first_name - First name
• last_name - Last name
• phone - Phone number

Custom Fields

Any other form fields will be captured as custom fields:

<input type="text" name="company" />
<input type="text" name="job_title" />

Code Examples

Create and Publish a Landing Page

const apiKey = 'your_api_key';
const baseUrl = 'https://api.postbeagle.com/api';

// 1. Create landing page
const createResponse = await fetch(`${baseUrl}/landing-pages`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Product Waitlist',
    slug: 'product-waitlist',
    description: 'Early access signup',
    list_id: 'list_123'
  })
});

const landingPage = await createResponse.json();
const pageId = landingPage.id;

// 2. Save design
await fetch(`${baseUrl}/landing-pages/${pageId}/save-design`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    html: `
      <div style="max-width: 600px; margin: 0 auto; padding: 40px;">
        <h1>Join Our Waitlist</h1>
        <form data-pb-form="subscribe">
          <input type="email" name="email" placeholder="Email" required />
          <button type="submit" data-pb-submit>Join</button>
          <div data-pb-message></div>
        </form>
      </div>
    `,
    css: 'body { font-family: Arial, sans-serif; }'
  })
});

// 3. Publish
await fetch(`${baseUrl}/landing-pages/${pageId}/publish`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    html: landingPage.html,
    css: landingPage.css
  })
});

console.log(`Landing page live at: ${landingPage.full_url}`);

Get Landing Page Analytics

import requests

api_key = 'your_api_key'
base_url = 'https://api.postbeagle.com/api'

headers = {
    'Authorization': f'Bearer {api_key}',
    'Content-Type': 'application/json'
}

# Get all landing pages
response = requests.get(f'{base_url}/landing-pages', headers=headers)
pages = response.json()

# Calculate total performance
total_views = sum(page['views'] for page in pages)
total_submissions = sum(page['submissions'] for page in pages)
conversion_rate = (total_submissions / total_views * 100) if total_views > 0 else 0

print(f'Total Views: {total_views}')
print(f'Total Submissions: {total_submissions}')
print(f'Conversion Rate: {conversion_rate:.2f}%')

# Show top performing pages
top_pages = sorted(pages, key=lambda x: x['submissions'], reverse=True)[:5]
for page in top_pages:
    print(f"{page['name']}: {page['submissions']} submissions")

Best Practices

1. SEO-Friendly Slugs: Use descriptive, keyword-rich slugs
2. Mobile Responsive: Ensure designs work on all devices
3. Clear CTA: Make the call-to-action obvious and compelling
4. Minimal Fields: Request only essential information
5. Test Before Publishing: Preview thoroughly before going live
6. Custom Domains: Use verified custom domains for brand consistency
7. A/B Testing: Create multiple versions to test performance
8. Thank You Message: Include a clear success message after submission

Custom Domain Setup

To use custom domains:

1. Add and verify your domain in Settings → Domains
2. Create DNS records as instructed
3. Select the verified domain when creating/editing landing page
4. Landing page will be accessible at yourdomain.com/lp/slug

Analytics Tracking

Landing pages automatically track:

• Views: Each unique page load
• Submissions: Successful form submissions
• Conversion Rate: Submissions / Views

Access detailed analytics through the dashboard or Analytics API.

Error Codes

Related Endpoints

• Email Lists - Manage email lists for form submissions
• Popup Forms - Alternative lead capture method
• Contacts - View captured leads