Answered

Modify HubSpot Optimized Typeform Embed Code

  • 30 June 2022
  • 8 replies
  • 366 views

Userlevel 2
Badge

So I’ve read the documentation for embedding a typeform with HubSpot tracking enabled. I’m just not sure how to modify the embed code that it recommends.

https://www.typeform.com/help/a/track-the-source-of-embedded-typeforms-with-hub-spot-for-advanced-users-4413167079316/

 

It would look like this for my form:

<div id="form"></div>
<script>
const initForm = (hubspotCookieValue) => {
const yourFormId = 'OCFfPLuE' // replace with your FormId
window.tf.createWidget(WbtL1p3W, {
container: document.querySelector('#form'),
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>

I usually use the embed code that I can get from the share page of the form. I have added a snippet of code so that I can pass information from a URL into hidden fields on the form:

<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" style="width:100%;height:700px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Part that I added: 

data-tf-transitive-search-params="branchnumber, employeename, leadsource"

We also sometimes use the button embed code:

<button data-tf-popup="WbtL1p3W" data-tf-transitive-search-params="branchnumber, employeename, leadsource" data-tf-hide-headers data-tf-iframe-props="title=Check Your Eligibility" data-tf-medium="snippet" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#B70F2A;color:#FFFFFF;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Check Now</button><script src="//embed.typeform.com/next/embed.js"></script>

My Questions:

How do I add this snippet to the new HubSpot optimized embed code?

How do I do a button embed code using the new HubSpot optimized embed code?

icon

Best answer by Lasse 1 July 2022, 12:26

View original

8 replies

Userlevel 3
Badge +1

Hi @Cady Schmidt 

Lasse from Typeform Support here. Thanks for sharing such a clear and detailed question😊

In order to “grab” parameters from the URL using our SDK Embed, then the format is a bit different than for our standard embed codes that you grab from the Share panel of your form. 

For the SDK embed the attribute is transitiveSearchParams: ["hidden_field1", "hidden_field2",]
Like stated here

In the same SDK documentation, you can see how to use the button popup embed.

I’ve made the following example of how it could look on your side:

 


<!-- 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,
},
}
);
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>

 

Userlevel 7
Badge +5

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

Userlevel 2
Badge

@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>

 

Userlevel 3
Badge +1

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

Userlevel 2
Badge

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.

Userlevel 3
Badge +1

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>

 

Userlevel 2
Badge

@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>

 

Userlevel 3
Badge +1

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!

Reply