Adding Custom HTML code to the signature uncovers a whole lot of new possibilities. Some of the best use cases are:

  • Add a second banner image to the bottom of the signature.

  • Include award badges¬†

  • Request to rate your service¬†

There are much more ideas, but let us focus on these three to understand the whole idea, and we are sure you will be able to apply the same method to other ideas you may have. There will be a few coding things here, so be ready :)

All the code mentioned below has to be placed to the "Additional Text" signature application that you can find in the signature generator here:

Signature apps > Show More > Business > Additional Text

  1. Second banner:

    To add a second banner image, all you would have to do is to host an image anywhere on the web and get a direct URL to the image. For example:

    Now we need to include the link into the line of HTML code. Here is how to add an image with HTML code:
    <img src="Your_Image_URL"/>

    For example:
    <img src="">

    You can also set the size of the image for it to meet your design requirements:
    <img src="" width="300" />

    It is also possible to add hyperlink to the image. Here is how to add hyperlink:
    <a href="Hyperlink_URL" target="_blank"><img src="Your_Image_URL" width="300" /></a>

    For example:
    <a href="" target="_blank"><img src="" width="300" /></a>

    Use case:

  1. Include multiple images on one line (awards, badges, etc.)

    This approach has multiple use cases:
    - You can include multiple badges or awards to the bottom of your signature and link them to the awards page.
    - Request to rate your services by adding "stars" or "emoji" images.

    You will have to use the same approach from the first paragraph for this approach as well. The only difference is that you will have multiple images added by a code. So we take the example of the hyperlinked image from the previous paragraph and combine them into one section with <p> tag.

    All you have to do is to replace "dummy" URLs with yours and modify the "margin-left" parameter to increase or decrease the margin between the images and the "width" parameter to increase or decrease image sizes.

    Three images example:
    <p><a href="Hyperlink_URL" target="_blank"><img src="Your_Image_URL" width="100" /></a><a href="Hyperlink_URL" target="_blank"><img style="; margin-left: 10px;" src="Your_Image_URL" width="100" /></a><a href="Hyperlink_URL" target="_blank"><img style="margin-left: 10px;" src="Your_Image_URL" width="100" /></a></p>

    Use case:

In case you need any help setting up a custom HTML code, you can reach our live chat support any time or use free HTML generators available online ;)

Thank you for your time!

Did this answer your question?