"true professionals" 
Two of Webflow's most powerful features are the CMS and components (previously called symbols).
But these two features don't work well together - it's not possible to natively add components into the body of a CMS post with Webflow.
In this short guide I'll show you how to easily do this using a few lines of jQuery. There is also a video tutorial at the end of this post.
Setting up our components
We can use any new or existing components from our Webflow project - they just need to have a unique custom attribute that we can use to select them using jQuery.
We will need to create a page and add the components we want to use to this page, as we will be specifying one page to load our components form.
Just make a new page in Webflow and drag your components on to it.
Then give each one a custom attribute. This is done at the bottom of the Elements Setting window, shown below. Enter any name and value, as long as the value is unique. I give all components the same attribute name for consistency.
Creating the jQuery code
You will need to enter the below code onto the CMS post templates that you want to use this feature on. E.G. if you want to use components inside your 'Blog Posts', enter this code onto your 'Blog Posts Template'.
Header code:
Enter the below code into the "Inside <head> tag" of your page's custom code:
<script>document.write('<styletype="text/css">body{display:none}</style>');</script>
Body code:
You'll need to customise the code that goes into the "Before </body> tag" section based on the components you want to use.
Here is the code:
<script>
$( document ).ready(function() {
//Component NAME
$("p:contains([unique-component-1])").load('https:// []' );
// Component NAME
$("p:contains([unique-component-2])").load('https:// []' );
// Component NAME
$("p:contains([unique-component-3])").load('https:// []', function() {$('body').css('display','block'); });});
</script>
The code here is set up to work with three different components.
We need to update three parts of each block of code:
("p:contains([unique-component-1]")
Change the text inside the brackets to a unique name that will identify each of your components. This is what you will enter into the post body of a CMS post to load in the component. In this case you would paste
[unique-component-1}
into the body of a post to load in the relevant component.
.load('https:// .' )
Enter in the URL of the new page you created to load your components from.
Then enter the name and value of the custom attribute that you have your component. Here is the finished example. "Symbol' is the attribute name, "cta-button-contact-me" is the attribute value.
$("p:contains([cta-1-contact-button])").load('https://rmcn-tutorials.webflow.io/symbols [symbol=cta-button-contact-me]' );
You'll notice that the final bloc of code has a function at the end of it:
function() {$('body').css('display','block'); })
It is important that this included just once in the very last component code block that you are using. If you only use one component, make sure it uses this code. If you use more than one, make sure it is only present on the last one. I'll explain what this does at the end.
Here is how my </body> code looks:
<script>
$( document ).ready(function() {
// Symbol 1 - CTA contact button
$("p:contains([cta-1-contact-button])").load('https://rmcn-tutorials.webflow.io/symbols [symbol=cta-button-contact-me]'
);
// Symbol 2 - CTA section
$("p:contains([cta-2-section])").load('https://rmcn-tutorials.webflow.io/symbols [symbol=contact-me]', function() {
$('body').css('display','block');
});
});
</script>
Once you have added the above code to the "Inside <head> tag" and "Before </body> tag" of your page's custom code, you are ready to load your components into your CMS posts.
Adding components to CMS posts
All you need to do now is enter the unique identifier for each component, inside of [], in the post body of any CMS post.
Here's a screenshot of one of my blog posts with two identifiers in it:
Here is my components page with two components on it that will be used inside the blog post:
And here is my blog post where the components have been loaded onto the page:
And that's it! Each time you want to use a new component in your CMS posts, just add in a new code block and edit it to target the new symbol. Make sure to update the code on your page's settings, and make sure the last block of code contains the 'display: block' function.
Letting your clients use this
If you are setting this up for a client to use, I recommend providing them with a document that lists all available component identifiers, with a screenshot of each component. Or, add the component identifiers above each component as a paragraph on your component page, and give this to your client. They can then make use of components in their CMS posts without having to go near any code.
Limitations of this system
Adding components to your page in this way has two disadvantages:
1: It's not ideal for SEO. Google can read the content of your components for SEO purposes, but it prefers reading HTML directly and not HTML added via Javascript. The solution here is to try and use this for content that is not important for SEO, such as call to actions.
2: It's not ideal for speed. Adding components to CMS posts in this way will affect the speed of your website. It's a pretty negligible effect when used on a handful of components and shouldn't be noticeable. I wouldn't use it for a large amount of components on one page, say more than 10, especially if the components have multiple images in them.
How the code works
The code works by selecting a paragraph to replace with component, which is what the unique identifier is used for:
$("p:contains([cta-2-section])")
We then use jQuery's .load function to grab the code that we want to replace the paragraph with, by providing it with the custom attribute of the component and the URL of the page it is on:
.load('https://rmcn-tutorials.webflow.io/symbols[symbol=contact-me]'
);
Preventing content flashes
The .load code on its own leaves us with an issue: visitors will very briefly see the identifier text on the page before it is replaced with the component. This is because
- The page is loaded first, including the identifier text.
- jQuery then replaces the identifier text with the component.
This doesn't look great, but the above guide has a solution built in:
The code you entered into the header causes the entire page body to be hidden:
<script>document.write('<styletype="text/css">body{display:none}</style>');</script>
Then, the last code block in the </body> section of code has a function that unhides the body:
$("p:contains([cta-2-section])").load('https://rmcn-tutorials.webflow.io/symbols [symbol=contact-me]', function() {
$('body').css('display','block');
});
This way, the identifier text is replaced with the component before the page is shown, stopping the content flash. This is done so quickly that it isn't noticable on a page with a couple of components in use.
And that's all
You can now use two of Webflow's most powerful features together: components and the CMS.
If you would like help implementing this system, contact us below to arrange a free consultation call with us.
Video tutorial and code
Here is our video tutorial going through the entire process:
And here is the link to the GitHub repo to copy the code:
