How to load typeform dynamically using Embed SDK ? Or is there any api to submit the form?

Question

I am trying to embed typeform into my angular application using typeform’s Embed SDK.

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

But however, in my use case I need to dynamically pass the form-id which is obtained from the typeform API response to the above div element.

I have tried adding data-tf-widget="<form-id>" attribute to the element dynamically. It’s getting added but the form with the specified id is not getting rendered in the UI.

 

Is there are way to achieve this? or Is there any api/method/listener provided by the library, that helps me to re-render the element with the provided form-id?

If there is any API available for typeform submission, that would be helpful.

Thanks in advance.

I am trying to embed typeform into my angular application using typeform’s Embed SDK.

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

But however, in my use case I need to dynamically pass the form-id which is obtained from the typeform API response to the above div element.

I have tried adding data-tf-widget="<form-id>" attribute to the element dynamically. It’s getting added but the form with the specified id is not getting rendered in the UI.

Answer 1

You can use the createWidget method:

<div id="tf"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  window.tf.createWidget('<form-id>', {
    container: document.getElementById('tf')
  });
</script>

Have a look at the documentation for more information on how to pass more parameters, hidden fields...