Components

Create and manage reusable email and PDF components such as headers, footers, banners, social blocks, and attachments to standardize content across templates.

The Components feature allows you to build modular, reusable elements such as headers and footers.

By creating these components once, you can easily add them into any email you create, saving time and effort.

How to create a component (except PDF)

From the left navigation menu, locate Components.

Click 'Components' and it opens up the Components page.

Click 'Create'. You will see a popup as shown below

Give a unique name for your component and choose a component type. In this example, I am creating a Header component called 'On-Boarding'

We support 6 different type of components now.

Header
Footer
Banner
Socials (Any social media icons like Twitter, LinkedIn, FB etc)
Paragraph
PDF

Once you click 'Submit', it opens the Email editor options. You can choose either 'Stripo' or 'HTML Editor'.

To create a Header, you can drag & drop Image block into the editor and brand logo.

The header will look as shown below.

Click 'Save' to create a test version of the component or click 'Go live' to create a live version.

Once a component is successfully created, you can access it in Components page.

How to use a Header Component in Email template

For example, to add a Header in email editor, you need to follow the below steps.

Drag and drop a structure into the email editor. Since its Header, make sure the block is at the top of the editor.

Drag and drop a text block into the email editor

In the text block, copy the component you have created from the Components section below the placeholders.

Paste the component in the text block you have added as shown below.

You can click Preview to see how the Header looks.

Similarly you can add any components like Footer, Socials, Banner, Paragraphs etc.

You can also use our Handlebars to add components based on any condition. For example, if you want to add a Header based on a brand name (as every brand will have its own logo), then you can add a condition to check brand name and add Header based on that.

In the below example, if the brand equals Myntra, it will add the Header , 'On-Boarding' otherwise it will add the default Fyno Header.

How to create a PDF component

The No-Code PDF Editor is the recommended option for creating new PDF components. Choose the HTML Editor only if you already have an existing HTML template that you want to reuse.

Click Components to open the Components page.

Click Create. A pop-up appears as shown below.

Enter a unique name for your component and select PDF as the component type.

We support six different component types:

Header
Footer
Banner
Socials (social media icons such as Twitter, LinkedIn, Facebook, etc.)
Paragraph
PDF

Click Submit, then choose one of the following editors:

No-Code PDF Editor (Recommended) – Create and format your PDF using the visual editor without writing HTML.
HTML Editor – Use this option only if you already have an existing HTML template that you want to reuse.

If you select the No-Code PDF Editor:

Create and format your content using the rich text editor.
Add images, tables, horizontal rules, multi-column layouts, page breaks, and hyperlinks.
Insert dynamic values using Placeholders, Handlebars, and System Variables.

If you select the HTML Editor: The HTML editor opens as shown below. You can copy and paste your HTML code into the editor to create the PDF component.

Configure the PDF using the following settings:

File Name – Uses the component name by default. You can provide a custom file name or use a placeholder.
Layout – Choose Portrait or Landscape. Portrait is the default.
Paper Size – Select the required paper size. A4 is the default.
Margins – Configure the required page margins.
Protect with Password – Enable password protection. You can enter a password manually or use a placeholder.

How to use a PDF Component in Email template

For example, to add a PDF component in email editor, you need to follow the below steps.

Click the attachment icon which will show the options as shown below

Click 'Select from component' option.

Select a pdf component from the dropdown.You can add more pdf files by clicking 'Add files'.

You can override the filename by selecting the checkbox. Enter a filename manually or add a placeholder.

Once you have added all the attachments, you will see it as shown below in Email editor.

How to use a PDF Component in WhatsApp template

You can use a PDF Component in WhatsApp template in 2 ways

as a Document file in the Header
as part of the website CTA button

How to use a PDF Component as Header in WhatsApp template

From left nav, go to a WhatsApp template (Templates -> Fyno) .
Copy the component you want to add from the Components section in the navigation.
Paste the value in the Header textbox. It will be added as {{Component '<Component_name>'}}
The added component will look as shown below.

How to use a PDF Component as part of website CTA button

Things to be done in WhatsApp External Template

In the external template, make sure to add a website button
Enable Dynamic URL toggle.
Enable Track URL check box.

Things to be done in Fyno Template

From left nav, go to a WhatsApp template (Templates -> Fyno) .
Copy the component you want to add from the Components section in the navigation.
Paste the value in the button textbox. It will be added as {{Component '<Component_name>'}}
The added component will look as shown below.

How to use a PDF Component in SMS template

From left nav, go to a WhatsApp template (Templates -> Fyno) .
Copy the component you want to add from the Components section in the navigation.
Paste the value in any of the placeholders. It will be added as {{Component '<Component_name>'}} as shown below.
Fyno will automatically shorten the URL of the PDF component added and send it in SMS.

How to copy components to another workspace

Reusable components can also be copied between workspaces that you own.

Prerequisite: You must have the Owner role in the destination workspace.

Before you copy

Independent Copying: Components are copied independently of templates.
Dependencies: If a template depends on reusable components, make sure to copy the required components before copying the template itself.

Steps to copy components to another workspace

Open the source workspace.

Go to Templates → Fyno.

Click Components in the page header.

Click the three-dot (⋮) menu on the component you want to copy.

Select Copy to another workspace.

Select one or more components to copy.

Click Copy Selected Components.

Select up to five destination workspaces where you have the Owner role.

Click Confirm.

The copied components will now be available in the selected destination workspaces.

Component versioning

Component versioning follows the same behavior as template versioning:

New Components: If the component does not exist in the destination workspace, it is created as v1 (Test).
Existing Components: If the component already exists, a new standalone version (for example, v2) is created without affecting existing versions. You can later save it as the new Test version or promote it to Live when you are ready.

How to raise Approval requests

If your workspace has maker-checker workflow enabled for Components, the ‘Go Live’ action requires an additional approval step. You’ll need to choose from your designated approvers who will review and authorize the component related changes. You can read more about it here