All videos
Add components to CMS rich text
Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

Add components to CMS rich text

Add components like CTAs, testimonials, and forms right in line with text in a Webflow CMS rich text field. You’ll see how to insert a component, customize its properties, and preview it on a case study page. Then find out how to organize components for your team, hide designer-only ones from marketers, and update component styling.

Video transcript

Add components to CMS rich text for things like CTAs, testimonials, or forms, right inline with other text. In a CMS item’s rich text field, click into a new line and then click the plus button. Scroll until you see Component, or type slash and search for Component.

You’ll see all of your site’s components, organized by any groups you set up. But we wouldn’t want something like a Navbar right in the middle of a case study.

There are a few ways to handle this for your team. First, you could set up a Rich text group. Here, we’ve done that and even named the components within it with the prefix “RT.” You can name components and organize them into groups in the Components panel. And if there are components meant only for designer use, you can deselect Show for Marketers to hide them from marketers’ choices on both static pages and in CMS rich text.

But we’ll choose RT CTA. The component is added where we placed our cursor. Next, we can customize the properties. The properties you’ve set up on the component can be used here, just like on a static page. With that finished, open preview mode to see the new CTA on this case study page.

These are added at the item level, so this CTA won’t appear on every case study. You can choose to add and customize individual components on different case studies. Publish a case study when you’re ready to make its components live, along with its other content.

And component styling? That’s handled when you build the component. Open the main component on the Component Canvas. Here, we can see it uses a shared class and variables from our site’s design system.

We could even add a variant here if we wanted to create a narrower option or another color choice. Those would be usable in rich text, too. But heads up: if you do make changes to the main component, you’ll need a full site published to make that design available on the live site anywhere, including rich text.

And another note, you can’t populate component slots within rich text. So for example, you couldn’t add cards to a section component’s slot within rich text. But that’s how you add and customize components in CMS rich text.