Answered

Best way/code to embed a typeform

  • 21 April 2021
  • 2 replies
  • 810 views
B
Userlevel 1

Hello,

It’s probably a silly/stupid question but I noticed that the code that is generated in the Share tab is way much more “complicated” than what’s described in the Embed SDK documentation.

Share tab generated code :

<div class="typeform-widget" data-url="https://form.typeform.com/to/<form-id>?typeform-medium=embed-snippet" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

VS

Embed SDK documentation :

<div data-tf-widget="<form-id>" id="form"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

 

You will agree that the second one is way much more simple to use and read.

I tried both codes and the result looked the same.

Any reason I should use the first one instead of the second?

 

Thanks

Ben

icon

Best answer by mathio 22 April 2021, 11:28

View original

2 replies

mathio
Rank
Userlevel 7
Badge +5

Hello @BenjamPrejent ,The SDK was updated recently (to v1) however we have yet to update the share tab to use this new version.

I would suggest you use the example from SDK. Hopefully the share tab will use the new SDK soon and generate the short and nice code too.

Note: If you want to control the size of your embed when using embed SDK v1 you will need to wrap it in a div and set its dimensions like this:

<div style=”width:50%;height:500px”>
  <div data-tf-widget="<form-id>"></div>
</div>
<script src="//embed.typeform.com/next/embed.js"></script>

 

B
Userlevel 1

Thanks a lot for this very clear answer @mathio.

That was my guess but wanted to be 100% sure.

And thanks also for the size tip ;)

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs