Bugbit

How to use the email signature template

You'll need to download the template if you haven't already off the contact page .

Logo

You will need to host your own logo in some form on the internet. You should be able to access this from your browser by typing in the relevent URL.

I.e. https://bugbit.io/_email/logo-colour.png

Logos can be hosted on a trusty server if you have access to one and know what you're doing.

For the layman, you can pop your logo on Google Drive of all things, and generate a link to access the file. There's a short tutorial on how to do that here .

It is important for your logo to be hosted online, otherwise the people recieving your emails won't be able to see it.

Put in your details

Open up the signature.html file in your favourite editor. Ordinary everyday notepad is good enough if you happen to be on Windows.

Usually if you double click the file it will open in your browser, which will also come in handy to see your changes. You must refresh the page each time you make a change to view it.

If you have your logo URL ready you'll want to stick that right in - find the first image tag that looks like this:

You guessed it, you're replacing both the image src value with your logo URL. The alt value can be anything, but preferabley the name of your company so that it shows up when the image can't.

Next up is your name (Daniel Untiedt), position (Web Design & Development), and I have put my company name with a link to the website.

Also note there's a link that surrounds the logo we just put in, you might want to put the same link in both places, replace the href values with your website.

Social media links

This is a case of less is more in my opinion. I've given you five options to choose from, although I only include a Facebook icon in my own signature. People are easily overwhelmed by choice, so delete whichever icons you're not using (from the opening tag <a href=.. to closing </a> ) and replace the links for the ones you are.

Colour

I've used Bugbit purple in my signature which looks like this: #714FA6. This is called a hex code.

You can grab your own one from choosing a colour here .

You might want to colour the top border (first line) border-top: 2px solid #714FA6; by replacing the hex code with yours. As well as add colour to the website link if you fancy, which looks like this:

<a href="https://bugbit.io" style="color: # yourhexcode ">Your company</a>

Adding to your email client

This is where the magic happens, and may be a hard step depending on the mail client you use.

I can't give you much detail because there are hundreds or possibly thousands of email programs used, but luckily we have a listing of global knowledge available at your fingertips. Hop onto the Google and search for how to add an email signature to your specific program.

This link might help if you use Outlook.

Thank you for checking out this guide!

Again, you can find the template on my contact page:

Get template