I'm hoping to embed a Typeform onto different articles in my documentation centre. However, I need to capture the page URl using hidden fields, so I can link which feedback was left on what article page.
Currently, the responses are aggregated and I don't know which article the user left feedback on.
Here's what the embed code looks like (I've also added a hidden field titled article_url):
<div data-tf-widget="a1B2c3D4" data-tf-opacity="0" data-tf-hide-headers data-tf-hide-footer data-tf-hidden="article_url=xxxxx" style="width:100%;height:350px;"></div><script src="//embed.typeform.com/next/embed.js"></script>
I'm sure I can do this with hidden fields and maybe a window.location.href function within the embed code & using jquery, but I'm not sure how the script would look and my coding skills are a bit rusty.
You can update your typeform embed code directly with JavaScript like this:
const formElement = document.querySelector('[data-tf-widget=a1B2c3D4]')
formElement.dataset.tfHidden = `article_url=${window.location.href}`
However since you are already using custom JavaScript you can use Typeform Embed Library (see on Github) for more control over your embedded forms:
<div id="form" style="width: 100%; height: 350px"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script>
const formId = 'a1B2c3D4'
const container = document.querySelector('#form')
window.tf.createWidget(formId, {
container,
hideHeaders: true,
hideFooter: true,
opacity: 0,
hidden: {
article_url: window.location.href,
},
})
</script>