# How to add components in a Webflow rich text?

Tutorial3 minPublished on Sep 29, 2022Updated on ![Custom Attribute Finsweet Powerful Rich Text](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67126b85504e334aca0434db_64760069e93084646c9eec5a_6335ae1140133a7d6d5c8dff_Open-Graph-webflow-attribute-powerful-rich-text.webp)Table of contents

[

Copied](#)[

](#)[

](#)[

](#)
- [H2 Example](#)

Use AI to summarize this article[

ChatGPT](#)[

Claude](#)[

Grok](#)[

Perplexity](#)[

Google AI](#)Key pointsThere 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](https://www.finsweet.com/attributes/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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67126b87504e334aca0437f7_64760069e93084646c9eec5f_6335ae754178061bb331740f_script-powerful-rich-text.webp)

## 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67126b87504e334aca0437c7_64760069e93084646c9eec62_6335ae62777f93c024931798_rich-text-webflow.webp)

## 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b5294fb295ee62019af20_64760069e93084646c9eec63_6335ae5a44ae977104f4b867_galerie-attribut-personnalise%2525CC%252581.webp)

## 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b5294fb295ee62019af27_64760069e93084646c9eec61_6335ae4b94a52ea27529bb97_rich-text-attribut-personnalise%2525CC%252581.webp)

## 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671b5294fb295ee62019af24_64760069e93084646c9eec64_6335ae3f2d17c2329b0151d7_composant-galerie-dans-rich-text-webflow.webp)

## 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](https://academie.digidop.fr/), you can join our training or continue following our tutorials on the platform.

[

](#)![Thibaut Legrand](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a47ec4cabceb0d6aa7c2e_thibaut-website%20(1).webp)Thibaut LegrandCofounder at Vydera & Technical Solutions Architect[

](/team/thibaut-legrand)[

](https://www.linkedin.com/in/thibaut-legrand-digidop/)[

](https://twitter.com/lgd_thibaut)+1200 readers

## Stay ahead of the curve!
Subscribe now for expert insights.

[Subscribe

](https://digidop.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Preview Newsletter

](https://digidop.substack.com/)

## Suggested articles

![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab922fa556f97c19ea7db9a_Best%20B2B%20SaaS%20Agencies%20in%202026_EN.webp)DocumentationAll blog post

### Top 20 Web & Digital Agencies for B2B SaaS in 2026

[Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026![Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDevelopmentAll blog post

### Webflow launches Source. Our take on this shift.

[Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.![Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationAIAll blog post

### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers

[Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles

](/blog)Every great website  
starts with a conversation[Talk to an expert

](/contact)[Book a call

](/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)