Using Webflow Components / Symbols inside CMS Posts

Using Webflow Components / Symbols inside CMS Posts

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.

This screenshot shows the location of Custom Attributes in Webflow

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:

Webflow CMS editor showing where the component identifers are entered

Here is my components page with two components on it that will be used inside the blog post:

Webflow components page where my components are placed to load them into a CMS post

And here is my blog post where the components have been loaded onto the page:

My Webflow blog post page showing my components 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

  1. The page is loaded first, including the identifier text.
  2. 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:

https://github.com/ruairimcn/webflow-components-in-cms

Want To Work With Us?

Tell us about your business and we'll come up with a plan to help you grow!

Book Free Consultation

Related Posts