Surveymonkey embedded poll in HubSpot

SOLVE
wviau
Participant

Hi!

 

So, I've got a client who is using the HubSpot blog platform, but wants to embed a Surveymonkey poll directly into a blog post.  They've got a paid Surveymonkey subscription, so it's possible to get an embed code for the survey.  However, when I use the embed code in the blog post, it won't render the survey correctly. It seems to include a tiny 8pt. tall window that scrolls up and down the embedded survey (single question, multiple choice) that is so narrow you can't read the survey. Very un-user-friendly.

 

Is there something I'm doing wrong here? I've embedded YouTube videos and other embed codes before that have worked out just fine. Can a HubSpot blog contain a Surveymonkey embedded survey?

0 Upvotes
1 Accepted solution

Accepted Solutions
Crystal_Hopper
Solution
Guide

That code does the same for me. So I started knocking things out. I currently have this:

 

<div class="hs-embed-wrapper" data-script-embed="true" style="position: relative; overflow: hidden; height: 700px;"><div class="hs-embed-content-wrapper"><script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src="https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd6APemm2sOAolx7z6u_2FSoZBNE2w...",a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script></div></div>

 

Make sure you use the Insert - Embed function in Hubspot:

Crystal_Hopper_3-1625604360371.png

 

Mostly I took out a lot of the sizing and responsive settings in the first Div. Not sure you want it all to come out but just start removing things until it shows up correctly.

 

And it shows up in Preview mode:

 

Crystal_Hopper_1-1625604112894.png

Crystal_Hopper_2-1625604146026.png

 

 

 

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.

View solution in original post

6 Replies 6
Crystal_Hopper
Guide

Hi @wviau! Since you've embedded other content, I'm assuming you are at least somewhat familiar with manually manipulating embed code and changing the height and other parameters. Is this correct? If not, then that's something you might look at closely. Really look at the embed code and see if you can modify it and change parameters to make it work.

 

Is there any chance you could share a SurveyMonkey embed snippet here so we could try it? It doesn't have to be the actual survey you're working with for privacy reasons. You could make a test one to try.

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.
0 Upvotes
wviau
Participant

Hi Crystal!

 

Try this on for size. Here's what Surveymonkey provides for its embed code on a designed test survey with a (theoretical) height and width of "700" (the maximum on the height and width sliders in their formatting options):

 

<script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src="https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd6APemm2sOAolx7z6u_2FSoZBNE2w...",a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script><a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=www.surveymonkey.com> Create your own user feedback survey </a>

 

It says this is what it should look like when embedded (these are the top and the bottom of the in-box scrolling area):

Screen Shot 2021-07-06 at 4.10.52 PM.pngScreen Shot 2021-07-06 at 4.11.04 PM.png

However, when I actually place it in the HubSpot blog post, it shows like this in the preview or live version, with the ability to scroll (using the mouse wheel) within that tiny embed space after the blog text. Interestingly, the embedded survey shows no bottom border either:

 

Screen Shot 2021-07-06 at 4.15.18 PM.png

Thoughts?

0 Upvotes
wviau
Participant

Oh, I should note, it shows up exactly like that whether there's more text continuing under it, a CTA, or a form.  It's not an overlap issue.

Crystal_Hopper
Solution
Guide

That code does the same for me. So I started knocking things out. I currently have this:

 

<div class="hs-embed-wrapper" data-script-embed="true" style="position: relative; overflow: hidden; height: 700px;"><div class="hs-embed-content-wrapper"><script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src="https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd6APemm2sOAolx7z6u_2FSoZBNE2w...",a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script></div></div>

 

Make sure you use the Insert - Embed function in Hubspot:

Crystal_Hopper_3-1625604360371.png

 

Mostly I took out a lot of the sizing and responsive settings in the first Div. Not sure you want it all to come out but just start removing things until it shows up correctly.

 

And it shows up in Preview mode:

 

Crystal_Hopper_1-1625604112894.png

Crystal_Hopper_2-1625604146026.png

 

 

 

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.

View solution in original post

wviau
Participant

Wow! That worked great. Yeah, once I trimmed the client embed code down to just the "<script> ... </script>" chunk, it worked just fine.  Thanks a ton!

Crystal_Hopper
Guide

Glad to hear it!

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.
0 Upvotes