Quriobot AcademyEmail template to use in Response Connections (Email type)
Here you go! This should make your life a little easier.
Step 1. Create a response connection
Step 2. Select the type of the response connection to be email:
Just copy-paste the code below into the Email response. To change the contents of the email, just change the text highlighted in red (in the middle of the code below) in the Response email.
Preview:
HTML code for that e-mail:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Quriobot notification</title>
<style type="text/css">
body,
* {
font-family: Helvetica, Arial, sans-serif;
font-weight: 400;
color: #272727;
margin: 0;
}
</style>
<!--[if mso]>
<style type="text/css">
h1,h2,h3,h4,h5,h6,p,a,span,td,strong{font-family: Helvetica, Arial, Verdana, sans-serif !important;}
</style>
<![endif]-->
</head>
<body style="font-weight:400;color:#272727;width:100%;background-color:#eae8df;margin:0;padding:0;font-family:'Rubik', sans-serif;">
<table style="font-weight:400;color:#272727;width:100%;border:none;background-color:#eae8df;padding:0;margin:0 auto;font-family:'Rubik', sans-serif;" cellpadding="0" cellspacing="0" border="0" valign="top" align="center">
<tr>
<td cellpadding="0" cellspacing="0" border="0" style="width:100%;border:none;">
<table style="width:100%;border:none;background-color:transparent;padding:0;margin:0;" cellpadding="0" cellspacing="0" border="0" valign="top" align="center">
<tr>
<td style="width:100%;border:none;background-color:transparent;padding:0;margin:0;" cellpadding="0" cellspacing="0" border="0">
<center>
<table style="width:600px;border:none;background-color:transparent;padding:0;margin:0;text-align:left;" cellpadding="0" cellspacing="0" border="0">
<!-- .message-pre -->
<tr>
<td class="message-pre" style="height:80px;width:100%;" cellpadding="0" cellspacing="0">
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="header">
<tr>
<td valign="top" class="preheaderContent">
<center align="center">
<img src="https://quriobot.com/static/quriobot/assets/img/qbicon.png" alt="" width="80" height="80">
<h1 style="text-align:center;margin-top:30px;font-weight:normal;">
Hi there, a notification for you!
</h1>
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="message-body" style="width:100%;background-color:#fff;border-radius:8px 8px 0 0;" cellpadding="0" cellspacing="0" border="0">
<center>
<!-- message_body -->
<table style="width:500px;">
<tr>
<td style="height:46px;width:100%;" cellpadding="0" cellspacing="0" border="0">
</td>
</tr>
<tr>
<td class="message-logo">
<center>
<img class="headerImage" src="https://quriobot.com/static/quriobot/assets/img/inviteWelcome.jpg" width="130" height="130" id="headerImage" />
</center>
</td>
</tr>
<tr>
<td style="height:30px;width:100%;" cellpadding="0" cellspacing="0" border="0">
</td>
</tr>
<tr>
<td class="message-hello" cellpadding="0" cellspacing="0" border="0" style="text-align:center;">
<center>
<h2 style="text-align:center;width:80%;font-weight:400;">
Thank you <br/>
Your text and created { {Variables} } can be placed here
{{chatTranscript}}
</h2>
</center>
</td>
</tr>
<tr>
<td style="height:60px;width:100%;" cellpadding="0" cellspacing="0" border="0">
</td>
</tr>
</table>
<!-- end message_body -->
</center>
</td>
</tr>
<tr>
<td class="message-body" style="width:100%;border-top: 1px solid #eae8df;background-color:#fff;border-radius:0 0 8px 8px;" cellpadding="0" cellspacing="0" border="0">
<center>
<table style="width:500px; margin:0 auto;">
<tr>
<td style="height:10px;width:100%;line-height:0px;font-size:0px;" cellpadding="0" cellspacing="0" border="0">
</td>
</tr>
<tr>
<td class="message-hello" cellpadding="0" cellspacing="0" border="0" style="text-align:center;">
<h4 style="font-weight:400;">
Want to try Quriobot? <a href="https://quriobot.com/signup?utm_source=notification_mail" style="color:#4ba2f9 !important;">Sign up for free</a>
</h4>
</td>
</tr>
<tr>
<td style="height:10px;width:100%;line-height:0px;font-size:0px;" cellpadding="0" cellspacing="0" border="0">
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td class="message-pre" style="height:20px;width:100%;" cellpadding="0" cellspacing="0">
</td>
</tr>
<tr>
<td class="message-pre" style="width:100%;padding:0 56px;font-size:12px;" cellpadding="0" cellspacing="0">
<center>
<table style="margin: 0 auto;">
<tr>
<td style="text-align: center;"><a style="color:#4ba2f9; text-decoration: none;" href="https://www.facebook.com/quriobot" target="_blank"><img src="https://quriobot.com/static/quriobot/assets/img/facebook.png" width="32" height="32" style="margin:10px;" alt="facebook"><br><span style="font-size:14px;"></span></a></td>
<td style="text-align: center;"><a style="color:#4ba2f9; text-decoration: none;" href="https://twitter.com/quriobot" target="_blank"><img src="https://quriobot.com/static/quriobot/assets/img/twitter.png" width="32" height="32" style="margin:10px;" alt="twitter"><br><span style="font-size:14px;"></span></a></td>
<td style="text-align: center;"><a style="color:#4ba2f9; text-decoration: none;" href="https://www.linkedin.com/company/quriobot" target="_blank"><img src="https://quriobot.com/static/quriobot/assets/img/linkedin.png" width="32" height="32" style="margin:10px;" alt="linkedin"><br><span style="font-size:14px;"></span></a></td>
<td style="text-align: center;"><a style="color:#4ba2f9; text-decoration: none;" href="https://www.producthunt.com/posts/quriobot-2" target="_blank"><img src="https://quriobot.com/static/quriobot/assets/img/producthunt.png" width="32" height="32" style="margin:10px;" alt="producthunt"><br><span style="font-size:14px;"></span></a></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You are, of course, completely free to change the HTML code above!
Note that in the HTML code you can use bot variables.