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
- Navigate to the CMS section in the Embeddables Web App.
- Click “Edit Tables” to begin.
- Select ”+ Add Table” and choose from available templates or start with a blank table.
- 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:
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.
Choose a User Data key
Select a table
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 ifMultiple Recordsis left unchecked)Records that match a URL pattern- Only records that match the URL pattern will be fetched (or the first record that matches ifMultiple Recordsis 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.
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=123to 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
- Plan Your Schema: Carefully design your table structure before creating it.
- Use Clear Names: Choose descriptive column names and
snake_casekeys. - 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.