Does anyone embed surveys in emails?

adrasana
Member

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

10 Replies 10
WendyGoh
HubSpot Employee

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 Upvotes
adrasana
Member

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 Upvotes
picsoung
Member

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

WendyGoh
HubSpot Employee

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 Upvotes
adrasana
Member

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 Upvotes
WendyGoh
HubSpot Employee

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 Upvotes
craigdos
Member

Screenshot 2019-09-23 11.46.07.png

 

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

0 Upvotes
WendyGoh
HubSpot Employee

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
Participant

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

 

This is the code:

 

 
0 Upvotes
WendyGoh
HubSpot Employee

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 Upvotes