How to add an attribute:

close icon
Hey! Give us some feedback here.
Visual

Powerful Rich Text

Add HTML to Rich Text elements, add components from the same page or from different pages, add classes, ids, attributes, and more.

5,189,501

loads per month

Powerful Rich Text
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
RICH TEXT
I want this
richtext icon

Rich Text

element to be the Powerful Rich Text
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-richtext-element
copy icon
Value
rich-text
copy icon
Check live example here
This attribute allows you to add HTML directly to text in your Rich Text Block element.

Add components from the same page, or from other pages in your site, inside a Rich Text Block element.

Full documentation for HTML and component use below.

This HTML in Designer, Editor, or CMS

Using HTML in a Rich Text Block

You can write any valid HTML like:

<span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>

And it will be parsed and rendered.

Additionally, you can disable an entire line from being parsed by adding <!-- fs-richtext-ignore --> at the beginning of it:

<!-- fs-richtext-ignore --> <span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>

Publishes as this

Using HTML in a Rich Text Block

You can write any valid HTML like:

<span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>

And it will be parsed and rendered.

Additionally, you can disable an entire line from being parsed by adding <!-- fs-richtext-ignore --> at the beginning of it:

<!-- fs-richtext-ignore --> <span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>

This {{COMPONENT}} in Designer, Editor, or CMS

Using components in a Rich Text Block

Components are defined with fs-richtext-component="COMPONENT_IDENTIFIER".

Once this is done, you can use them like:

On-page components

Components that are present in the same page can be used as:

{{COMPONENT_IDENTIFIER}}

External-page components

Components that are published on an external page can be used as:

{{COMPONENT_IDENTIFIER="/about"}}

or

{{COMPONENT_IDENTIFIER="https://url.com/about"}}

Example:

Cool Component:

{{cool-component}}

External Footer Component:

{{footer-component="/attributes/directory"}}

Publishes as this

Using components in a Rich Text Block

Components are defined with fs-richtext-component="COMPONENT_IDENTIFIER".

Once this is done, you can use them like:

On-page components

Components that are present in the same page can be used as:

{{COMPONENT_IDENTIFIER}}

External-page components

Components that are published on an external page can be used as:

{{COMPONENT_IDENTIFIER="/RELATIVE_URL"}}

or

{{COMPONENT_IDENTIFIER="https://ABSOLUTE_URL"}}

Example:

Cool Component:

{{cool-component}}

External Footer Component:

{{footer-component="/attributes/directory"}}

Does this influence SEO?

The HTML that the users write in the Rich Text is rendered on the pages as Escaped HTML.

This means, that this:

<span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>

Is read exactly like that by Google, including the tags and attributes, instead of just:


This is a cool custom HTML string.

Which is how usually Google would read it.

Can this affect SEO? It might, if used a lot (by a lot I mean that a big portion of the articles are written like this), BUT:


Google is smart enough to run Javascript and scan how the sites look like after JS has finished mutating the pages.

This means that, at some point, Google would identify the text as the correct version instead of the Escaped HTML one.

If it's used in small portions (like just a bunch of lines, maybe a few components, etc), it's negligible and does not influence SEO.

navigator arrow
COMPONENT IDENTIFIER
I want to add this
div block icon

Component (any element)

inside the Rich Text
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-richtext-component
copy icon
Value
COMPONENT_IDENTIFIER
copy icon
Add this attribute to a component that you want to add to Rich Text.

Use an IDENTIFIER that clearly identifies what this component is.

For example, using a IDENTIFIER of "subscribe-form". Inside your Rich Text, add the {{subscribe-form}} tag to add the component.

Please use lowercase with a dash like this: special-component
navigator arrow
Option
RESET INTERACTIONS
I want to reset Webflow Interactions
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-richtext-resetix
copy icon
Value
true
copy icon
Resets Webflow Interactions.

This may be needed in your {{component}} has Webflow Interactions applied to it.

After the component is added to the Rich Text Block, Interactions will be reset to assure the component has working interactions.
navigator arrow
Option
SANITIZE
I want to sanitize all HTML before it is rendered on the page.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-richtext-sanitize
copy icon
Value
true
copy icon
What is sanitizing?
To sanitize data is to remove any potentially dangerous parts of it.

If the content in your Rich Text Block comes from a third party source (it's not 100% trusted), it is highly recommended to sanitize it to prevent XSS attacks.

If a Rich Text Block element receives a fs-richtext-sanitize="true" attribute, code containing Javascript like:<svg>/onload=alert(2)//<p>ill be stripped of the javascript like: <svg><g></g></svg>.

Working examples

See this solution working live in this Webflow project.

Example 1
Powerful Richtext

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

<span style="color: red;">This is a cool custom HTML string.</span>

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

{{cool-component}}

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Your new toolkit in Webflow
A suite of F'in sweet tools to improve your Webflow development experience.
Download now
Ad inside the Rich Text
Copy and paste this example directly on Webflow
locked icon
Coming soon

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.