Answered

Missing Embed ID after redirect

  • 28 July 2022
  • 6 replies
  • 154 views
A

Hello!

I’ve got a typeform that redirects to another typeform after one of the endings. The initial typeform is being loaded with the embed SDK and I’m setting the redirect property to _self.

 

<div data-tf-redirect-target=_self data-tf-widget="{{formId}}" data-tf-on-submit="submit" id="form" data-tf-hidden="{{hidden}}"></div>

That all works great. When you complete the question that triggers the redirect the next typeform shows just fine! However, I have noticed that the callbacks stop working at this point. I instrumented the page to log all of the postMessage events that are happening and this is the result.

 

This is the callback output right before the redirect

{
  "status": "completed", // I added this to the logging
  "event": { // The actual object from the callback
    "response_id": "2ey7rf0m0y2bluc2ey7r3wskircxajph",
    "responseId": "2ey7rf0m0y2bluc2ey7r3wskircxajph"
  }
}

This is the postMessage output of the redirect (I assume it’s being triggered by the SDK?)

{
  "type": "redirect-after-submit",
  "url": "https://andhealth.typeform.com/s-aienroll",
  "embedId": "6854122577713748"
}

And here are the theme and ready events, the embedId is now missing.

{
  "type": "form-theme",
  "theme": {
    "backgroundColor": "rgba(255, 243, 233, 1)",
    "color": "#202020"
  },
  "embedId": null
}


{
  "type": "form-ready",
  "embedId": null
}

Completing the typeform shows that the event for submission still fires, but the SDK callback doesn’t get called.

 {
   "type": "form-submit",
   "response_id": "a4l8sdb3l7w06ufa4l8ea16jrz28hi8t",
   "responseId": "a4l8sdb3l7w06ufa4l8ea16jrz28hi8t",
   "embedId": null
 }

I could just key off this “form-submit” type to get the response_id, which ultimately is what I am after. But I feel like the missing embed ID and then potentially no callbacks being triggered is a bug and it would be better to rely on the SDK than the underlying implementation of the callbacks.

icon

Best answer by mathio 23 August 2022, 12:37

View original

6 replies

Gabi Amaral
Rank
Userlevel 7
Badge +5

Hello @andfrank! Welcome to our Community! 

While I'm investigating this internally, I'm tagging @mathio and @picsoung that might be able to help!

I'll get to you as soon as I can. Wishing you a great weekend! 😊

Everyone you meet is fighting a battle you know nothing about. Be kind. Always. =)
mathio
Rank
Userlevel 7
Badge +5

Hello @andfrank 

embed SDK currently supports embedding of one typeform at the moment. On redirect after submit we do not check where the redirect points to. Even if it is a typeform, it is not treated as an “embedded typeform” by the SDK.

To solve this, you could handle the “redirect” in onSubmit callback. There, instead of an actual redirect you could embed the new typeform in place of the submitted typeform.

 

If you think this would be helpful feel free to raise an issue on our embed SDK github page.

V
Badge

@mathio is this still true? The docs seem to say differently (Chaining Typeforms): https://www.typeform.com/developers/embed/configuration/ but I’m also noticing that the callbacks don’t fire for the 2nd Typeform (redirected from the 1st one). Is that expected?

mathio
Rank
Userlevel 7
Badge +5

Hello @vanessab 

the feature of “Chaining typeforms” was introduced in December last year. My comment above is outdated.

 

I created 2 typeforms that redirect between themselves and it works as expected:

https://cut-sparkling-cent.glitch.me/

 

This is the embed code I used:

<div
  style="width: 100%; height: 700px"
  data-tf-widget="vT6MyBoc"
  data-tf-on-ready="handleReady"
  data-tf-on-submit="handleSubmit"
  data-tf-redirect-target="_self"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  function handleReady(payload) {
    console.log("ready", payload);
  }
  function handleSubmit(payload) {
    console.log("submit", payload);
  }
</script>

In browser console you can see the events are coming for both forms (each identified by form ID in the payload).

You can find the full code from the example here on Glitch.

V
Badge

@mathio thanks for your response! We are using the @typeform/embed-react library...any quirks with that? I have redirectTarget set to ‘_self’ so I’d expect it to work like your example, but I’m still not seeing the callbacks fire for the 2nd form.

const Widget = React.lazy(
  async () => import('@typeform/embed-react').then(({ Widget }) => ({ default: Widget })),
)

<Widget
  id={formId}
  hidden={hiddenFields}
  onReady={onReady}
  onSubmit={onSubmit}
  autoFocus
  redirectTarget='_self'
/>

 

mathio
Rank
Userlevel 7
Badge +5

Hi, I replicated your code including lazy loading and it seems to work just fine:

https://vd67yt-3000.csb.app/

You can find the code in CodeSandbox here (I am using your code more-or-less).

 

Are you wrapping the callback functions onReady and onSubmit with useCallback? I dont know if this could be related, however sometimes if you dont the functions will change on re-render of your component which will cause re-render of your Widget component and leads to unexpected behavior such as your typeform randomly reloading.

 

Can you provide a CodeSandbox example with the issue, please?

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs