Response Schemas

This page documents the common response structures and data formats used across all EngageHQ API endpoints.

Response Envelope

All API responses follow a consistent structure:

Success Response

json

{
  "success": true,
  "message": "Human-readable success message",
  "data": { /* or array */ },
  "meta": { /* pagination info, if applicable */ }
}

Field	Type	Description
`success`	boolean	Always `true` for successful requests
`message`	string	Human-readable description of the result
`data`	object\|array	The requested resource(s)
`meta`	object	Pagination metadata (list endpoints only)

Error Response

json

{
  "success": false,
  "message": "Human-readable error message",
  "errors": { /* validation errors, if applicable */ }
}

Field	Type	Description
`success`	boolean	Always `false` for errors
`message`	string	Human-readable error description
`errors`	object\|null	Validation errors by field

Validation Error Example

json

{
  "success": false,
  "message": "The given data was invalid.",
  "errors": {
    "per_page": ["The per page must be between 1 and 100."],
    "type": ["The selected type is invalid."]
  }
}

Pagination

List endpoints return paginated results with metadata:

json

{
  "meta": {
    "current_page": 1,
    "last_page": 5,
    "per_page": 20,
    "total": 94,
    "links": [
      { "url": null, "label": "&laquo; Previous", "active": false },
      { "url": "https://api.../content?page=1", "label": "1", "active": true },
      { "url": "https://api.../content?page=2", "label": "2", "active": false },
      { "url": "https://api.../content?page=3", "label": "3", "active": false },
      { "url": "https://api.../content?page=2", "label": "Next &raquo;", "active": false }
    ]
  }
}

Pagination Fields

Field	Type	Description
`current_page`	integer	Current page number (1-indexed)
`last_page`	integer	Last available page number
`per_page`	integer	Items per page
`total`	integer	Total number of items across all pages
`links`	array	Navigation links array

Link Object

Field	Type	Description
`url`	string\|null	Full URL to this page, or null if unavailable
`label`	string	Display label (may contain HTML entities)
`active`	boolean	Whether this is the current page

Pagination Example

javascript

async function fetchAllContent(token) {
  let page = 1;
  let allItems = [];

  while (true) {
    const response = await fetch(
      `https://cdn.engagehq.retailsuccessplatform.com/api/v1/public/content?page=${page}`,
      { headers: { 'Authorization': `Bearer ${token}` } }
    );

    const { data, meta } = await response.json();
    allItems = [...allItems, ...data];

    if (page >= meta.last_page) break;
    page++;
  }

  return allItems;
}

ID Format (Hashkeys)

All resource IDs are hashkeys - obfuscated identifiers with a type prefix:

Resource	Prefix	Example
Content	`con_`	`con_00000k1L2m3N4o5`
Circular	`cir_`	`cir_00000a1B2c3D4e5`
Offer	`ofr_`	`ofr_00000p1Q2r3S4t5`
Media	`med_`	`med_00000x1Y2z3A4b5`
Product	`prd_`	`prd_00000m1N2o3P4q5`
Organization	`org_`	`org_00000j1K2l3M4n5`

ID Format

IDs follow the pattern: {prefix}_{11_alphanumeric_chars}

The prefix indicates the resource type, making IDs self-documenting.

Using Hashkeys

Always use the hashkey when making requests:

javascript

// Correct - use the hashkey
const circular = await fetch(`/public/v1/circulars/cir_00000a1B2c3D4e5`);

// Incorrect - never use numeric IDs
const circular = await fetch(`/public/v1/circulars/123`);  // Will fail

Timestamps

All timestamps are in ISO 8601 format with timezone:

2024-06-01T14:30:00+00:00

Timestamp Fields

Format	Example	Description
Full	`2024-06-01T14:30:00+00:00`	Date, time, and timezone
Date only	`2024-06-01`	Used in some metadata

Parsing Timestamps

javascript

// Parse ISO 8601 timestamp
const publishedAt = new Date(item.published_at);

// Format for display
console.log(publishedAt.toLocaleDateString());  // "6/1/2024"
console.log(publishedAt.toLocaleTimeString());  // "2:30:00 PM"

// Check if content is expired
const expiresAt = item.expires_at ? new Date(item.expires_at) : null;
const isExpired = expiresAt && expiresAt < new Date();

Content Blocks

Content items contain an array of content blocks in the content field. The available block types depend on the content type.

Block Categories

EngageHQ supports two categories of content blocks:

Category	Used In	Block Count
Slice Types	Pages, Articles, Blog Posts	8 types
Content Sections	Landing Pages, Homepages	13 types

Slice Types (Pages & Articles)

Slice types are building blocks for standard content pages and articles.

Available Slice Types

Type	Name	Description
`text`	Text	Rich text content with formatting
`image`	Image	Single image with optional caption
`video`	Video	Embedded video from YouTube or Vimeo
`hero`	Hero Section	Full-width banner with text overlay
`cta`	Call to Action	Prominent button with supporting text
`grid`	Grid	Multi-column content grid
`carousel`	Carousel	Image or content slider
`testimonial`	Testimonial	Customer quote with attribution

Slice Structure

Each slice follows this structure:

json

{
  "id": "slice_1234567890",
  "slice_type": "text",
  "content": {
    // Type-specific content fields
  }
}

Text Slice

json

{
  "id": "slice_1234567890",
  "slice_type": "text",
  "content": {
    "body": "<p>Rich text content with <strong>HTML</strong> formatting.</p>"
  }
}

Field	Type	Required	Description
`body`	string	Yes	HTML-formatted text content

Image Slice

json

{
  "id": "slice_1234567891",
  "slice_type": "image",
  "content": {
    "url": "https://cdn.example.com/images/photo.jpg",
    "alt": "Description of image",
    "caption": "Optional caption text"
  }
}

Field	Type	Required	Description
`url`	string	Yes	Image URL
`alt`	string	Yes	Alt text for accessibility
`caption`	string	No	Optional caption below image

Video Slice

json

{
  "id": "slice_1234567892",
  "slice_type": "video",
  "content": {
    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    "title": "Product Demo Video"
  }
}

Field	Type	Required	Description
`url`	string	Yes	YouTube or Vimeo URL
`title`	string	No	Video title

Hero Slice

json

{
  "id": "slice_1234567893",
  "slice_type": "hero",
  "content": {
    "headline": "Welcome to Our Store",
    "subheadline": "Discover amazing products at great prices",
    "background_image": "https://cdn.example.com/hero-bg.jpg"
  }
}

Field	Type	Required	Description
`headline`	string	Yes	Main heading text
`subheadline`	string	No	Supporting text
`background_image`	string	No	Background image URL

Call to Action Slice

json

{
  "id": "slice_1234567894",
  "slice_type": "cta",
  "content": {
    "headline": "Ready to Get Started?",
    "description": "Join thousands of satisfied customers",
    "button_text": "Sign Up Now",
    "button_url": "/signup"
  }
}

Field	Type	Required	Description
`headline`	string	Yes	CTA heading
`description`	string	No	Supporting text
`button_text`	string	Yes	Button label
`button_url`	string	Yes	Button link URL

Grid Slice

json

{
  "id": "slice_1234567895",
  "slice_type": "grid",
  "content": {
    "columns": 3,
    "items": [
      { "id": "item_1", "title": "Feature 1", "description": "..." },
      { "id": "item_2", "title": "Feature 2", "description": "..." },
      { "id": "item_3", "title": "Feature 3", "description": "..." }
    ]
  }
}

Field	Type	Required	Description
`columns`	integer	No	Number of columns (2-4, default: 3)
`items`	array	Yes	Array of grid items

Carousel Slice

json

{
  "id": "slice_1234567896",
  "slice_type": "carousel",
  "content": {
    "slides": [
      { "id": "slide_1", "image": "...", "caption": "..." },
      { "id": "slide_2", "image": "...", "caption": "..." }
    ],
    "autoplay": true,
    "interval": 5000
  }
}

Field	Type	Required	Description
`slides`	array	Yes	Array of slide objects
`autoplay`	boolean	No	Auto-advance slides
`interval`	integer	No	Milliseconds between slides

Testimonial Slice

json

{
  "id": "slice_1234567897",
  "slice_type": "testimonial",
  "content": {
    "quote": "This product changed my life!",
    "author": "Jane Smith",
    "role": "CEO",
    "company": "Acme Corp",
    "avatar": "https://cdn.example.com/avatars/jane.jpg"
  }
}

Field	Type	Required	Description
`quote`	string	Yes	Testimonial text
`author`	string	Yes	Person's name
`role`	string	No	Job title
`company`	string	No	Company name
`avatar`	string	No	Profile image URL

Content Sections

Content sections are comprehensive page-builder blocks with both content and visual settings. They are used for building pages, articles, landing pages, and homepages.

Available Section Types

EngageHQ provides 14 section types for building content:

Type	Name	Content Types	Description
`content`	Content Block	page, article, landing, homepage	Rich text with optional headline and CTA
`image`	Image	page, article, landing, homepage	Single image with caption and link
`video`	Video	page, article, landing, homepage	Embedded video (YouTube, Vimeo, direct)
`gallery`	Image Gallery	page, article, landing, homepage	Multiple images with layout options
`hero`	Hero Section	page, landing, homepage	Full-width banner with background media
`cta`	Call to Action	page, article, landing, homepage	Conversion-focused action section
`features`	Features	page, landing, homepage	Feature/benefit grid with icons
`testimonials`	Testimonials	page, article, landing, homepage	Customer quotes and reviews
`stats`	Statistics	page, landing, homepage	Key numbers and achievements
`team`	Team Members	page, landing	Team member profiles
`html`	Custom HTML	page, article, landing, homepage	Custom HTML code or iframe embeds
`form`	Lead Form	landing	Lead capture form
`products`	Product Carousel	page, landing, homepage	Showcase products in carousel or grid
`coupons`	Coupon Carousel	page, landing, homepage	Display coupons and promotional offers

Section Structure

Each section has both content (data) and settings (visual configuration):

json

{
  "id": "section_1737456789_abc123def",
  "type": "hero",
  "content": {
    // Type-specific content fields
  },
  "settings": {
    // Visual/layout settings
  }
}

Section IDs

Section IDs follow the pattern section_{timestamp}_{random} and are generated client-side when creating new sections.

Content Block Section

Rich text content with optional headline and call-to-action.

Available for: page, article, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "content",
  "content": {
    "headline": "About Our Company",
    "subheadline": "Building the future of retail",
    "body": "<p>We started in 2020 with a simple mission...</p>",
    "cta_text": "Learn More",
    "cta_url": "/about",
    "cta_target": "_self"
  },
  "settings": {
    "anchor_id": "about",
    "max_width": "medium",
    "alignment": "left",
    "background_color": "",
    "text_color": "",
    "padding": "medium"
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Main heading
`subheadline`	string	No	Supporting subheading
`body`	string	No	HTML-formatted rich text content
`cta_text`	string	No	Call-to-action button text
`cta_url`	string	No	CTA button URL
`cta_target`	string	No	Link target (`_self`, `_blank`)

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID for navigation
`max_width`	string	`small`, `medium`, `large`, `full`	Content max width
`alignment`	string	`left`, `center`, `right`	Text alignment
`background_color`	string	Hex color	Background color
`text_color`	string	Hex color	Text color override
`padding`	string	`none`, `small`, `medium`, `large`	Vertical padding

Image Section

Single image with caption, alt text, and optional link.

Available for: page, article, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "image",
  "content": {
    "image": {
      "url": "https://cdn.example.com/images/photo.jpg",
      "id": "med_00000x1Y2z3A4b5",
      "filename": "photo.jpg"
    },
    "alt_text": "Product showcase image",
    "caption": "Our flagship product in action",
    "link_url": "/products/featured",
    "link_target": "_self"
  },
  "settings": {
    "anchor_id": "",
    "size": "large",
    "alignment": "center",
    "image_fit": "cover",
    "border_radius": "medium",
    "shadow": "medium",
    "lightbox_enabled": true
  }
}

Content Fields

Field	Type	Required	Description
`image`	object	Yes	Image object with `url`, `id`, `filename`
`alt_text`	string	Yes	Alt text for accessibility
`caption`	string	No	Caption displayed below image
`link_url`	string	No	Optional link when image is clicked
`link_target`	string	No	Link target (`_self`, `_blank`)

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`size`	string	`small`, `medium`, `large`, `full`	Image size
`alignment`	string	`left`, `center`, `right`	Image alignment
`image_fit`	string	`cover`, `contain`, `fill`	Image fit mode (default: `cover`)
`border_radius`	string	`none`, `small`, `medium`, `large`, `full`	Corner rounding
`shadow`	string	`none`, `small`, `medium`, `large`	Drop shadow
`lightbox_enabled`	boolean	`true`, `false`	Enable lightbox on click

Video Section

Embedded video from YouTube, Vimeo, or direct URL.

Available for: page, article, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "video",
  "content": {
    "headline": "See It In Action",
    "description": "Watch our product demo video",
    "video_url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    "provider": "auto",
    "thumbnail": {
      "url": "https://cdn.example.com/video-thumb.jpg",
      "id": "med_00000x1Y2z3A4b5"
    }
  },
  "settings": {
    "anchor_id": "demo",
    "aspect_ratio": "16:9",
    "max_width": "large",
    "autoplay": false,
    "loop": false,
    "muted": false,
    "controls": true,
    "background_color": ""
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Section heading
`description`	string	No	Description text
`video_url`	string	Yes	Video URL (YouTube, Vimeo, or direct)
`provider`	string	No	`auto`, `youtube`, `vimeo`, `direct`
`thumbnail`	object	No	Custom thumbnail image

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`aspect_ratio`	string	`16:9`, `4:3`, `1:1`, `9:16`	Video aspect ratio
`max_width`	string	`small`, `medium`, `large`, `full`	Container max width
`autoplay`	boolean	`true`, `false`	Auto-play video
`loop`	boolean	`true`, `false`	Loop video
`muted`	boolean	`true`, `false`	Mute audio
`controls`	boolean	`true`, `false`	Show player controls
`background_color`	string	Hex color	Background color

Image Gallery Section

Multiple images in grid, carousel, or masonry layout.

Available for: page, article, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "gallery",
  "content": {
    "headline": "Our Gallery",
    "subheadline": "See what we've been up to",
    "images": [
      {
        "image": { "url": "https://cdn.example.com/1.jpg", "id": "med_001" },
        "alt_text": "Image 1",
        "caption": "First image caption",
        "link_url": "",
        "link_target": "_self"
      },
      {
        "image": { "url": "https://cdn.example.com/2.jpg", "id": "med_002" },
        "alt_text": "Image 2",
        "caption": "Second image caption",
        "link_url": "",
        "link_target": "_self"
      }
    ]
  },
  "settings": {
    "anchor_id": "gallery",
    "layout": "grid",
    "columns": 3,
    "gap_size": "medium",
    "aspect_ratio": "auto",
    "image_fit": "cover",
    "lightbox_enabled": true,
    "autoplay": false,
    "autoplay_interval": 5000,
    "show_arrows": true,
    "show_dots": true
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Section heading
`subheadline`	string	No	Section subheading
`images`	array	Yes	Array of gallery image objects

Gallery Image Object

Field	Type	Required	Description
`image`	object	Yes	Image object with `url`, `id`
`alt_text`	string	Yes	Alt text for accessibility
`caption`	string	No	Image caption
`link_url`	string	No	Optional link URL
`link_target`	string	No	Link target

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`grid`, `carousel`, `masonry`	Gallery layout
`columns`	integer	`1`-`6`	Number of columns
`gap_size`	string	`none`, `small`, `medium`, `large`	Gap between images
`aspect_ratio`	string	`auto`, `1:1`, `4:3`, `16:9`, `3:2`	Image aspect ratio
`image_fit`	string	`cover`, `contain`, `fill`	Image fit mode when aspect ratio is not `auto` (default: `cover`)
`lightbox_enabled`	boolean	`true`, `false`	Enable lightbox
`autoplay`	boolean	`true`, `false`	Carousel autoplay
`autoplay_interval`	integer	Milliseconds	Time between slides
`show_arrows`	boolean	`true`, `false`	Show navigation arrows
`show_dots`	boolean	`true`, `false`	Show dot indicators

Hero Section

Full-width banner with headline, CTAs, and background image/video. Supports multiple slides for carousel behavior and linking to existing hero content items.

Available for: page, landing, homepage

Hero Sections vs Hero Content Items

Hero sections are embedded within pages, landing pages, or homepages. Hero content items are standalone content that can be linked to from hero sections or queried directly for use in carousels.

When creating standalone hero content items, use the metadata.placement field to specify where they should appear:

home - Home page carousel
page - Content pages
landing - Landing pages

See Hero Filtering by Placement in the Content API documentation.

Source Modes

Hero sections support two source modes:

Mode	Description
`inline`	Define slides directly within the section (default)
`linked`	Link to an existing published hero content item

Inline Mode Example

json

{
  "id": "section_1737456789_abc123def",
  "type": "hero",
  "content": {
    "source_mode": "inline",
    "slides": [
      {
        "id": "slide_1737456789001",
        "headline": "Welcome to Our Store",
        "subheadline": "Discover amazing products at great prices",
        "body": "",
        "background_image": "https://cdn.example.com/hero-bg.jpg",
        "background_image_media": {
          "url": "https://cdn.example.com/hero-bg.jpg",
          "id": "med_00000x1Y2z3A4b5"
        },
        "background_position": "center",
        "background_type": "image",
        "background_video_url": "",
        "image_fit": "cover",
        "overlay_color": "#000000",
        "overlay_opacity": 30,
        "overlay_type": "solid",
        "overlay_gradient_direction": "to-bottom",
        "cta_primary": {
          "text": "Shop Now",
          "url": "/products",
          "style": "primary",
          "target": "_self"
        },
        "cta_secondary": {
          "text": "Learn More",
          "url": "/about",
          "style": "outline",
          "target": "_self"
        }
      },
      {
        "id": "slide_1737456789002",
        "headline": "Summer Sale",
        "subheadline": "Up to 50% off selected items",
        "background_image": "https://cdn.example.com/summer-sale.jpg",
        "background_position": "center",
        "background_type": "image",
        "image_fit": "cover",
        "overlay_color": "#000000",
        "overlay_opacity": 40,
        "overlay_type": "gradient",
        "overlay_gradient_direction": "to-bottom",
        "cta_primary": {
          "text": "Shop Sale",
          "url": "/sale",
          "style": "primary",
          "target": "_self"
        }
      },
      {
        "id": "slide_1737456789003",
        "headline": "Free Shipping This Weekend",
        "subheadline": "Click anywhere to shop the event",
        "background_image": "https://cdn.example.com/free-shipping.jpg",
        "background_position": "center",
        "background_type": "image",
        "image_fit": "cover",
        "overlay_color": "#000000",
        "overlay_opacity": 30,
        "overlay_type": "solid",
        "slide_link": {
          "url": "/promo/free-shipping",
          "target": "_self"
        }
      }
    ]
  },
  "settings": {
    "anchor_id": "",
    "height": "large",
    "text_color": "light",
    "text_alignment": "center",
    "content_width": "medium",
    "autoplay": true,
    "autoplay_interval": 5000,
    "transition": "fade",
    "show_arrows": true,
    "show_dots": true,
    "pause_on_hover": true,
    "parallax": false
  }
}

Linked Mode Example

Link to an existing hero content item for centralized management:

json

{
  "id": "section_1737456789_abc123def",
  "type": "hero",
  "content": {
    "source_mode": "linked",
    "linked_hero_id": "con_00000a1B2c3D4e5",
    "slides": []
  },
  "settings": {
    "anchor_id": "",
    "height": "large",
    "text_color": "light",
    "text_alignment": "center",
    "content_width": "medium"
  }
}

When using linked mode with the expand=linked_content query parameter, the linked hero's content is resolved inline. See Linked Content Expansion in the Content API documentation.

Content Fields

Field	Type	Required	Description
`source_mode`	string	No	`inline` (default) or `linked`
`linked_hero_id`	string	No	Hero content hashkey (when `source_mode` is `linked`)
`slides`	array	No	Array of slide objects (when `source_mode` is `inline`)

Slide Object

Field	Type	Required	Description
`id`	string	Yes	Unique slide identifier
`headline`	string	Yes	Main heading
`subheadline`	string	No	Supporting text
`body`	string	No	Additional body text
`background_image`	string	No	Background image URL
`background_image_media`	object	No	Media library reference with `url` and `id`
`background_position`	string	No	`center`, `top`, `bottom`, `left`, `right`, `top left`, `top right`, `bottom left`, `bottom right` (default: `center`)
`background_type`	string	No	`image`, `video` (default: `image`)
`background_video_url`	string	No	Direct video URL (when `background_type` is `video`)
`image_fit`	string	No	`cover`, `contain`, `fill` (default: `cover`)
`overlay_color`	string	No	Overlay color (default: `#000000`)
`overlay_opacity`	integer	No	Overlay opacity 0-100 (default: 30)
`overlay_type`	string	No	`solid`, `gradient` (default: `solid`)
`overlay_gradient_direction`	string	No	`to-bottom`, `to-top`, `to-left`, `to-right`, `to-bottom-right`, `to-bottom-left` (default: `to-bottom`)
`cta_primary`	object	No	Primary CTA button (ignored when `slide_link.url` is set)
`cta_secondary`	object	No	Secondary CTA button (ignored when `slide_link.url` is set)
`slide_link`	object	No	Whole-banner link. When `url` is set, the entire slide is rendered as a single clickable link and CTA buttons are not rendered

CTA Button Object

Field	Type	Required	Description
`text`	string	Yes	Button text
`url`	string	Yes	Button URL
`style`	string	No	`primary`, `secondary`, `outline`, `ghost`
`target`	string	No	`_self`, `_blank`

Slide Link Object

A slide-level link that turns the entire hero slide into a single click target. When url is a non-empty string, renderers should wrap the slide in an anchor and must not render cta_primary or cta_secondary (to avoid nested-anchor accessibility issues).

Field	Type	Required	Description
`url`	string	No	Destination URL. If empty or omitted, the slide behaves as a normal slide with CTA buttons
`target`	string	No	`_self` (default), `_blank`

Whole-Banner vs CTA Buttons

A slide is either CTA-driven or whole-banner clickable, not both. Treat slide_link.url as the toggle: when set, hide and ignore the CTA fields; when empty, render the CTAs normally.

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`height`	string	`small`, `medium`, `large`, `full`	Section height
`text_color`	string	`dark`, `light`, `auto`	Text color scheme
`text_alignment`	string	`left`, `center`, `right`	Content alignment
`content_width`	string	`small`, `medium`, `large`, `full`	Content max width
`autoplay`	boolean	`true`, `false`	Auto-advance slides (default: `true`)
`autoplay_interval`	integer	Milliseconds	Time between slides (default: 5000)
`transition`	string	`fade`, `slide`, `zoom`, `flip`	Slide transition effect
`show_arrows`	boolean	`true`, `false`	Show navigation arrows (default: `true`)
`show_dots`	boolean	`true`, `false`	Show navigation dots (default: `true`)
`pause_on_hover`	boolean	`true`, `false`	Pause autoplay on hover (default: `true`)
`parallax`	boolean	`true`, `false`	Enable parallax scrolling effect on background (default: `false`)

Carousel Behavior

When a hero section has multiple slides, it automatically displays as a carousel. Single-slide heroes display as static banners. Carousel settings (autoplay, transition, etc.) only apply when there are 2+ slides.

Call to Action Section

Prominent section designed to drive conversions.

Available for: page, article, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "cta",
  "content": {
    "headline": "Ready to Get Started?",
    "subheadline": "Join thousands of satisfied customers",
    "body": "",
    "cta_text": "Sign Up Now",
    "cta_url": "/signup",
    "cta_target": "_self",
    "secondary_cta_text": "Contact Sales",
    "secondary_cta_url": "/contact",
    "secondary_cta_target": "_self"
  },
  "settings": {
    "anchor_id": "get-started",
    "layout": "centered",
    "background_style": "gradient",
    "background_color": "",
    "background_gradient_from": "#dc2626",
    "background_gradient_to": "#991b1b",
    "background_image": null,
    "background_image_media": null,
    "background_type": "image",
    "background_video_url": "",
    "background_position": "center",
    "image_fit": "cover",
    "overlay_color": "#000000",
    "overlay_opacity": 0,
    "overlay_type": "solid",
    "overlay_gradient_direction": "to-bottom",
    "parallax": false,
    "text_color": "light",
    "padding": "large",
    "border_radius": "medium"
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	Yes	CTA heading
`subheadline`	string	No	Supporting text
`body`	string	No	Additional body text
`cta_text`	string	Yes	Primary button text
`cta_url`	string	Yes	Primary button URL
`cta_target`	string	No	Primary button target
`secondary_cta_text`	string	No	Secondary button text
`secondary_cta_url`	string	No	Secondary button URL
`secondary_cta_target`	string	No	Secondary button target

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`centered`, `left-aligned`, `right-aligned`	Layout style
`background_style`	string	`none`, `solid`, `gradient`, `image`, `video`	Background style
`background_color`	string	Hex color	Solid background color (when `background_style` is `solid`)
`background_gradient_from`	string	Hex color	Gradient start color (when `background_style` is `gradient`)
`background_gradient_to`	string	Hex color	Gradient end color (when `background_style` is `gradient`)
`background_image`	string	URL	Background image URL (when `background_style` is `image`)
`background_image_media`	object	Media object	Media library reference with `url`, `urls`, `media_id`
`background_position`	string	`center`, `top`, `bottom`, `left`, `right`, `top left`, `top right`, `bottom left`, `bottom right`	Background position (default: `center`)
`background_video_url`	string	URL	Direct video URL (when `background_style` is `video`)
`image_fit`	string	`cover`, `contain`, `fill`	Image/video fit mode (default: `cover`)
`overlay_color`	string	Hex color	Overlay color (default: `#000000`)
`overlay_opacity`	integer	`0`-`70`	Overlay opacity percentage (default: `0`)
`overlay_type`	string	`solid`, `gradient`	Overlay type (default: `solid`)
`overlay_gradient_direction`	string	`to-bottom`, `to-top`, `to-left`, `to-right`, `to-bottom-right`, `to-bottom-left`	Gradient overlay direction (default: `to-bottom`)
`parallax`	boolean	`true`, `false`	Enable parallax scrolling effect (default: `false`)
`text_color`	string	`dark`, `light`, `auto`	Text color scheme
`padding`	string	`small`, `medium`, `large`	Section padding
`border_radius`	string	`none`, `small`, `medium`, `large`, `full`	Corner rounding

Features Section

Grid of features/benefits with icons and descriptions.

Available for: page, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "features",
  "content": {
    "headline": "Why Choose Us",
    "subheadline": "Everything you need to succeed",
    "features": [
      {
        "icon": "truck",
        "title": "Fast Delivery",
        "description": "Get your orders in 24 hours",
        "link_url": "/shipping",
        "link_text": "Learn more"
      },
      {
        "icon": "shield-check",
        "title": "Quality Guarantee",
        "description": "100% satisfaction guaranteed",
        "link_url": "",
        "link_text": ""
      },
      {
        "icon": "headphones",
        "title": "24/7 Support",
        "description": "We're here when you need us",
        "link_url": "/support",
        "link_text": "Contact us"
      }
    ]
  },
  "settings": {
    "anchor_id": "features",
    "layout": "grid",
    "columns": 3,
    "alignment": "center",
    "icon_style": "solid",
    "icon_size": "medium",
    "icon_color": "#dc2626",
    "icon_background": "#fee2e2",
    "card_style": "elevated",
    "background_style": "none",
    "background_color": "",
    "background_gradient_from": "",
    "background_gradient_to": ""
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Section heading
`subheadline`	string	No	Section subheading
`features`	array	Yes	Array of feature objects

Feature Object

Field	Type	Required	Description
`icon`	string	No	Icon name or URL
`title`	string	Yes	Feature title
`description`	string	No	Feature description
`link_url`	string	No	Optional link URL
`link_text`	string	No	Link text

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`grid`, `list`, `alternating`	Layout style
`columns`	integer	`1`-`4`	Number of columns
`alignment`	string	`left`, `center`, `right`	Content alignment
`icon_style`	string	`solid`, `outline`, `none`	Icon rendering style
`icon_size`	string	`small`, `medium`, `large`	Icon size
`icon_color`	string	Hex color	Icon color
`icon_background`	string	Hex color	Icon background color
`card_style`	string	`none`, `bordered`, `elevated`, `filled`	Card style
`background_style`	string	`none`, `solid`, `gradient`	Background style
`background_color`	string	Hex color	Section background (when `background_style` is `solid`)
`background_gradient_from`	string	Hex color	Gradient start color (when `background_style` is `gradient`)
`background_gradient_to`	string	Hex color	Gradient end color (when `background_style` is `gradient`)

Testimonials Section

Customer reviews and social proof.

Available for: page, article, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "testimonials",
  "content": {
    "headline": "What Our Customers Say",
    "subheadline": "Don't just take our word for it",
    "testimonials": [
      {
        "quote": "Best shopping experience ever! The quality exceeded my expectations.",
        "author_name": "John Smith",
        "author_title": "Verified Buyer",
        "author_company": "Acme Corp",
        "author_image": {
          "url": "https://cdn.example.com/avatars/john.jpg",
          "id": "med_001"
        },
        "rating": 5
      },
      {
        "quote": "Fast delivery and excellent customer service.",
        "author_name": "Jane Doe",
        "author_title": "Regular Customer",
        "author_company": "",
        "author_image": null,
        "rating": 5
      }
    ]
  },
  "settings": {
    "anchor_id": "testimonials",
    "layout": "carousel",
    "columns": 3,
    "card_style": "bordered",
    "show_rating": true,
    "show_avatar": true,
    "show_company": true,
    "avatar_size": "medium",
    "autoplay": true,
    "autoplay_interval": 5000,
    "background_style": "solid",
    "background_color": "#f9fafb",
    "background_gradient_from": "",
    "background_gradient_to": ""
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Section heading
`subheadline`	string	No	Section subheading
`testimonials`	array	Yes	Array of testimonial objects

Testimonial Object

Field	Type	Required	Description
`quote`	string	Yes	Testimonial text
`author_name`	string	Yes	Customer name
`author_title`	string	No	Customer title/role
`author_company`	string	No	Company name
`author_image`	object	No	Author avatar image
`rating`	integer	No	Star rating (1-5)

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`carousel`, `grid`	Layout style
`columns`	integer	`2`-`4`	Grid columns (when `layout` is `grid`)
`card_style`	string	`none`, `bordered`, `elevated`, `filled`	Card style
`show_rating`	boolean	`true`, `false`	Show star rating
`show_avatar`	boolean	`true`, `false`	Show author avatar
`show_company`	boolean	`true`, `false`	Show company name
`avatar_size`	string	`small`, `medium`, `large`	Avatar size
`autoplay`	boolean	`true`, `false`	Carousel autoplay (when `layout` is `carousel`)
`autoplay_interval`	integer	Milliseconds	Time between slides (when `autoplay` is `true`)
`background_style`	string	`none`, `solid`, `gradient`	Background style
`background_color`	string	Hex color	Section background (when `background_style` is `solid`)
`background_gradient_from`	string	Hex color	Gradient start color (when `background_style` is `gradient`)
`background_gradient_to`	string	Hex color	Gradient end color (when `background_style` is `gradient`)

Statistics Section

Display key numbers and achievements.

Available for: page, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "stats",
  "content": {
    "headline": "By the Numbers",
    "subheadline": "Our impact in numbers",
    "stats": [
      { "value": "10000", "label": "Happy Customers", "prefix": "", "suffix": "+", "icon": "users" },
      { "value": "99", "label": "Satisfaction Rate", "prefix": "", "suffix": "%", "icon": "star" },
      { "value": "24", "label": "Hour Support", "prefix": "", "suffix": "/7", "icon": "clock" },
      { "value": "50", "label": "Store Locations", "prefix": "", "suffix": "+", "icon": "map-pin" }
    ]
  },
  "settings": {
    "anchor_id": "stats",
    "layout": "row",
    "columns": 4,
    "alignment": "center",
    "animated": true,
    "animation_duration": 2000,
    "value_size": "large",
    "value_color": "#dc2626",
    "label_color": "#6b7280",
    "background_style": "solid",
    "background_color": "#f9fafb",
    "background_gradient_from": "",
    "background_gradient_to": "",
    "dividers": true
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Section heading
`subheadline`	string	No	Section subheading
`stats`	array	Yes	Array of statistic objects

Stat Object

Field	Type	Required	Description
`value`	string	Yes	The number to display
`label`	string	Yes	Description label
`prefix`	string	No	Text before number (e.g., "$")
`suffix`	string	No	Text after number (e.g., "%", "+")
`icon`	string	No	Optional icon name

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`row`, `stacked`, `inline`	Layout style
`columns`	integer	`2`-`6`	Number of columns
`alignment`	string	`left`, `center`	Content alignment
`animated`	boolean	`true`, `false`	Animate numbers on scroll
`animation_duration`	integer	Milliseconds	Animation duration
`value_size`	string	`medium`, `large`, `xlarge`	Number size
`value_color`	string	Hex color	Number color
`label_color`	string	Hex color	Label color
`background_style`	string	`none`, `solid`, `gradient`	Background style
`background_color`	string	Hex color	Background color (when `background_style` is `solid`)
`background_gradient_from`	string	Hex color	Gradient start color (when `background_style` is `gradient`)
`background_gradient_to`	string	Hex color	Gradient end color (when `background_style` is `gradient`)
`dividers`	boolean	`true`, `false`	Show dividers between stats

Team Members Section

Team member profiles with photos and bios.

Available for: page, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "team",
  "content": {
    "headline": "Meet Our Team",
    "subheadline": "The people behind our success",
    "members": [
      {
        "image": {
          "url": "https://cdn.example.com/team/jane.jpg",
          "id": "med_001"
        },
        "name": "Jane Smith",
        "title": "CEO & Founder",
        "bio": "Jane founded the company in 2020 with a vision to transform retail.",
        "email": "jane@example.com",
        "phone": "",
        "social_links": {
          "linkedin": "https://linkedin.com/in/janesmith",
          "twitter": "https://twitter.com/janesmith",
          "facebook": "",
          "instagram": ""
        }
      }
    ]
  },
  "settings": {
    "anchor_id": "team",
    "layout": "grid",
    "columns": 3,
    "card_style": "elevated",
    "image_style": "circle",
    "image_size": "large",
    "show_bio": true,
    "show_social": true,
    "show_contact": false,
    "alignment": "center",
    "background_style": "none",
    "background_color": "",
    "background_gradient_from": "",
    "background_gradient_to": ""
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Section heading
`subheadline`	string	No	Section subheading
`members`	array	Yes	Array of team member objects

Team Member Object

Field	Type	Required	Description
`image`	object	No	Member photo
`name`	string	Yes	Member name
`title`	string	No	Job title
`bio`	string	No	Short biography
`email`	string	No	Email address
`phone`	string	No	Phone number
`social_links`	object	No	Social media links
`social_links.linkedin`	string	No	LinkedIn URL
`social_links.twitter`	string	No	Twitter URL
`social_links.facebook`	string	No	Facebook URL
`social_links.instagram`	string	No	Instagram URL

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`grid`, `cards`, `list`	Layout style
`columns`	integer	`2`-`4`	Number of columns
`card_style`	string	`minimal`, `elevated`, `bordered`	Card style
`image_style`	string	`circle`, `rounded`, `square`	Photo shape
`image_size`	string	`small`, `medium`, `large`	Photo size
`show_bio`	boolean	`true`, `false`	Show biography
`show_social`	boolean	`true`, `false`	Show social links
`show_contact`	boolean	`true`, `false`	Show email/phone
`alignment`	string	`left`, `center`	Content alignment
`background_style`	string	`none`, `solid`, `gradient`	Background style
`background_color`	string	Hex color	Section background (when `background_style` is `solid`)
`background_gradient_from`	string	Hex color	Gradient start color (when `background_style` is `gradient`)
`background_gradient_to`	string	Hex color	Gradient end color (when `background_style` is `gradient`)

Custom HTML Section

Embed custom HTML code, iframes, or third-party widget snippets.

Available for: page, article, landing, homepage

json

{
  "id": "section_1737456789_abc123def",
  "type": "html",
  "content": {
    "title": "Store Locator",
    "body": "<iframe src=\"https://maps.google.com/...\" width=\"100%\" height=\"450\" frameborder=\"0\"></iframe>"
  },
  "settings": {
    "anchor_id": "map",
    "max_width": "full",
    "padding": "medium"
  }
}

Content Fields

Field	Type	Required	Description
`title`	string	No	Optional heading displayed above the HTML content
`body`	string	Yes	Raw HTML code, iframe embeds, or widget snippets

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID for navigation
`max_width`	string	`narrow`, `medium`, `wide`, `full`	Content max width
`padding`	string	`none`, `small`, `medium`, `large`	Vertical padding

Lead Form Section

Lead capture or contact form.

Available for: landing (only)

json

{
  "id": "section_1737456789_abc123def",
  "type": "form",
  "content": {
    "headline": "Get In Touch",
    "subheadline": "We'd love to hear from you",
    "description": "Fill out the form below and we'll get back to you within 24 hours.",
    "fields": [
      {
        "type": "text",
        "name": "name",
        "label": "Full Name",
        "placeholder": "Your name",
        "required": true,
        "options": [],
        "validation": "",
        "error_message": ""
      },
      {
        "type": "email",
        "name": "email",
        "label": "Email Address",
        "placeholder": "you@example.com",
        "required": true,
        "options": [],
        "validation": "",
        "error_message": "Please enter a valid email address"
      },
      {
        "type": "phone",
        "name": "phone",
        "label": "Phone Number",
        "placeholder": "(555) 123-4567",
        "required": false,
        "options": [],
        "validation": "",
        "error_message": ""
      },
      {
        "type": "select",
        "name": "interest",
        "label": "What are you interested in?",
        "placeholder": "Select an option",
        "required": true,
        "options": ["Products", "Services", "Partnership", "Other"],
        "validation": "",
        "error_message": ""
      },
      {
        "type": "textarea",
        "name": "message",
        "label": "Message",
        "placeholder": "How can we help you?",
        "required": false,
        "options": [],
        "validation": "",
        "error_message": ""
      }
    ],
    "submit_text": "Send Message",
    "success_message": "Thank you! We'll be in touch soon.",
    "success_redirect_url": "/thank-you",
    "privacy_text": "We respect your privacy and will never share your information.",
    "privacy_link_url": "/privacy",
    "privacy_link_text": "Privacy Policy"
  },
  "settings": {
    "anchor_id": "contact",
    "layout": "stacked",
    "label_position": "above",
    "field_size": "medium",
    "button_style": "primary",
    "button_width": "full",
    "button_alignment": "center",
    "show_required_indicator": true,
    "background_color": "#f9fafb",
    "border_style": "rounded",
    "max_width": "medium"
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Form heading
`subheadline`	string	No	Form subheading
`description`	string	No	Additional description
`fields`	array	Yes	Form field definitions
`submit_text`	string	No	Submit button text (default: "Submit")
`success_message`	string	No	Message shown after submission
`success_redirect_url`	string	No	URL to redirect after submission
`privacy_text`	string	No	Privacy notice text
`privacy_link_url`	string	No	Privacy policy URL
`privacy_link_text`	string	No	Privacy link text

Form Field Object

Field	Type	Required	Description
`type`	string	Yes	Field type (see below)
`name`	string	Yes	Field name (for form data)
`label`	string	Yes	Field label
`placeholder`	string	No	Placeholder text
`required`	boolean	No	Whether field is required
`options`	array	No	Options for select/radio/checkbox
`validation`	string	No	Regex pattern for validation
`error_message`	string	No	Custom error message

Form Field Types

Type	Description
`text`	Single-line text input
`email`	Email input with validation
`phone`	Phone number input
`textarea`	Multi-line text area
`select`	Dropdown select (requires `options`)
`checkbox`	Checkbox input
`radio`	Radio button group (requires `options`)
`date`	Date picker

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`stacked`, `inline`, `two-column`	Form layout
`label_position`	string	`above`, `floating`, `hidden`	Label position
`field_size`	string	`small`, `medium`, `large`	Input field size
`button_style`	string	`primary`, `secondary`, `outline`	Button style
`button_width`	string	`auto`, `full`	Button width
`button_alignment`	string	`left`, `center`, `right`	Button alignment
`show_required_indicator`	boolean	`true`, `false`	Show * for required fields
`background_color`	string	Hex color	Section background
`border_style`	string	`none`, `rounded`, `pill`	Input border style
`max_width`	string	`small`, `medium`, `large`, `full`	Form max width

Product Carousel Section

Showcase products in a carousel or grid layout for e-commerce pages.

Available for: page, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "products",
  "content": {
    "headline": "Featured Products",
    "subheadline": "Check out our top picks",
    "source": "manual",
    "products": [
      {
        "product_id": "prd_00000k1L2m3N4o5",
        "title": "Organic Apples",
        "description": "Fresh organic apples from local farms",
        "image": {
          "url": "https://cdn.example.com/products/apples.jpg",
          "id": "med_001"
        },
        "price": "$3.99",
        "compare_price": "$4.99",
        "url": "/products/organic-apples",
        "badge": "Sale"
      }
    ],
    "category_id": "",
    "tag": "",
    "limit": 8,
    "sort_by": "featured",
    "cta_text": "Shop All Products",
    "cta_url": "/products"
  },
  "settings": {
    "anchor_id": "featured-products",
    "layout": "carousel",
    "columns": 4,
    "gap_size": "medium",
    "card_style": "elevated",
    "show_image": true,
    "image_aspect_ratio": "1:1",
    "show_price": true,
    "show_compare_price": true,
    "show_rating": true,
    "show_add_to_cart": true,
    "show_quick_view": false,
    "autoplay": false,
    "autoplay_interval": 5000,
    "show_arrows": true,
    "show_dots": true,
    "background_color": ""
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Section heading
`subheadline`	string	No	Section subheading
`source`	string	No	Product source: `manual`, `category`, `tag`
`products`	array	No	Manually selected products (when source is `manual`)
`category_id`	string	No	Category hashkey (when source is `category`)
`tag`	string	No	Product tag (when source is `tag`)
`limit`	integer	No	Max products to display (default: 8)
`sort_by`	string	No	Sort order: `featured`, `newest`, `price_asc`, `price_desc`
`cta_text`	string	No	Footer CTA button text
`cta_url`	string	No	Footer CTA button URL

Product Item Object

Field	Type	Required	Description
`product_id`	string	No	Product hashkey for dynamic lookup
`title`	string	Yes	Product title
`description`	string	No	Short product description
`image`	object	No	Product image
`price`	string	Yes	Display price
`compare_price`	string	No	Original/compare-at price
`url`	string	No	Product detail page URL
`badge`	string	No	Badge text (e.g., "Sale", "New")

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`carousel`, `grid`	Display layout
`columns`	integer	`2`-`6`	Number of columns
`gap_size`	string	`none`, `small`, `medium`, `large`	Gap between items
`card_style`	string	`none`, `bordered`, `elevated`, `filled`	Card style
`show_image`	boolean	`true`, `false`	Show product image
`image_aspect_ratio`	string	`1:1`, `4:3`, `16:9`, `auto`	Image aspect ratio
`show_price`	boolean	`true`, `false`	Show price
`show_compare_price`	boolean	`true`, `false`	Show compare-at price
`show_rating`	boolean	`true`, `false`	Show star rating
`show_add_to_cart`	boolean	`true`, `false`	Show add to cart button
`show_quick_view`	boolean	`true`, `false`	Show quick view button
`autoplay`	boolean	`true`, `false`	Carousel autoplay
`autoplay_interval`	integer	Milliseconds	Time between slides
`show_arrows`	boolean	`true`, `false`	Show navigation arrows
`show_dots`	boolean	`true`, `false`	Show dot indicators
`background_color`	string	Hex color	Section background

Coupon Carousel Section

Display coupons and promotional offers for e-commerce pages.

Available for: page, landing

json

{
  "id": "section_1737456789_abc123def",
  "type": "coupons",
  "content": {
    "headline": "Current Offers",
    "subheadline": "Don't miss these great deals",
    "source": "manual",
    "coupons": [
      {
        "offer_id": "ofr_00000p1Q2r3S4t5",
        "code": "SUMMER20",
        "title": "Summer Sale",
        "description": "Save 20% on your entire purchase",
        "discount_text": "20% Off",
        "image": {
          "url": "https://cdn.example.com/offers/summer-sale.jpg",
          "id": "med_001"
        },
        "terms": "Minimum purchase $50. Cannot be combined with other offers.",
        "expires_at": "2024-08-31T23:59:59+00:00",
        "url": "/offers/summer20"
      }
    ],
    "offer_ids": [],
    "limit": 6,
    "cta_text": "View All Offers",
    "cta_url": "/offers"
  },
  "settings": {
    "anchor_id": "offers",
    "layout": "carousel",
    "columns": 3,
    "gap_size": "medium",
    "card_style": "bordered",
    "show_image": true,
    "show_code": true,
    "show_discount": true,
    "show_expiry": true,
    "show_terms": false,
    "show_copy_button": true,
    "show_redeem_button": true,
    "autoplay": true,
    "autoplay_interval": 6000,
    "show_arrows": true,
    "show_dots": true,
    "background_color": ""
  }
}

Content Fields

Field	Type	Required	Description
`headline`	string	No	Section heading
`subheadline`	string	No	Section subheading
`source`	string	No	Coupon source: `manual`, `offers`
`coupons`	array	No	Manually defined coupons (when source is `manual`)
`offer_ids`	array	No	Offer hashkeys (when source is `offers`)
`limit`	integer	No	Max coupons to display (default: 6)
`cta_text`	string	No	Footer CTA button text
`cta_url`	string	No	Footer CTA button URL

Coupon Item Object

Field	Type	Required	Description
`offer_id`	string	No	Offer hashkey for dynamic lookup
`code`	string	No	Coupon code to display/copy
`title`	string	Yes	Coupon title
`description`	string	No	Coupon description
`discount_text`	string	No	Discount display text (e.g., "20% Off")
`image`	object	No	Coupon/offer image
`terms`	string	No	Terms and conditions
`expires_at`	string	No	ISO 8601 expiration timestamp
`url`	string	No	Offer detail page URL

Settings

Field	Type	Options	Description
`anchor_id`	string	Any	HTML anchor ID
`layout`	string	`carousel`, `grid`	Display layout
`columns`	integer	`2`-`4`	Number of columns
`gap_size`	string	`none`, `small`, `medium`, `large`	Gap between items
`card_style`	string	`none`, `bordered`, `elevated`, `filled`	Card style
`show_image`	boolean	`true`, `false`	Show coupon image
`show_code`	boolean	`true`, `false`	Show coupon code
`show_discount`	boolean	`true`, `false`	Show discount text
`show_expiry`	boolean	`true`, `false`	Show expiration date
`show_terms`	boolean	`true`, `false`	Show terms and conditions
`show_copy_button`	boolean	`true`, `false`	Show copy code button
`show_redeem_button`	boolean	`true`, `false`	Show redeem/use button
`autoplay`	boolean	`true`, `false`	Carousel autoplay
`autoplay_interval`	integer	Milliseconds	Time between slides
`show_arrows`	boolean	`true`, `false`	Show navigation arrows
`show_dots`	boolean	`true`, `false`	Show dot indicators
`background_color`	string	Hex color	Section background

Rendering Content Sections

Basic Section Renderer

javascript

function renderSection(section) {
  const { type, content, settings } = section;
  const anchorId = settings.anchor_id ? `id="${settings.anchor_id}"` : '';

  switch (type) {
    case 'content':
      return `
        <section ${anchorId} class="content-block max-w-${settings.max_width} text-${settings.alignment}"
          style="background-color: ${settings.background_color || 'transparent'}; padding: var(--padding-${settings.padding})">
          ${content.headline ? `<h2>${content.headline}</h2>` : ''}
          ${content.subheadline ? `<p class="subheadline">${content.subheadline}</p>` : ''}
          ${content.body ? `<div class="prose">${content.body}</div>` : ''}
          ${content.cta_text ? `
            <a href="${content.cta_url}" target="${content.cta_target}" class="btn btn-primary">
              ${content.cta_text}
            </a>
          ` : ''}
        </section>
      `;

    case 'image':
      const imageHtml = `
        <img
          src="${content.image?.url}"
          alt="${content.alt_text}"
          class="size-${settings.size} radius-${settings.border_radius} shadow-${settings.shadow}"
        />
        ${content.caption ? `<figcaption>${content.caption}</figcaption>` : ''}
      `;
      return `
        <figure ${anchorId} class="image-section align-${settings.alignment}">
          ${content.link_url
            ? `<a href="${content.link_url}" target="${content.link_target}">${imageHtml}</a>`
            : imageHtml
          }
        </figure>
      `;

    case 'hero':
      const bgStyle = settings.background_type === 'image'
        ? `background-image: url(${settings.background_image?.url})`
        : `background-color: ${settings.background_color}`;
      return `
        <section ${anchorId} class="hero hero--${settings.height} text-${settings.text_color}"
          style="${bgStyle}; background-position: ${settings.background_position}">
          ${settings.overlay_opacity > 0 ? `
            <div class="hero-overlay" style="background-color: ${settings.overlay_color}; opacity: ${settings.overlay_opacity / 100}"></div>
          ` : ''}
          <div class="hero-content max-w-${settings.content_width} text-${settings.text_alignment}">
            <h1>${content.headline}</h1>
            ${content.subheadline ? `<p class="hero-subheadline">${content.subheadline}</p>` : ''}
            ${content.body ? `<div class="hero-body">${content.body}</div>` : ''}
            <div class="hero-ctas">
              ${content.cta_text ? `<a href="${content.cta_url}" class="btn btn-primary">${content.cta_text}</a>` : ''}
              ${content.secondary_cta_text ? `<a href="${content.secondary_cta_url}" class="btn btn-secondary">${content.secondary_cta_text}</a>` : ''}
            </div>
          </div>
        </section>
      `;

    case 'features':
      return `
        <section ${anchorId} class="features layout-${settings.layout}"
          style="background-color: ${settings.background_color || 'transparent'}">
          ${content.headline ? `<h2 class="text-${settings.alignment}">${content.headline}</h2>` : ''}
          ${content.subheadline ? `<p class="subheadline">${content.subheadline}</p>` : ''}
          <div class="features-grid columns-${settings.columns}">
            ${content.features.map(f => `
              <div class="feature card-${settings.card_style}">
                ${f.icon ? `<div class="feature-icon icon-${settings.icon_style} icon-${settings.icon_size}"
                  style="color: ${settings.icon_color}; background: ${settings.icon_background}">${f.icon}</div>` : ''}
                <h3>${f.title}</h3>
                ${f.description ? `<p>${f.description}</p>` : ''}
                ${f.link_url ? `<a href="${f.link_url}">${f.link_text || 'Learn more'}</a>` : ''}
              </div>
            `).join('')}
          </div>
        </section>
      `;

    case 'stats':
      const statsBg = settings.background_style === 'gradient'
        ? `background: linear-gradient(to right, ${settings.background_gradient_from}, ${settings.background_gradient_to})`
        : `background-color: ${settings.background_color || 'transparent'}`;
      return `
        <section ${anchorId} class="stats layout-${settings.layout}"
          style="${statsBg}">
          ${content.headline ? `<h2>${content.headline}</h2>` : ''}
          <div class="stats-grid columns-${settings.columns} ${settings.dividers ? 'with-dividers' : ''}">
            ${content.stats.map(s => `
              <div class="stat text-${settings.alignment}">
                ${s.icon ? `<span class="stat-icon">${s.icon}</span>` : ''}
                <span class="stat-value size-${settings.value_size}" style="color: ${settings.value_color}">
                  ${s.prefix}${settings.animated ? `<span data-count="${s.value}">0</span>` : s.value}${s.suffix}
                </span>
                <span class="stat-label" style="color: ${settings.label_color}">${s.label}</span>
              </div>
            `).join('')}
          </div>
        </section>
      `;

    case 'testimonials':
      const testimonialsBg = settings.background_style === 'gradient'
        ? `background: linear-gradient(to right, ${settings.background_gradient_from}, ${settings.background_gradient_to})`
        : `background-color: ${settings.background_color || 'transparent'}`;
      return `
        <section ${anchorId} class="testimonials layout-${settings.layout}"
          style="${testimonialsBg}">
          ${content.headline ? `<h2>${content.headline}</h2>` : ''}
          <div class="testimonials-container ${settings.layout === 'grid' ? `columns-${settings.columns}` : ''}">
            ${content.testimonials.map(t => `
              <div class="testimonial card-${settings.card_style}">
                ${settings.show_rating && t.rating ? `
                  <div class="testimonial-rating">${'★'.repeat(t.rating)}${'☆'.repeat(5 - t.rating)}</div>
                ` : ''}
                <blockquote>"${t.quote}"</blockquote>
                <div class="testimonial-author">
                  ${settings.show_avatar && t.author_image ? `
                    <img src="${t.author_image.url}" alt="${t.author_name}" class="avatar-${settings.avatar_size}" />
                  ` : ''}
                  <div>
                    <strong>${t.author_name}</strong>
                    ${t.author_title ? `<span>${t.author_title}</span>` : ''}
                    ${settings.show_company && t.author_company ? `<span>${t.author_company}</span>` : ''}
                  </div>
                </div>
              </div>
            `).join('')}
          </div>
        </section>
      `;

    default:
      console.warn(`Unknown section type: ${type}`);
      return '';
  }
}

// Render all sections in content
function renderContent(sections) {
  return sections.map(renderSection).join('\n');
}

Vue Component Example

vue

<template>
  <component
    :is="getSectionComponent(section.type)"
    :content="section.content"
    :settings="section.settings"
    :id="section.settings.anchor_id || undefined"
  />
</template>

<script setup>
import { defineAsyncComponent } from 'vue';

const props = defineProps({
  section: { type: Object, required: true }
});

const sectionComponents = {
  content: defineAsyncComponent(() => import('./sections/ContentSection.vue')),
  image: defineAsyncComponent(() => import('./sections/ImageSection.vue')),
  video: defineAsyncComponent(() => import('./sections/VideoSection.vue')),
  gallery: defineAsyncComponent(() => import('./sections/GallerySection.vue')),
  hero: defineAsyncComponent(() => import('./sections/HeroSection.vue')),
  cta: defineAsyncComponent(() => import('./sections/CtaSection.vue')),
  features: defineAsyncComponent(() => import('./sections/FeaturesSection.vue')),
  testimonials: defineAsyncComponent(() => import('./sections/TestimonialsSection.vue')),
  stats: defineAsyncComponent(() => import('./sections/StatsSection.vue')),
  team: defineAsyncComponent(() => import('./sections/TeamSection.vue')),
  form: defineAsyncComponent(() => import('./sections/FormSection.vue')),
  products: defineAsyncComponent(() => import('./sections/ProductsSection.vue')),
  coupons: defineAsyncComponent(() => import('./sections/CouponsSection.vue')),
};

function getSectionComponent(type) {
  return sectionComponents[type] || null;
}
</script>

Platform Elements

In addition to built-in section types, content sections may include platform elements -- dynamic components registered by consuming platforms and resolved client-side. Platform elements are stored with type: "platform_element" and include platform_key and element_key fields to identify which component to render.

json

{
  "id": "section_1711234567_abc123def",
  "type": "platform_element",
  "source": "platform",
  "platform_key": "ecom360",
  "element_key": "popular-sale-items",
  "content": {},
  "config": {
    "max_items": 12,
    "layout": "carousel"
  },
  "settings": {
    "anchor_id": "",
    "padding": "medium"
  }
}

Platform Element Fields

Field	Type	Description
`type`	string	Always `"platform_element"`
`source`	string	Always `"platform"`
`platform_key`	string	The platform that owns this element (e.g., `ecom360`)
`element_key`	string	The specific element identifier (e.g., `popular-sale-items`)
`content`	object	Reserved for future use (currently empty)
`config`	object	Editor-configured values specific to this element
`settings`	object	Standard section settings (padding, max_width, etc.)

Your renderer should check section.type === 'platform_element' and resolve to a platform-specific component using platform_key and element_key.

Full Documentation

See the Platform Elements reference for the registration API, config schema format, and detailed storage structure.

Open Graph Data

Content items may include Open Graph metadata for social sharing:

json

{
  "og_data": {
    "title": "Summer Sale Announcement",
    "description": "Don't miss our biggest summer sale event",
    "image": "https://cdn.example.com/images/og-summer.jpg",
    "type": "article"
  }
}

Field	Type	Description
`title`	string	OG title (fallback to content title)
`description`	string	OG description
`image`	string	OG image URL (1200x630 recommended)
`type`	string	OG type (typically `"article"` or `"website"`)

Using OG Data

html

<!-- In your page's <head> -->
<meta property="og:title" content="{{ content.og_data.title }}" />
<meta property="og:description" content="{{ content.og_data.description }}" />
<meta property="og:image" content="{{ content.og_data.image }}" />
<meta property="og:type" content="{{ content.og_data.type || 'article' }}" />

HTTP Status Codes

Status	Meaning	When Used
`200`	OK	Successful request
`400`	Bad Request	Invalid parameters or missing context
`401`	Unauthorized	Missing or invalid token
`403`	Forbidden	Valid token but no access to resource
`404`	Not Found	Resource doesn't exist or isn't visible
`422`	Unprocessable Entity	Validation errors
`429`	Too Many Requests	Rate limit exceeded
`500`	Internal Server Error	Server error

Changelog

Date	Change
2026-03-24	Added platform elements section type and schema documentation.
2026-03-24	Added custom types schema documentation.
2026-03-13	Added image fit mode, video background, gradient overlay, parallax, and expanded position options.
2026-03-10	Added Custom HTML content block type.
2026-03-08	Added placement filter to schemas.
2026-02-23	Updated for CloudFront CDN delivery.
2026-02-11	Added hero placement schema.
2026-02-10	Fixed admin UI and API schema discrepancies.
2026-02-04	Added section settings schema.
2026-01-28	Expanded documentation.
2026-01-21	Added location_id parameter.
2026-01-15	Initial publication.

Response Schemas ​

Response Envelope ​

Success Response ​

Error Response ​

Validation Error Example ​

Pagination ​

Pagination Fields ​

Link Object ​

Pagination Example ​

ID Format (Hashkeys) ​

Using Hashkeys ​

Timestamps ​

Timestamp Fields ​

Parsing Timestamps ​

Content Blocks ​

Block Categories ​

Slice Types (Pages & Articles) ​

Available Slice Types ​

Slice Structure ​

Text Slice ​

Image Slice ​

Video Slice ​

Hero Slice ​

Call to Action Slice ​

Grid Slice ​

Carousel Slice ​

Testimonial Slice ​

Content Sections ​

Available Section Types ​

Section Structure ​

Content Block Section ​

Content Fields ​

Settings ​

Image Section ​

Content Fields ​

Settings ​

Video Section ​

Content Fields ​

Settings ​

Image Gallery Section ​

Content Fields ​

Gallery Image Object ​

Settings ​

Hero Section ​

Source Modes ​

Inline Mode Example ​

Linked Mode Example ​

Content Fields ​

Slide Object ​

CTA Button Object ​

Slide Link Object ​

Settings ​

Call to Action Section ​

Content Fields ​

Settings ​

Features Section ​

Content Fields ​

Feature Object ​

Settings ​

Testimonials Section ​

Content Fields ​

Testimonial Object ​

Settings ​

Statistics Section ​

Content Fields ​

Stat Object ​

Settings ​

Team Members Section ​

Content Fields ​

Team Member Object ​

Settings ​

Custom HTML Section ​

Content Fields ​

Settings ​

Lead Form Section ​

Content Fields ​

Form Field Object ​

Form Field Types ​

Settings ​

Product Carousel Section ​

Response Schemas

Response Envelope

Success Response

Error Response

Validation Error Example

Pagination

Pagination Fields

Link Object

Pagination Example

ID Format (Hashkeys)

Using Hashkeys

Timestamps

Timestamp Fields

Parsing Timestamps

Content Blocks

Block Categories

Slice Types (Pages & Articles)

Available Slice Types

Slice Structure

Text Slice

Image Slice

Video Slice

Hero Slice

Call to Action Slice

Grid Slice

Carousel Slice

Testimonial Slice

Content Sections

Available Section Types

Section Structure

Content Block Section

Content Fields

Settings

Image Section

Content Fields

Settings

Video Section

Content Fields

Settings

Image Gallery Section

Content Fields

Gallery Image Object

Settings

Hero Section

Source Modes

Inline Mode Example

Linked Mode Example

Content Fields

Slide Object

CTA Button Object

Slide Link Object

Settings

Call to Action Section

Content Fields

Settings

Features Section

Content Fields

Feature Object

Settings

Testimonials Section

Content Fields

Testimonial Object

Settings

Statistics Section

Content Fields

Stat Object

Settings

Team Members Section

Content Fields

Team Member Object

Settings

Custom HTML Section

Content Fields

Settings

Lead Form Section

Content Fields

Form Field Object

Form Field Types

Settings

Product Carousel Section