Что такое Typeform?

Typeform похожа на формы Google, но красивее. Вы можете создавать опросы, формы и викторины с более анимированным дизайном и переходить от вопроса к вопросу.

[Вставить изображение формы Google или Typeform]

Какие есть варианты интеграции Typeform с вашим приложением?

  1. API: длинная и тщательная документация. Я не использовал его, потому что я больше знаком с установкой npm. Кроме того, лично я считаю, что это проще и проще.
  2. Встроить SDK:
  • CDN: введите это в ‹head› своей HTML-страницы <script src="https://embed.typeform.com/embed.js"></script>
  • npm install: введите npm install --save @ typeform / embed в командный терминал.

Шаги по встраиванию в приложение React

Я использовал реакцию для своего приложения, поэтому я перешел к компоненту и в файле index.js сделал следующее (фрагмент кода ниже шагов):

  1. Написал это вверху страницы в строке 2.
import * as typeformEmbed from‘@typeform/embed’

2. Создал класс с componentDidMount () и виджетом в строке 7.

const popup1 = typeformEmbed.makePopup(Typeform url, {parameters})

3. Также в componentDidMount () я добавил прослушиватель событий в строке 19, чтобы вызывать всплывающее окно, открывающееся, когда кнопка в строке 27 находится в щелкнул.

параметры режима в строке 10:

  • «Всплывающее окно»: появляется посередине
  • "Drawer_left": появляется слева, сдвигаясь вправо
  • "Drawer_right": появляется справа, сдвигаясь влево

Остальные параметры виджета вы можете найти здесь.