Блог

Я надеюсь встроить форму шрифта в различные статьи в моем центре документации. Однако мне нужно захватить 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, но я не уверен, как будет выглядеть сценарий, и мои навыки кодирования немного подзабыты.

Вы можете обновить код встраивания формы шрифта непосредственно с помощью JavaScript, как это:

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

Однако, поскольку вы уже используете пользовательский JavaScript, вы можете использовать библиотеку встраивания форм (см. На 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>