如何使用嵌入的 Typeform（使用隐藏字段）捕获页面 URL？

Question

我希望将 Typeform 嵌入到我的文档中心的不同文章中。但是，我需要使用隐藏字段捕获页面 URl，以便我可以链接在哪个文章页面上留下了哪些反馈。

目前，回复是汇总的，我不知道用户在哪篇文章上留下了反馈。 这是嵌入代码的样子（我还添加了一个名为 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>

我确信我可以使用隐藏字段以及嵌入代码中的 window.location.href 函数和使用 jquery 来做到这一点，但我不确定脚本的外观和我的编码技能有点生疏。

Answer 1

您可以像这样使用 JavaScript 直接更新您的 typeform 嵌入代码：

const formElement = document.querySelector('[data-tf-widget=a1B2c3D4]')
formElement.dataset.tfHidden = `article_url=${window.location.href}`

但是，由于您已经在使用自定义 JavaScript，您可以使用 Typeform 嵌入库 (see on Github) 来更好地控制您的嵌入表单：

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