1. Home
  2. Departments
  3. How to edit the email signature in HTML mode?

How to edit the email signature in HTML mode?

This post is also available in: Português

You can associate your custom HTML for a department. Then, edit the code and add the placeholders to be updated with the employee information.

In this quick tutorial with video support, we’ll do all the steps to paste, edit, and update email signatures from HTML code.

Many people refer to the term as an editor in HTML mode.

Navigate to the end to view the video tutorial.

Before you start

The HTML edit mode is perfect for experts who master HTML. Here are the considerations you should read before using the feature.

  • An email signature does not accept JavaScript;
  • The CSS code must be in inline mode, not embedded;
  • Only content within the HTML body tag is loaded;
  • Not all CSS properties are supported, details in Campaign Monitor or Mailchimp;

How do I get the HTML version of an email signature?

Creating an HTML signature from scratch can be too complex. In this way, there are some options for you to get a complete HTML code and make your edits advanced. And simple logic like “IF-ELSE”.

1. Download HTML signature from Bybrand

If you already have an email signature created at Bybrand, you can download the HTML and then make edits in the advanced mode in departments.

Bybrand – Signatures – Paste in email – Download.

Download HTML signature

2. Create one from scratch using an HTML editor

If you are a web designer, or if your company has a professional with these skills, you will probably want to use this option. Creating your own signature using an IDE like WebStorm, Notepad ++, or Sublime Text.

3. Buy a ready email signature

Some freelancers create personalized email signatures, and these ready-made templates can be found on Marketplaces like Fiverr and ThemeForest. So, copy the signature code and paste it into the HTML editor area.

Please note that we are unable to support third-party HTML.

Edit the HTML version of the signature

The tutorial steps start here.

Let’s assume that you already have a department created. Then remove the current signature from the department so that you can associate another one.

  • Departments – menu Signature – Remove.
Remove signature of the department

When removing, you will have the option to associate another email signature in the department.

Choose the HTML File option, as illustrated by the illustration below.

HTML mode

Click the Edit in code button to create a signature for the department with an HTML option.

Start typing your HTML code in the available text field.

Editor HTML mode area

When you’re ready, click Save.

It’s a good idea to set a name for the email signature, so you can refer to it later.

Option Code View

Optionally, you can create in Code View option, to see the rendered HTML.

Code View option
Code View option

In this part, you can also make simple editions, and change images from the gallery. You can also select text to point in the HTML to where it is located.

  • Perform simple editing on the signature;
  • Change images and icons;
  • Find text inside the HTML;


If your HTML does not contain the department placeholders, the email signature will not automatically update with each employee’s information when you click to view the signature on the Employees tab.

In this way, you need to add placeholders. To help, we’ve listed the fields in the option.

Placeholders list

You can do a test using the example above, with two simple lines of HTML. You will notice that each employee’s information is updated with each interaction.

<p>phone: {{position}}</p>

Consider that your department has the name and position placeholders.

Note: The option to Save changes is enabled only when you view the code. (Clicking in the View Code mode)

Quick video tutorial:

This video tutorial shows how to add placeholders to a signature in HTML mode.

Removing the signature with own HTML

Bybrand saves signatures in HTML mode that are associated with a department. And these can be viewed in the Signatures section, by accessing the Own HTML menu.

Video tutorial

As agreed, here is the complete video tutorial of all the steps.

Updated on 26 de September de 2023

Was this article helpful?

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support