How to add components in a Webflow rich text?

Tutorial
September 29, 2022
3 min
Custom Attribute Finsweet Powerful Rich Text
Key points

There are many different elements in Webflow to visually build web pages. Among them is the "Rich Text" element. Rich Text allows you to create "long" content on a page. This element is typically used for the content of a blog article, legal notices, biographies, and more.

The advantage of this element is that it allows you to add various elements inside it (headings, paragraphs, images, videos, links, etc.). Instead of using elements one by one, you can add a rich text to your page to create content.

The rich text element is very useful, especially for collections (blogs, teams, etc.) as it significantly reduces the number of fields required. However, rich text is not completely flexible. Customization options are quite limited, and not all existing Webflow elements (buttons, forms, sliders, etc.) can be used within it.

Nevertheless, Finsweet, with its custom attribute solutions, offers us the ability to add components (used on our site) into rich text to create a "powerful" rich text. Today, we will show you how to add custom components to your rich text.

In this tutorial, we will insert an image gallery into a rich text element.

For those interested, here is the official Finsweet documentation for Powerful Rich Text.

Step 1: Add a Script to Your Page

On the page containing the rich text where we want to add our component, you need to add the following code to the <!-- fs-richtext-ignore --><head> tag of your page. You can find this field in your page settings.

<!-- [Attributes by Finsweet] Powerful Rich Text -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-richtext@1/richtext.js"></script>
Finsweet powerful rich text script

Step 2: Manipulations on Rich Text

1. Add a Rich Text Element

If you haven't done so already, you'll need to add a rich text element to your page.

2. Custom Attribute on the Rich Text

Next, you’ll need to select your rich text element and assign it a custom attribute. To do this, click on the "settings" tab of the element and navigate to "Custom Attributes".

You will need to add the following attribute:

Name: fs-richtext-element
Value: rich-text
Rich text in Webflow

Step 3: Manipulations on the Component to Insert

After performing these steps on the rich text, you can select the component (it should be a div block) that you wish to insert into your rich text. In our case, we are selecting our gallery component. We will also add a custom attribute to it.

Name: fs-richtext-component
Value: custom-value

The value is defined by you. You can use any name you prefer. However, we recommend using a recognizable name for this value.

Image gallery Webflow

Step 4: Add the Component to the Rich Text

You will now return to your rich text element.

You need to add a new line (wherever you wish to insert your component) and add the following text:

{{custom-value}}.

The custom-value part must be replaced with the value you assigned to your component.

In our case, we will add {{gallery}}.

Custom component in rich text Webflow

Step 5: Publish Your Project

In the Webflow Designer, you won’t see your component appear immediately; you will need to publish your project to see it.

Photo gallery in rich text Webflow

BONUS: Retrieve a Component from Another Page

It is also possible to retrieve components that are on other pages besides the one where the rich text is located. To do this, the steps remain the same, but in your rich text, instead of {{custom-value}}, you will need to add {{custom-value="page-url"}}.

For example, if my component is located on the blog page, I would add {{custom-value="/blog"}} or {{custom-value="https://www.url.com/blog"}}.

And that's it for this tutorial, which will allow you to customize your rich text. To become an expert on Webflow, you can join our training or continue following our tutorials on the platform.

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations
Deepseek vs ChatGPT
News
AI

DeepSeek vs ChatGPT: The Comprehensive 2025 Comparison Shaking Up the AI Industry

DeepSeek vs ChatGPT: The Comprehensive 2025 Comparison Shaking Up the AI Industry

Want to turn your website into your most valuable asset?

Contact us today