Insert custom components

Insert a custom component into one more emails.

After you create your custom component, you can insert it into one or more emails then style it as you see fit.

Open your email, go to the Code editor, then add your component's tag, which follows this format: <component-name></component-name>.

Set properties

You can add style attributes in the code editor.

Set properties in the visual editor

You can set properties in the visual editor, without touching code.

In the visual editor, the pencil icon beside the component "my paragraph" has been clicked. A pop-up menu appears over the canvas with a list of three properties: color, size and align. The user has clicked "Show all properties" which reveals a right-hand panel of all properties grouped under "Text".
In the visual editor, a pop-up menu and right-hand panel show a list of properties.

On the main properties menu, you'll also see the properties broken down by type. In our example, we have one type, Text visible at the top.

Set properties in the code editor

You can add properties directly to the component using attributes.

<my-paragraph color="red" text-align="center" #set:font-size="18">
	This is a styled paragraph
</my-paragraph>

Note how font-size is set using #set:. This prefix is needed on certain properties depending on the schema settings used. Use #set: to pass in a value that’s not a string, like a number or boolean. The shorthand is just a colon: :font-size=“18”.

Previous ArticleNext Article