Embed content through components

Is this page helpful?

Embed content through components

Is this page helpful?

Martina Farkasova

6 minutes

Components

Download PDF

Supercharge your content beyond just text and images. Use linked content items and embedded components to seamlessly integrate external content into your rich text.Discover how to embed diverse content like tweets, videos, code snippets, or customer testimonials. Enhance your content, engage your audience!

Insert tweets or code samples into content

Embedding content inside rich text involves defining the structure of your content and then providing specific content based on that structure. See how it all works with the example of tweets inside articles.

Create a content type for the tweet

The first step is to create a content type that will define the basic elements of the tweet.

In Content model, click Create new.
In Content type name, type Tweet.
Add a Text element for the tweet link.
1. Name it Link.
2. Make it required.
Click Add a new content group.
1. Name it Display options.
2. Click Add content group.
Add a Multiple choice element for the options.
1. Add two options named Hide thread and Hide media.
2. Skip selecting Limit to a single choice to set the options as checkboxes.
(Optional) Add another Multiple choice element for selecting a theme.
1. Add two options named Dark and Light.
2. Select Limit to a single choice to set the options as a drop-down.
Click Save changes.

The finished Tweet content type can look similar to what you see below.

Insert a tweet

Once you have the tweet defined, you can insert it as a component in a rich text element of an article, for example.

Go to Content & assets.
Using the filters on the left, select the Article content type to view only articles.
Open an article for editing.
In a rich text element, place the cursor where you want to add the tweet.
In the editor toolbar, click and then .
Choose Tweet from the list of types.
Fill in the elements.

You now have a tweet that exists only within the article as a component.

After you finish, you can continue editing the article. Changes made to the tweet are saved automatically.

This is what the final result can look like in your app:

Insert tweets or code samples into content

Embedding content inside rich text involves defining the structure of your content and then providing specific content based on that structure. See how it all works with the example of tweets inside articles.

Create a content type for the tweet

The first step is to create a content type that will define the basic elements of the tweet.

In Content model, click Create new.
In Content type name, type Tweet.
Add a Text element for the tweet link.
1. Name it Link.
2. Make it required.
Click Add a new content group.
1. Name it Display options.
2. Click Add content group.
Add a Multiple choice element for the options.
1. Add two options named Hide thread and Hide media.
2. Skip selecting Limit to a single choice to set the options as checkboxes.
(Optional) Add another Multiple choice element for selecting a theme.
1. Add two options named Dark and Light.
2. Select Limit to a single choice to set the options as a drop-down.
Click Save changes.

The finished Tweet content type can look similar to what you see below.

Insert a tweet

Once you have the tweet defined, you can insert it as a component in a rich text element of an article, for example.

Go to Content & assets.
Using the filters on the left, select the Article content type to view only articles.
Open an article for editing.
In a rich text element, place the cursor where you want to add the tweet.
In the editor toolbar, click and then .
Choose Tweet from the list of types.
Fill in the elements.

You now have a tweet that exists only within the article as a component.

After you finish, you can continue editing the article. Changes made to the tweet are saved automatically.

This is what the final result can look like in your app:

A tweet embedded in the article on a website.

Tweet content type with elements structured in the Link and Display options content groups.

A Tweet component inserted to a rich text element.

Sign in

Explore your path to mastery

Create single-use content with embedded components that serve the needed purpose.
Structure your content with a focus on messaging and reusability with embedded components.

Other use casesThe principle is the same for other types of content. If you were to embed code samples, for instance, you would add a text element for the code itself and an option to select a programming language to enable proper language-specific syntax highlighting.

From single-use to re-useIf you later find another use for the content in your component, you can always convert it to a content item by clicking

. This conversion cannot be undone. If done by accident, archive the new item and create your component again.

Insert tweets or code samples into content