APIs & Integrations

adrasana
Membro

Does anyone embed surveys in emails?

how do i access the code editor in hubspot? i only see a guide from typeform on how to access mailchimp's code editor, but i don't use mailchimp as i use hubspot

 

embedding in mailchimp

12 Respostas 12
ADrouet
Participante

Does anyone embed surveys in emails?

Hi Wendy,

 

I am having the same issue on my end 

 

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head> <title> </title> <!--[if !mso]><!--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--<![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> #outlook a { padding:0; } body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; } img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; } p { display:block;margin:13px 0; } </style> <!--[if mso]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <!--[if lte mso 11]> <style type="text/css"> .mj-outlook-group-fix { width:100% !important; } </style> <![endif]--> <!--[if !mso]><!--> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Lato:400,700); @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700); </style> <!--<![endif]--> <style type="text/css"> @media only screen and (min-width:480px) { .mj-column-px-640 { width:640px !important; max-width: 640px; } .mj-column-per-100 { width:100% !important; max-width: 100%; } } </style> <style type="text/css"> </style> <style data-styled="true" data-styled-version="5.2.1">@media only screen and (max-width:640px){.mj-column-px-640{width:auto !important;}}/*!sc*/ data-styled.g1[id="sc-global-cYWZWD1"]{content:"sc-global-cYWZWD1,"}/*!sc*/ .cIKpxU table{border-spacing:6px;border-collapse:separate;}/*!sc*/ data-styled.g3[id="sc-bdfBwQ"]{content:"cIKpxU,"}/*!sc*/ </style></head> <body style="word-spacing:normal;"> <div style=""> <table align="center" class="wrapper" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"> <tbody> <tr> <td> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:640px;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0;text-align:center;"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:640px;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:640px;" ><![endif]--> <div class="mj-column-px-640 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> <tbody> <tr> <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"> <div style="font-family:'Lato', Helvetica, Arial;font-size:22px;font-weight:normal;line-height:32px;text-align:left;color:#3F5366;">How likely are you to recommend Critizr ?</div> </td> </tr> <tr> <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"> <div style="font-family:'Lato', Helvetica, Arial;font-size:16px;line-height:28px;text-align:left;color:#3F5366;"></div> </td> </tr> <tr> <td align="left" class="sc-bdfBwQ cIKpxU" style="font-size:0px;padding:10px 25px;word-break:break-word;"> <table cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:fixed;width:100%;border:none;"> <tbody><tr><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">0</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">1</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">2</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">3</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">4</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">5</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">6</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">7</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">8</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">9</a></td><td align="center" style="background-color:#d9edff;border-radius:3px;box-shadow:0 0 0 1px #0888FF;width:9.090909090909092%"><a href="https://critizr.typeform.com/to/PVUfplvE?typeform-medium=embed-email#answers-f0ea704c-94f8-4955-a284..." style="color:#0888FF;font-family:'Lato', Helvetica, Arial;display:block;font-size:16px;line-height:62px;height:62px;text-decoration:none;text-align:center;width:100%">10</a></td></tr> </tbody></table> </td> </tr> <tr> <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"> <table cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:fixed;width:100%;border:none;"> <tbody><tr><td style="color:#0888FF;text-align:left;font-family:'Lato', Helvetica, Arial;font-size:13px;font-weight:300;white-space:nowrap;line-height:18px;height:18px"></td><td style="color:#0888FF;text-align:center;font-family:'Lato', Helvetica, Arial;font-size:13px;font-weight:300;white-space:nowrap;line-height:18px;height:18px"></td><td style="color:#0888FF;text-align:right;font-family:'Lato', Helvetica, Arial;font-size:13px;font-weight:300;white-space:nowrap;line-height:18px;height:18px"></td></tr> </tbody></table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:640px;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:640px;" ><![endif]--> <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> <tbody> <tr> <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"> <div style="font-family:Helvetica, Arial;font-size:12px;font-weight:normal;line-height:1;text-align:center;color:#3F5366;">Powered by <a color="#3F5366" href="https://www.typeform.com" style="color:#3F5366;text-decoration:none;font-weight:bold">Typeform</a></div> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> </body></html>

 

It then looks like this when I paste it in my email : 

Capture d’écran 2021-06-16 à 14.57.51.png

 

Thank you in advance for your help ! 🙂

0 Avaliação positiva
WendyGoh
HubSpot Employee
HubSpot Employee

Does anyone embed surveys in emails?

Hi @adrasana,

 

I hope all is well with you 🙂 

 

Are you looking to embed the typeform code onto your HubSpot email?

 

If that's the case, I believe you can access the source code of the rich text like this:

 

Source code.png

 

And paste the typeform code.

 

Hope this helps to clarify!

0 Avaliação positiva
adrasana
Membro

Does anyone embed surveys in emails?

it would look more like this and i don't think it would work in that email template. i need to access a code editor. does hubspot have one?

 

<div class="cui-embed" style="height: 400px; width: 100%;" data-cui-uid="qvGZWv" data-cui-mode="widget" data-cui-pill-button-color="#0000FF"></div><script src="https://public-assets.typeform.com/confab/embed.js" async></script>
 
it needs to look like step 5 and 6 of this typeform help article: https://www.typeform.com/help/embed-typeform-email/
0 Avaliação positiva
WendyGoh
HubSpot Employee
HubSpot Employee

Does anyone embed surveys in emails?

Hi @adrasana,

 

@picsoung is spot on! You can't use javascript on emails. 

 

That said, I was able to embed the typeform code e.g

 

<p>&nbsp;</p>
<!--[if !mso]><!-- --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--<![endif]-->
<p>&nbsp;</p>
<!--[if !mso]><!--> <style type="text/css"> @media only screen and (max-width:480px) { @-ms-viewport { width: 320px; } @viewport { width: 320px; } } </style> <!--<![endif]-->
<p>&nbsp;</p>
<!--[if mso]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]-->
<p>&nbsp;</p>
<!--[if lte mso 11]> <style type="text/css"> .outlook-group-fix { width:100% !important; } </style> <![endif]-->
<p>&nbsp;</p>
<!--[if !mso]><!--> <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet" type="text/css"> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Karla); </style> <!--<![endif]-->
<div style="border-radius: 5px; background-color: #2c2e26; width: 100%;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin: 0px auto; max-width: 600px; background: #2c2e26;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="width:600px;" class="title-outlook"> <![endif]-->
<div style="margin: 0px auto; max-width: 600px; width: 96%;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:600px;"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 100%;">
<div style="cursor: auto; color: #929292; font-family: Font, 'Karla', Helvetica, Arial; font-size: 22px; line-height: 1.4; text-align: left;">Overall, how likely are you to recommend our products to a friend or colleague?</div>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td> </tr> <tr> <td style="width:600px;" class="hidden-outlook description-outlook"> <![endif]-->
<div style="margin: 0px auto; max-width: 600px; width: 96%;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:600px;"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 100%;">
<div style="cursor: auto; color: #929292; font-family: Font, 'Karla', Helvetica, Arial; font-size: 16px; line-height: 22px; text-align: left;">&nbsp;</div>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td> </tr> <tr> <td style="width:600px;" class="mobile-label-outlook"> <![endif]-->
<div style="margin: 0px auto; max-width: 600px; display: none; width: 0; height: 0; max-height: 0;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:undefined;width:600px;"> <![endif]-->
<div style="cursor: auto; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 13px; font-weight: 200; line-height: 22px; text-align: center;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="display:none;mso-hide:all;width:600px;"> <![endif]--> Not at all likely <!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td> </tr> <tr> <td style="width:600px;" class="opinionScale-outlook"> <![endif]-->
<div style="margin: 0px auto; max-width: 600px;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=1" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">1</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=2" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">2</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=3" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">3</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=4" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">4</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=5" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">5</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=6" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">6</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=7" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">7</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=8" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">8</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=9" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">9</a></div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:54px;" class="opinionScaleStep-outlook"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 9.6%;"><a href="https://wendy639249.typeform.com/to/iRWbyq?prefilled_answer=10" target="_blank" style="text-decoration: none; background: #363830; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">10</a></div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td> </tr> <tr> <td style="width:600px;" class="mobile-label-outlook"> <![endif]-->
<div style="margin: 0px auto; max-width: 600px; display: none; width: 0; height: 0; max-height: 0;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:undefined;width:600px;"> <![endif]-->
<div style="cursor: auto; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 13px; font-weight: 200; line-height: 22px; text-align: center;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="display:none;mso-hide:all;width:600px;"> <![endif]--> Extremely likely <!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td> </tr> <tr> <td style="width:600px;" class="desktop-labels-outlook"> <![endif]-->
<div style="margin: 0px auto; max-width: 600px; word-break: break-all;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:192px;"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 32%;">
<div style="cursor: auto; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 13px; font-weight: 200; line-height: 22px; text-align: left;">Not at all likely</div>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:192px;"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 32%;">
<div style="cursor: auto; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 13px; font-weight: 200; line-height: 22px; text-align: center;">Hmm, maybe</div>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:192px;"> <![endif]-->
<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: left; width: 32%;">
<div style="cursor: auto; color: #ffffff; font-family: Font, 'Karla', Helvetica, Arial; font-size: 13px; font-weight: 200; line-height: 22px; text-align: right;">Extremely likely</div>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td> </tr> </table> <![endif]--></div>
<!--[if mso | IE]> </td></tr></table> <![endif]--> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin: 0px auto; max-width: 600px; background: #2c2e26;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:undefined;width:300px;"> <![endif]-->
<div style="cursor: auto; color: #000000; font-family: Helvetica, Arial; font-size: 12px; font-weight: normal; line-height: 22px; text-align: center;"><a href="https://admin.typeform.com/signup?utm_campaign=iRWbyq&amp;utm_source=typeform.com-14387658-Basic&amp;utm_medium=typeform&amp;utm_content=typeform-embed-email&amp;utm_term=EN" target="_blank" style="color: #929292; text-decoration: none;" rel="noopener"> Powered by <strong>Typeform</strong> </a></div>
<!--[if mso | IE]> </td><td style="vertical-align:undefined;width:1px;"> <![endif]--> <!--[if mso | IE]> </td></tr></table> <![endif]--></div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></div>

on my testing email. I got this embedded code from typeform > share tab > include in an email > get the code (doesn't looks quite the same as the javascript you shared, did we take the same steps?) 

0 Avaliação positiva
adrasana
Membro

Does anyone embed surveys in emails?

when you copy/paste in the email, did the format turn out okay? what steps did you take? i would like to follow your steps. can you provide a step-by-step tutorial?

0 Avaliação positiva
WendyGoh
HubSpot Employee
HubSpot Employee

Does anyone embed surveys in emails?

Hey @adrasana,

 

It sure looks alright on my end. Definitely! Here's a gif of the steps I took:

 

Add typeform to email.gif

 

Hope this helps!

0 Avaliação positiva
DTorresOcana
Participante

Does anyone embed surveys in emails?

Hello

 

It looks like the latest HTML editor is not capable of this. Is this right?

 

I am not able to do this anymore.

0 Avaliação positiva
craigdos
Membro

Does anyone embed surveys in emails?

Screenshot 2019-09-23 11.46.07.png

 

I followed the same steps and the formatting did not work out. 

0 Avaliação positiva
WendyGoh
HubSpot Employee
HubSpot Employee

Does anyone embed surveys in emails?

Hi @craigdos,

 

I hop into your portal and created a quick start v3 (hstest) email where I text-align all the number by changing the text-align property value from left to center:

 

<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: center; width: 8.5%;"><a href="https://{{your tyepform url}}" target="_blank" style="text-decoration: none; background: #fef5f3; color: #f94a1e; font-family: Font, 'Source Sans Pro', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">1</a></div>
  • I changed the div style text-align:left to text-align:center
  • I changed the div style width:9% to 8.5%

 

MMMF
Participante

Does anyone embed surveys in emails?

I am having the same problem, my embdeded typform is not fitting inside the email. Please help:

 

This is the code:

 

 
0 Avaliação positiva
WendyGoh
HubSpot Employee
HubSpot Employee

Does anyone embed surveys in emails?

Hey @MMMF ,

 

I'm not seeing the code on your message. 

 

That said, if you'd like to reduce the typeform width, you can do so by setting the width percentage to be lower. E.g.

 

<div style="vertical-align: top; display: inline-block; direction: ltr; font-size: 13px; text-align: center; width: 8.5%;"><a href="https://{{your tyepform url}}" target="_blank" style="text-decoration: none; background: #fef5f3; color: #f94a1e; font-family: Font, 'Source Sans Pro', Helvetica, Arial; font-size: 15px; font-weight: normal; line-height: 4; text-transform: none; margin: 0; padding: 0; display: block;" rel="noopener">1</a></div>

In this case, the width is 8.5%. You can reduce it further so that it best fit your email. Hope this helps!

0 Avaliação positiva
picsoung
Membro

Does anyone embed surveys in emails?

Hi,

If I am not mistaken, you can't add external javascript scripts in your email.

So even you add the code in your email template, I think it will fail to load on client's side.

 

Typeform has an option to share a question survey in an email, but it might not be as pretty as the Conversation embed.

One workaround, could be to take a screenshot/gif of the Conversation interface, and link to the standalone page.
Does it make sense?

Best