Customer links in email invites using HTML and CSS

did you try to use link option under message text editor?

you can add your link inside of it and can add css under Advanced option.

dummy implementation:
 

Output:
 

try this and test it.

Thanks for your response Arun. Unfortunately, the email preview displays such customisations, but as soon as you send a preview/test email, the custom link disappears. 

Please check your implementation as I tested it and it’s working fine.

 

after click
 

Preview:

 

Email (TEST link missing entirely): 

 

Did you recall the updated message in your distribution? 

What do you mean? How do I recall the updated message? It was just a preview/test email.

I mean you should reselect the updated invite into your distribution. please try once in new survey distribution and see updated invite is working on new survey distribution’s preview. 

I did reselect it and previewed it before sending. 

I’ve gotten the TEST link to appear now. However, how do I link such links to the survey (personalised) and opt-out URLs?

do one thing:

add the below code in your invite message source format (highlighted in above screenshot). replace green color as per your choice and test it.

<style>
a:visited{
color:green;
}
</style>

Thanks. 

I had already tried the following to style unvisited links, but it doesn’t work.

 

a:link {
  color: #B19661;
}

a:link {
  color: #B19661;
}

by any chance you can show source text of your invite page?

<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans&amp;family=Sofia+Sans+Condensed:wght@800&amp;display=swap" rel="stylesheet" />
<style type="text/css">.page {
     background-color: #0b0b0b;
     padding: 10%;
   }

   body {
     font-family: "Sofia Sans", sans-serif;
   }

   .content-area {
     background-color: #F0EFF4;
     padding: 20px;    
   }

   .logo {
     max-width: 199px;
     margin-bottom: 15px;
   }
   footer {
     text-align: center;
   }
   a:link {
     color: #B19661;
   }
   .button {
     background-color: #B19661;
     border: none;
     color: black;
     padding: 10px 20px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     margin: 4px 2px;
     cursor: pointer;
     border-radius: 16px;
     font-weight: bold;
    }
</style>
<div class="page"><img alt="Brand X" class="logo" src="https://static.vecteezy.com/system/resources/previews/023/652/073/non_2x/fake-red-stamp-on-a-transparent-background-free-png.png" width="199" />
<div class="content-area">
<p>Dear ${m://FirstName}<br />
<br />
At BRAND X, we are continuously looking for ways to improve the experience that we offer our customers. However, we cannot do this alone.<br />
<br />
<span style="font-size:16px;"><strong>We need your help</strong></span><br />
<br />
This is how you can help us.<br />
<br />
As someone who has used Brand X, you ...<br />
<br />
<strong>${l://SurveyLink?d=TAKE OUR SURVEY}</strong><br />
<br />
Or copy and paste the URL below into your Internet browser:<br />
${l://SurveyURL}<br />
<br />
Your feedback will help us ...<br />
<br />
Your participation in this survey is ...</p>
</div>

<footer>
<p><span style="color:#ffffff;"><small>Follow the link to opt out of future emails:</small></span><br />
<span style="color:#B19661;"><small>${l://OptOutLink?d=Click here to unsubscribe}</small></span></p>
</footer>
</div>

Here’s the source code. I’ve masked the brand and some of the invitation text. You’ll notice that I’ve tried using inline CSS styling for the opt-out link too. 

Please ignore the .button CSS as this was from my earlier attempt to create a pill button for the survey link. 

 

I can see any anchor tag and a:visisted css in that code. I have edited your code and removed that “<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans&amp;family=Sofia+Sans+Condensed:wght@800&amp;display=swap" rel="stylesheet" />” .
 

added a:visited css and created anchor tag just after opt-out link.

<style type="text/css">.page {
     background-color: #0b0b0b;
     padding: 10%;
   }

   body {
     font-family: "Sofia Sans", sans-serif;
   }

   .content-area {
     background-color: #F0EFF4;
     padding: 20px;    
   }

   .logo {
     max-width: 199px;
     margin-bottom: 15px;
   }
   footer {
     text-align: center;
   }
   a:link {
     color: #B19661;
   }
   a:visited{
     color:#B19661;
   }
   .button {
     background-color: #B19661;
     border: none;
     color: black;
     padding: 10px 20px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     margin: 4px 2px;
     cursor: pointer;
     border-radius: 16px;
     font-weight: bold;
    }
</style>
<div class="page"><img alt="Brand X" class="logo" src="https://static.vecteezy.com/system/resources/previews/023/652/073/non_2x/fake-red-stamp-on-a-transparent-background-free-png.png" width="199" />
<div class="content-area">
<p>Dear ${m://FirstName}<br />
<br />
At BRAND X, we are continuously looking for ways to improve the experience that we offer our customers. However, we cannot do this alone.<br />
<br />
<span style="font-size:16px;"><strong>We need your help</strong></span><br />
<br />
This is how you can help us.<br />
<br />
As someone who has used Brand X, you ...<br />
<br />
<strong>${l://SurveyLink?d=TAKE OUR SURVEY}</strong><br />
<br />
Or copy and paste the URL below into your Internet browser:<br />
${l://SurveyURL}<br />
<br />
Your feedback will help us ...<br />
<br />
Your participation in this survey is ...</p>
</div>

<footer>
<p><span style="color:#ffffff;"><small>Follow the link to opt out of future emails:</small></span><br />
<span style="color:#B19661;"><small>${l://OptOutLink?d=Click here to unsubscribe}</small></span>&nbsp;<a href="http://www.google.com" style="color:red; font-size:20px" target="_blank">Test</a></p>
</footer>
</div>

Output: It’s working fine. even after click google page gets open and test link is still appearing in red color.

Hi,

Try this :

<a href="${l://OptOutURL}" style="color: #B19661;">Click here to unsubscribe</a>

I can see any anchor tag and a:visisted css in that code. I have edited your code and removed that “<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans&amp;family=Sofia+Sans+Condensed:wght@800&amp;display=swap" rel="stylesheet" />” .
 

added a:visited css and created anchor tag just after opt-out link.

<style type="text/css">.page {
     background-color: #0b0b0b;
     padding: 10%;
   }

   body {
     font-family: "Sofia Sans", sans-serif;
   }

   .content-area {
     background-color: #F0EFF4;
     padding: 20px;    
   }

   .logo {
     max-width: 199px;
     margin-bottom: 15px;
   }
   footer {
     text-align: center;
   }
   a:link {
     color: #B19661;
   }
   a:visited{
     color:#B19661;
   }
   .button {
     background-color: #B19661;
     border: none;
     color: black;
     padding: 10px 20px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     margin: 4px 2px;
     cursor: pointer;
     border-radius: 16px;
     font-weight: bold;
    }
</style>
<div class="page"><img alt="Brand X" class="logo" src="https://static.vecteezy.com/system/resources/previews/023/652/073/non_2x/fake-red-stamp-on-a-transparent-background-free-png.png" width="199" />
<div class="content-area">
<p>Dear ${m://FirstName}<br />
<br />
At BRAND X, we are continuously looking for ways to improve the experience that we offer our customers. However, we cannot do this alone.<br />
<br />
<span style="font-size:16px;"><strong>We need your help</strong></span><br />
<br />
This is how you can help us.<br />
<br />
As someone who has used Brand X, you ...<br />
<br />
<strong>${l://SurveyLink?d=TAKE OUR SURVEY}</strong><br />
<br />
Or copy and paste the URL below into your Internet browser:<br />
${l://SurveyURL}<br />
<br />
Your feedback will help us ...<br />
<br />
Your participation in this survey is ...</p>
</div>

<footer>
<p><span style="color:#ffffff;"><small>Follow the link to opt out of future emails:</small></span><br />
<span style="color:#B19661;"><small>${l://OptOutLink?d=Click here to unsubscribe}</small></span>&nbsp;<a href="http://www.google.com" style="color:red; font-size:20px" target="_blank">Test</a></p>
</footer>
</div>

 

Output: It’s working fine. even after click google page gets open and test link is still appearing in red color.

 

Thanks Arun. I’ve copied your code exactly as you have it into Qualtrics, but the links still remain blue. I don’t know whether it’s an issue with Gmail. 

 

Forsure, it's an issue of gmail. I'm testing it in outlook and it's working fine. As you can see my screenshot.

Thank you so much for all your help though. 

Have you perhaps ever created a pill button that works with the personalised survey links?

Pill button doesn’t work on email invite page. you can create box for anchor tag and customize css to look it like button. 

Hi Arun

Thanks for your suggestion.