How to Add Hyper- and Anchor Links in Emails with Stripo

The value of links in emails cannot be overrated.
They navigate recipients within email if it’s long, they take recipients from our emails to necessary pages on our website, including the checkout page, to necessary videos on Youtube, etc.

This all makes links useful for our recipients due to easier navigation, which has a positive impact on CTR.

Links also enable us to track recipients activities inside an email and measure the effectiveness of a particular email campaign.

Types of links in emails

Hyperlinks for files and buttons

A hyperlink in emails, also known as a link, takes us from a website to another one or take us between pages within one site, or to specific images and other media files.

According to the statistics by eSputnik, the ESP we use, an average promotional newsletter contains 20 hyperlinks. Do you think this is way too many? Not at all. In fact, all the menu tabs, every single image, every single CTA button used in a message should have a link.

Look at the click map of our Valentine’s newsletter, provided by our ESP:

(real statistics, but the real email content was replaced with the made up one)

26% of subscribers clicked on the banner. The same amount of people clicked our CTA button.

Note: a CTA button is just a beautifully designed hyperlink in an email.

An average click map shows that the share of clicks on logo is about 17%; the share of clicks on the social media icons and contact information is 4 %. And about 20-60% of recipients click on banners and other product content modules.

Still, why would you add so many hyperlinks in emails, and why would you add them to every image you are about to use? Some clients click everything they see and like in the email. For that reason, it’s advisable to make as many clickable details in your email as possible.

Where should the hyperlinks take us to? Directly to the proper pages of your website, be it a registration page or any other one.

Hyperlinks for copy in emails

We need to add copy in the email body: both for promo and trigger campaigns. It’s easy to add hyperlinks to text in an email. No knowledge of codes, no HTML skills required here. Easy-peasy!

In order to make links in copy eye-catchy, it should contain 3+ words, start it with the keywords and be descriptive.

Anchor links

Anchor links in emails are meant to take readers to specific paragraphs within the email. By using anchor links in email newsletters, you let recipients skip some parts of emails to get directly to the necessary ones without scrolling on and on. When your email is long enough, make sure to insert anchor links — and your customers will appreciate it.

How to add a link in email with Stripo

So where do we add links in emails? This all depends directly on the aim your newsletters perform. But the most general ones are added to each and every image, the menu tabs, our contact information, our social nets accounts, survey invitations, videos, and even to the maps.

Adding a hyperlink to your video

In one of the previous articles, we showed how to add links to videos in emails with Stripo.

For your convenience, in a nutshell, I’ll duplicate it here.

How to add a hyperlink to your video with Stripo

• Drag a 1-column structure in your email template;

• Drag a basic video block in it;

• Double-click it in your template to activate the settings panel;

• In the setting panel insert your link to the video on Youtube or Vimeo;

• Our editor will automatically retrieve and insert in respective fields the following information:
  1. thumbnail image;
  2. Alt text;
  3. The “play” button.

Your email video is ready to go!

Adding links to the contact information

Perfect email footer contains our contact information. And if our subscribers have some questions, they would love to connect with us via email.

But this is not the best idea to make them highlight our email address, copy it and then go to their email box and compose a message there. It will be much easier if you insert a link ” :mailto “. This feature enables your customers to start writing emails with just one click.

How to add links to contact information with Stripo:

• add a new structure to your email;

• insert the “text” blocks into this structure;

• enter your text. I entered “Contact us”;

• select “:Mailto”;

• insert a specific email address.​​​​​

I love this option as every day I need to write dozens/hundreds of messages. And this feature saves me lots of time. I just click the button, and the email draft with a correct address is started:

Note: this feature is optional for promotional emails, yet it’s advisable for trigger emails.

Important to note:

The :mailto link doesn’t work in Outlook.mail and on IOS, yet in Gmail, on Windows OS and on Android devices is opened correctly.

Adding links to social media icons

Where to locate your social media contact information it is totally at your discretion. Yet, they are definitely to be in emails. Some brands add them in menu, the vast majority of brands put in footer.

How to add links to social media icons with Stripo:

• drag the 1-column structure in your template;

• drag in the “Social” block in your template;

• double click it to activate the settings panel;

• insert links to respective social media accounts;

• click “More” to enter alt text;

• done.

If you want to change a color scheme for your social icons, or if you want to add other icons, please find the details on how to do it in this blog post.

Important to note:

You don’t have to do this big amount of work every time when creating a new email. You just need to save the contact block/footer to your personal content library. And whenever you decide to make a new template again – you will only have to pull this block into your template. Done.

See how to insert social media icons in your email footer.

Adding links to CTA buttons

CTA buttons should not be boring — make them colorful and bright. They can be of any shape you like. You can also apply the hover effect (CSS-animation) to your buttons with Stripo.

How to add links to CTA buttons with Stripo:

• Put the “Button” block exactly where you need it in the email;

• Give it a name;

• Set text color;

• Set text font and size;

• Set the button color — this is the basic button color;

• To apply CSS-animation to your button, set the highlight button color — by default, it inherits the basic button color. If you do not want to apply CSS-animation, just don’t make any changes to the “highlighted button color” field;

• Insert the link;

• Done!

For more information, on how to design buttons, please read this blog post.

Adding links to menu tabs

Menus typically help us take our recipients from emails to a website.

Hence, you need to insert matching links.

How to add links to menu tabs with Stripo:

• Drag in a 1- or 2-column structure in our email;

• Drag in the Menu block;

• Select the menu type — links (the most common one), icons, or links and icons;

• Double click it to activate the settings panel for future work with this element;

• You will either need to name your menu tabs or insert images — depends on the chosen menu type. FYI: In the settings panel, the menu tabs are called “Items”;

• Insert respective links in the “links” fields.

Please, find more details on the menu in emails here.

Adding anchor links in emails

As we’ve previously said, when your emails get too long, it’s better to insert anchor links as they help us navigate our recipients across the email and take them directly to the section they are highly interested in, without the necessity to scroll on and on.

Please, take a look at our example of anchor links in email:

How to add anchor links in emails with Stripo

Stripo currently offers two similar ways of adding anchor links in emails.

Way 1

• build the navigation menu bar in an email header;

• put the HTML block in your email exactly above the section where you want to take your recipients to, once they click the respective menu tab;

• double click this block in your email to open the HTML code editor;

• in the code editor, replace the existing line with this code element:

<a name=“yourlabel”></a>

Where “yourlabel” stands for the name of the paragraph you are going to connect the anchor link with. In my example, it is “music”. You, in fact, can call it whatever you want, but please do not insert any “spaces” or any service characters in it — just one single word in the quotes;

• now in order to link this paragraph with the respective menu tab, we need to double click the respective menu item in email header;

• once the menu gets highlighted/active (as shown below), open the code editor by clicking the “code editor” button (we do it to work directly with this particular part of the email):

• in the code editor, after the “href=” tag where normally we add hyperlinks, you need to insert this element “#yourlabel”. The code element I inserted after the “href=” tag looked like this “#music”

• you need to do the same to all menu tabs to anchor them with respective email elements.

It is necessary to include the hashtag “ # “ after the “href=” tag, correct “label” that you used for your anchor. All other tags, like closing </a> Stripo will add on its own.

Way 2

When your email is finished, you need to:

• find the place you need to direct users to when they click the anchor link;
• double click this element to activate it;
• open code editor (as shown above);
• paste this code sample <a name="yourlabel"></a> into the code of the necessary element. "Yourlabel" stands for the name of the necessary section;

• now go to the menu tab that is supposed to direct users to the aforementioned section;
• click it in the template for activating;
• in the settings panel, change the link type from "site" to "other". We do it to prevent any ESP from adding the "https://" element to the email code;

• insert the name of the section preceded by a hashtag. In our case, it is #yourlabel ;

• done!

Here's the list of email clients that support anchor links in emails:

Important:

Anchor links do not work in AMP HTML emails because AMP code validator does not allow " # " , " name " in the tag <a>.

Final thoughts

Links are an integral part of every email newsletter, as they navigate our recipients and help us track users’ activity. And we showed how to add them to various email elements.

But please be advised that you cannot test the links while working with the editor. You need to send a test email for this purpose.

May your recipients be always satisfied with the newsletters you send out, may they click the links your emails contain. Our unique technical features and orderly-structured email templates will facilitate this process for you.

If you have any questions or concerns, please email us at contact@stripo.email or leave a comment below.
I sincerely wish you all the best!