Webform not shown after page transition in SPA

App Development
,
1

Hi,

I’ve got the same problem that was posted here on StackOverflow.

I’ve added the web form from the Leadbooster extension to our Next.js app. For that, I adapted the provided embedding code to React. It basically looks like:

import Script from 'next/script';
// …
<>
  <div
    className="pipedriveWebForms"
    data-pd-webforms={`https://webforms.pipedrive.com/f/${formId}`}
  />
  <Script src="https://webforms.pipedrive.com/f/loader" />
</>

The form is initially shown when refreshing the page. However, when switching pages, the “pipedriveWebForms” div stays empty and no iframe is added on subsequent page views. The Script is loaded once, but it’s the same behavior when the script tag gets an id and is therefore loaded on every page view.

Can anybody point me in the right direction how to solve this? I suspect some reinitialization issues in the loader script, but the script itself is pretty opaque (would be nice to have an un-obfuscated version for development).

Thanks!

2

Hi @tschneid
Welcome to the community :wave: and thanks for being patient. I had the chance to check with the concerned team and unfortunately, this is not possible as of now. However, this is in their backlog, and support for dynamic forms can be expected in the future.

3

Thanks for your reply!

In case anyone has the same problem in the future: I had a look at the code and solved it by manually embedding the iframe (in the same way the loader script would’ve done).

The React component returns

<>
  <style jsx>
    {`
      .pipedriveWebForms {
        width: 99%;
        height: ${height}px;
        overflow: hidden;
        position: relative;
      }

      .pipedriveWebForms iframe {
        border: none;
        overflow: hidden;
        width: 100%;
        max-width: 768px;
        height: 100%;
        position: relative;
      }
    `}
  </style>
  <div className="pipedriveWebForms" id={parentId}>
    <iframe
      src={`https://webforms.pipedrive.com/f/${formId}?embeded=1&uuid=${parentId}`}
      name={`${window.document?.URL}-${parentId}`}
      scrolling="no"
      seamless="seamless"
    />
  </div>
</>

parentId can be any unique ID.

I’m aware that this is an unsupported way of embedding the form and it might break in the future when something changes in the loader script. Also, some events from the iframe (like redirecting) are not handled. But it suffices my use case for now.

4

This topic was automatically closed after 10 days. New replies are no longer allowed.

5

Hi @tschneid
Appreciate the fact that you shared the solution :slight_smile:

Thanks for sharing the disclaimer in the end too. :100:

1 Like