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.
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?