How to detect user has completed embedded Typeform?

Question

I have a Typeform embedded into my page inside an iframe. From my JS I would like to know that user has finished the typeform (i.e. clicked Submit). The typeform JS does not seem to provide any events one can listen to. Currently I figured out only following solution -- to call periodically following test to detect that the outro page is being displayed:

document.getElementById('my-typeform-iframe').getElementsByClassName('outro').length > 0

Is there some nicer approach?

Answer 1

ok, so it I was wrong in my assumptions above - it turns out the typeform iframe emits an event when user submits the form. the event is named form-submit and one can process it e.g. this way:

    window.addEventListener('message', function(event){
      if(event.data == 'form-submit')
        // your business logic here
    }, false);

Answer 2

Typeform now has a 'onSubmit' callback feature for that.

<script src="https://embed.typeform.com/embed.js"></script>
<script>
  window.addEventListener("DOMContentLoaded", function() {
    var el = document.getElementById("my-embedded-typeform");
    window.typeformEmbed.makeWidget(el, "https://admin.typeform.com/to/cVa5IG", {
    onSubmit: function() {
      alert("submited!");
    }
  });
});

Here's the documentation

Apparently there's no easy way to retrieve the answers. As mentioned by @matthew, a response_id is passed to the callback (I guess), and you can query the API with that but you need to implement a retry loop because responses are not immediately available.