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.

How To: Control Stripe Prices from the Embeddables CMS

Learn how to use the Embeddables CMS to manage Stripe prices.

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:

1. 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.
2. Choose a User Data key
3. Select a table
4. 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.
5. 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.

When testing your Embeddable on a preview link, you must add savvy_test=false to the URL to ensure CMS data loads as expected.

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.

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

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:

How To: Control Stripe Prices from the Embeddables CMS

Learn how to use the Embeddables CMS to manage Stripe prices.

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.