> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embeddables.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embeddables CMS

> Use the Embeddables CMS to manage dynamic content for your Embeddables without code changes

The **Embeddables CMS** is a powerful content management system that lets you control dynamic content in your Embeddables from outside the Builder.

It provides a user-friendly interface for managing data like **Stripe prices** or **programmatic SEM page content**, that can be used across all your Embeddables.

## Key Benefits

* **No-Code Updates**: Make content changes without modifying or deploying code.
* **User-Friendly Interface**: Simple table-based interface for managing data.
* **Audit Trail**: Track changes to your content over time.
* **Real-Time Updates**: Changes in the CMS are immediately reflected in your Embeddables.
* **Non-Technical Users**: Enable team members to update content without coding knowledge.

<Card title="How To: Control Stripe Prices from the Embeddables CMS" icon="code" href="/how-to/control-stripe-prices-from-cms">
  Learn how to use the Embeddables CMS to manage Stripe prices.
</Card>

## How to Use the CMS

### Creating Tables

1. Navigate to the CMS section in the Embeddables Web App.
2. Click "Edit Tables" to begin.
3. Select "+ Add Table" and choose from available templates or start with a blank table.
4. Configure your columns with appropriate names, keys, and types.

### Managing Content

* Add rows to your tables with the "+ Add Row" button.
* Edit existing content by clicking on cells.
* Each table has a unique ID that you'll use to connect it to your Embeddables.

### Connecting to an Embeddable

To use CMS data in your Embeddable:

<Steps>
  <Step title="Add a new Content Source">
    * In the Embeddables Builder, go to the Embeddable Options (make sure to deselect any pages or components by pressing Escape).
    * Scroll down to the CMS section and click `+ Add Content Source`.
  </Step>

  <Step title="Choose a User Data key">
    <Title>Enter a key under which to store the data in the User Data.</Title>
  </Step>

  <Step title="Select a table">
    <Title>Select the table you want to connect to (if you don't see any tables, make sure that you've saved the new table as a version in the CMS).</Title>
  </Step>

  <Step title="Configure which records are fetched">
    * Under "Which records should get shown?", choose the method by which you want to control which record(s) are included
      * `Show all records` - All records in the table will be fetched (or just the first record if `Multiple Records` is left unchecked)
      * `Records that match a URL pattern` - Only records that match the URL pattern will be fetched (or the first record that matches if `Multiple Records` is left unchecked)
    * If you choose `Records that match a URL pattern`, under "Controller Key", enter a column key that will be used to match the URL pattern.
    * Check the "Multiple Records" checkbox if you want to fetch multiple records - e.g. to display a list of items like FAQs or Prices.
  </Step>

  <Step title="Finish setting it up">
    * Add your chosen User Data key to the list of Registered Keys in the Embeddable Options.
    * You can now reference the data in your Embeddable, just like you would with any other User Data property.
  </Step>
</Steps>

<Warning>
  When testing your Embeddable on a preview link, you must add <code>savvy\_test=false</code> to the URL to ensure CMS data loads as expected.
</Warning>

### Utilizing CMS Version Control

Just like the Embeddables Builder, the Embeddables CMS comes with a built-in version control system that allows you to track changes to your content over time.

You can save a new version, switch versions, and push a version to staging or production, from the controls in the top right of the CMS page (when Editing Tables).

To preview an Embeddable with the content from a specific CMS version, you can use the `savvy_cms` URL parameter, which works in the same way as the `version` parameter:

* To preview a particular version, add `savvy_cms=123` to the URL.
* To preview the latest version (useful if you're making lots of updates), just use `savvy_cms=latest`.
* To preview the version currently on staging, use `savvy_cms=staging`.

<Tip>
  This is a great way to preview what your CMS content updates will look like before pushing them live.
</Tip>

## Example Use Cases

### 1. Managing Stripe Prices

The CMS can manage your Stripe pricing configuration, making it easy to update prices without code changes.

**Example Table Structure:**

| Column Name         | Column Key        | Purpose                                  |
| ------------------- | ----------------- | ---------------------------------------- |
| **Plan Name**       | `plan_name`       | Identifies the pricing plan              |
| **Stripe Price ID** | `stripe_price_id` | Links to Stripe's price ID               |
| **Price Amount**    | `price_amount`    | Displays the actual price                |
| **Size**            | `size`            | Distinguishes between plan sizes         |
| **Discount Type**   | `discount`        | Identifies if this is a discounted price |

This setup allows you to:

* Maintain multiple pricing tiers.
* Update prices without writing code or saving new versions.
* Give non-technical team members ability to manage pricing.
* Keep a clear audit trail of price changes.

For a full guide on how to use the CMS to manage Stripe prices, go here:

<Card title="How To: Control Stripe Prices from the Embeddables CMS" icon="code" href="/how-to/control-stripe-prices-from-cms">
  Learn how to use the Embeddables CMS to manage Stripe prices.
</Card>

### 2. Programmatic SEM Pages

Use the CMS to control content displayed on templated pages based on URL parameters.

This is a great way to create a large number of pages from a single template, so you can utilize **Search Engine Marketing (SEM)** to target different audiences.

**Example Table Structure:**

| Column Name     | Column Key    | Purpose                              |
| --------------- | ------------- | ------------------------------------ |
| **Page URL**    | `url_slug`    | Defines the URL path for the content |
| **Title**       | `title`       | Page title to display                |
| **Description** | `description` | Page meta description                |
| **Content**     | `content`     | Main page content                    |
| **Image URL**   | `image_url`   | Featured image for the page          |

This enables you to:

* Create hundreds of pages from a single template.
* Target different audiences or SEO keywords.
* Update content through the CMS interface.

## Best Practices

1. **Plan Your Schema**: Carefully design your table structure before creating it.
2. **Use Clear Names**: Choose descriptive column names and `snake_case` keys.
3. **Test Updates**: Verify changes on the latest CMS version before pushing to production.

## Available Templates

The CMS comes with several pre-built templates for common use cases:

* **Blank Table**: Start from scratch.
* **Prices**: Manage product/service pricing.
* **URLs & Links**: Handle URL routing and redirects.
* **FAQs**: Organize frequently asked questions.
* **Programmatic Pages**: Control dynamic page content.
* **Coupons**: Manage promotional codes and discounts.

Each template comes with recommended columns and structure, which you can customize to fit your needs.