Modify HubSpot Optimized Typeform Embed Code

Hi @Cady Schmidt Did the solution above work for you? Let us know if so!

@Lasse Sorry, just now getting back to this. Thank you for your help! Can you show me an example of how the code would be structured with the transitiveSearchParams for just a regular embedded form? Sorry, I’m not super familiar with manipulating this kind of code. I really appreciate your help!

I took a stab at it, does this look correct?

<div id="form"></div>
< script
  >
  const initForm = (hubspotCookieValue) => {
    const yourFormId = 'OCFfPLuE'
    window.tf.createWidget(yourFormId, {
      container: document.querySelector('#form'),
      {
        transitiveSearchParams: [
          "branchnumber", "employeename", "leadsource",
        ],
        hidden: {
          hubspot_utk: hubspotCookieValue,
          hubspot_page_name: document.title,
          hubspot_page_url: window.location.href,
        },
      }
    })
  }

const getCookieValue = (name) => (
  document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)') ? .pop() || null
)


const intervalId = setInterval(() => {
  const hubspotCookieValue = getCookieValue("hubspotutk")
  if (hubspotCookieValue !== null) {
    initForm(hubspotCookieValue)
    clearInterval(intervalId)
  }
}, 1000);
< /script>

Hi @Cady Schmidt, 
To use the transitiveSearchParams with our standard embed code, then you can follow the steps here: Dynamically pass Hidden Fields from a URL to an embedded typeform (for advanced users)

However, please note that the standard embed code will not work with the workaround for HubSpot tracking that is mentioned in the link from your initial question. 
For that to work, you have to use our SDK Embed

Hi @Lasse, thanks for your quick response!

I know we have to use the SDK Embed and you gave me an example for a button SDK embed with the transitivesearchparams included above. I was hoping you could give me an example of just a regular SDK embed with the transitivesearchparams included, as I’m not sure how to insert them correctly into the standard SKD embed code that the article provides.

Hi Cady, 
Thanks for clarifying that, I clearly misread your question😅

To use the Inline-SDK-Embed with for the workaround, and include the transitivesearchparams, then your code can look like this:

 <!-- TYPEFORM Inline EMBED  -->
<div style="width: 100%; height: 100%" id="form"></div>



<script>

const initForm = (hubspotCookieValue) => {
window.tf.createWidget('OCFfPLuE', {
container: document.querySelector('#form'),
redirectTarget:'_self',
inlineOnMobile:'true',
hidden: {
hubspot_utk: hubspotCookieValue,
hubspot_page_name: document.title,
hubspot_page_url: window.location.href,

},
transitiveSearchParams: ["branchnumber", "employeename", "leadsource"],

})
}

const getCookieValue = (name) => (
document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || null
)

const intervalId = setInterval(() => {
const hubspotCookieValue = getCookieValue("hubspotutk")
if (hubspotCookieValue !== null){
initForm(hubspotCookieValue)
clearInterval(intervalId)
}
}, 1000);

</script>

@Lasse This is so helpful, thank you!! One last question. How do we insert data-tf-hidden into:

• Inline-SDK-Embed
• Button-SDK-Embed

Here’s an example of what we’re converting to the SDK Code:

<div data-tf-widget="WbtL1p3W" data-tf-transitive-search-params="branchnumber, employeename, leadsource" data-tf-iframe-props="title=Check Your Eligibility" data-tf-medium="snippet" data-tf-hidden="branchnumber=3785,employeename:JohnDoe" style="width:100%;height:700px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

The last part I need help with adding:

data-tf-hidden="branchnumber=3785,employeename:JohnDoe" 

I gave it a shot below after reviewing the documentation, can you confirm if I did this correctly?

Inline-Embed-SDK

<!-- TYPEFORM Inline EMBED  -->
<div style="width: 100%; height: 600px" id="form"></div>

<script>

const initForm = (hubspotCookieValue) => {
window.tf.createWidget('WbtL1p3W', {
container: document.querySelector('#form'),
redirectTarget:'_self',
inlineOnMobile:'true',
hidden: {
hubspot_utk: hubspotCookieValue,
hubspot_page_name: document.title,
hubspot_page_url: window.location.href,
branchnumber: "3785",
employeename: "John Doe",

},
transitiveSearchParams: ["branchnumber", "employeename", "leadsource"],

})
}

const getCookieValue = (name) => (
document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || null
)

const intervalId = setInterval(() => {
const hubspotCookieValue = getCookieValue("hubspotutk")
if (hubspotCookieValue !== null){
initForm(hubspotCookieValue)
clearInterval(intervalId)
}
}, 1000);

</script>

Button-Embed-SDK

<!-- TYPEFORM SDK EMBED Popup -->
 <button data-tf-popup="OCFfPLuE" id="button">open form</button>



<script>
<!-- HubSpot tracking trigger for Popup EMBED  -->
      const initForm = (hubspotCookieValue) => {
        const { open, close, toggle, refresh } = window.tf.createPopup(
          "OCFfPLuE",
          {
            transitiveSearchParams: [
              "branchnumber", "employeename", "leadsource",
            ],
            hidden: {
              hubspot_utk: hubspotCookieValue,
              hubspot_page_name: document.title,
              hubspot_page_url: window.location.href,
              branchnumber: "3785",
              employeename: "John Doe",
            },
          }
        );
        document.querySelector("#button").onclick = toggle;
      };

      const getCookieValue = (name) =>
        document.cookie.match("(^|;)\\s*" + name + "\\s*=\\s*([^;]+)")?.pop() ||
        null;

      const intervalId = setInterval(() => {
        const hubspotCookieValue = getCookieValue("hubspotutk");
        if (hubspotCookieValue !== null) {
          initForm(hubspotCookieValue);
          clearInterval(intervalId);
        }
      }, 1000);
    </script>

Hi @Cady Schmidt 
Thanks for your message, and sorry for the late reply - I’ve been on holidays😅

I’ve reviewed and tested your code snippets, and that that looks all correct to me😉

Well done!