Что такое Typeform?
Typeform похожа на формы Google, но красивее. Вы можете создавать опросы, формы и викторины с более анимированным дизайном и переходить от вопроса к вопросу.
[Вставить изображение формы Google или Typeform]
Какие есть варианты интеграции Typeform с вашим приложением?
- API: длинная и тщательная документация. Я не использовал его, потому что я больше знаком с установкой npm. Кроме того, лично я считаю, что это проще и проще.
- Встроить SDK:
- CDN: введите это в ‹head› своей HTML-страницы
<script src="https://embed.typeform.com/embed.js"></script>
- npm install: введите npm install --save @ typeform / embed в командный терминал.
Шаги по встраиванию в приложение React
Я использовал реакцию для своего приложения, поэтому я перешел к компоненту и в файле index.js сделал следующее (фрагмент кода ниже шагов):
- Написал это вверху страницы в строке 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": появляется справа, сдвигаясь влево
Остальные параметры виджета вы можете найти здесь.