Discover how to easily add prebuilt components to your Webflow CMS rich text fields using a straightforward JavaScript snippet. With just a simple syntax and the data-component attribute, you can dynamically insert custom elements like CTAs, forms, or other interactive content directly into your rich text blocks.
Add this code to your CMS page and adjust the name of your rich text class to match the code .post-body_rich-text
<script>
document.addEventListener("DOMContentLoaded", function() {
var richText = document.querySelector('.post-body_rich-text');
var content = richText.innerHTML;
// Find all elements with data-component attribute
var components = document.querySelectorAll('[data-component]');
components.forEach(function(component) {
var placeholder = `[[${component.getAttribute('data-component')}]]`; // Match the placeholder format
var componentHTML = component.outerHTML;
// Replace all instances of the placeholder with the component's HTML
while (content.includes(placeholder)) {
content = content.replace(placeholder, componentHTML);
}
});
// Update the rich text content with replaced components
richText.innerHTML = content;
});
</script>