├── .eslintrc.js ├── .github └── workflows │ ├── ci-standard-checks.yml │ ├── ci.yml │ └── update-demos.yml ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .npmrc ├── CODEOWNERS ├── LICENSE ├── README.md ├── demo-html ├── autoclose │ ├── index.html │ └── package.json ├── callbacks-duplicate-prevention │ ├── index.html │ └── package.json ├── callbacks │ ├── index.html │ └── package.json ├── client-side │ ├── index.html │ └── package.json ├── exit-html │ ├── index.html │ └── package.json ├── exit-js │ ├── index.html │ └── package.json ├── keep-session-html │ ├── index.html │ └── package.json ├── live-embed-eu │ ├── index.html │ └── package.json ├── live-embed │ ├── index.html │ └── package.json ├── load-html │ ├── index.html │ └── package.json ├── load-js │ ├── index.html │ └── package.json ├── popover-html │ ├── index.html │ └── package.json ├── popover-js │ ├── index.html │ └── package.json ├── popup-html │ ├── index.html │ └── package.json ├── popup-js │ ├── index.html │ └── package.json ├── preselect-html │ ├── index.html │ └── package.json ├── prevent-reopen-on-close-html │ ├── index.html │ └── package.json ├── reload-event │ ├── index.html │ └── package.json ├── respect-js │ ├── index.html │ └── package.json ├── scroll-html │ ├── index.html │ └── package.json ├── scroll-js │ ├── index.html │ └── package.json ├── sidetab-customized-html │ ├── index.html │ └── package.json ├── sidetab-html │ ├── index.html │ └── package.json ├── sidetab-js │ ├── index.html │ └── package.json ├── slider-html │ ├── index.html │ └── package.json ├── slider-js │ ├── index.html │ └── package.json ├── time-html │ ├── index.html │ └── package.json ├── time-js │ ├── index.html │ └── package.json ├── transitive-params-html │ ├── index.html │ └── package.json ├── transitive-params-js │ ├── index.html │ └── package.json ├── widget-autoresize │ ├── index.html │ └── package.json ├── widget-focus │ ├── index.html │ └── package.json ├── widget-full-screen-html │ ├── index.html │ └── package.json ├── widget-html │ ├── index.html │ └── package.json ├── widget-inline │ ├── index.html │ └── package.json ├── widget-js │ ├── index.html │ └── package.json ├── widget-lazy-html │ ├── index.html │ └── package.json ├── widget-sandbox │ ├── index.html │ └── package.json └── widget-theme │ ├── index.html │ └── package.json ├── demo-nextjs ├── app │ ├── app-menu.tsx │ ├── app │ │ ├── popup │ │ │ └── page.tsx │ │ └── widget │ │ │ └── page.tsx │ └── layout.tsx ├── next-env.d.ts ├── package.json ├── pages │ ├── _app.tsx │ ├── forward-ref.tsx │ ├── index.tsx │ ├── popover.tsx │ ├── popup.tsx │ ├── sidetab.tsx │ ├── slider.tsx │ ├── vanilla.tsx │ └── widget-eu.tsx ├── shared │ ├── constants.ts │ ├── globals.css │ └── menu.tsx └── tsconfig.json ├── package.json ├── scripts └── deploy-codesandbox.js ├── sonar-project.properties └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@typeform/eslint-config'], 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/ci-standard-checks.yml: -------------------------------------------------------------------------------- 1 | name: CI Standard Checks 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | types: 8 | - opened 9 | - edited 10 | - synchronize 11 | - reopened 12 | - ready_for_review 13 | branches: 14 | - main 15 | jobs: 16 | ci-standard-checks: 17 | uses: Typeform/.github/.github/workflows/ci-standard-checks-workflow.yaml@v1 18 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | sonarcloud: 10 | name: Test and Code Quality Report (SonarCloud) 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Check out Git repository 14 | uses: actions/checkout@v4 15 | with: 16 | fetch-depth: 0 17 | 18 | - name: SonarCloud Scan 19 | uses: SonarSource/sonarqube-scan-action@v5 20 | with: 21 | args: > 22 | -Dsonar.projectVersion=${{ github.run_id }} 23 | env: 24 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} 25 | SONAR_TOKEN: ${{ secrets.SONAR_CLOUD_TOKEN }} 26 | LC_ALL: 'C.UTF-8' 27 | -------------------------------------------------------------------------------- /.github/workflows/update-demos.yml: -------------------------------------------------------------------------------- 1 | name: Update Demos 2 | on: 3 | push: 4 | branches: [main] 5 | workflow_dispatch: 6 | repository_dispatch: 7 | types: update_embed_demos 8 | 9 | jobs: 10 | update-demos: 11 | runs-on: ubuntu-latest 12 | if: "!contains(github.event.head_commit.message, '[skip ci]')" 13 | steps: 14 | - name: Checkout embed 15 | uses: actions/checkout@v2 16 | with: 17 | repository: Typeform/embed 18 | path: embed 19 | 20 | - name: Checkout current (embed-demo) repo 21 | uses: actions/checkout@v2 22 | with: 23 | path: demo 24 | ref: main 25 | persist-credentials: false 26 | token: ${{ secrets.GH_TOKEN }} 27 | 28 | - name: Install deps 29 | working-directory: demo 30 | run: yarn 31 | 32 | - name: Run script to generate demos 33 | working-directory: demo 34 | run: | 35 | yarn deploy 36 | yarn lint 37 | 38 | - name: Check if there are any changes 39 | id: check-for-changes 40 | working-directory: demo 41 | run: | 42 | git status 43 | echo "name=no_changes::$(git status | grep -c "nothing to commit")" 44 | echo "::set-output name=no_changes::$(git status | grep -c "nothing to commit")" 45 | 46 | - name: Commit generated demos 47 | if: steps.check-for-changes.outputs.no_changes == 0 48 | working-directory: demo 49 | run: | 50 | git config --global user.email "you@example.com" 51 | git config --global user.name "Github Action" 52 | git add . 53 | git commit -m "[skip ci] update demos" 54 | git push https://$GITHUB_TOKEN@github.com/Typeform/embed-demo.git 55 | env: 56 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} 57 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .idea/ 3 | .next/ 4 | demo-*/**/yarn.lock -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # override registry since this is a public repo 2 | @typeform:registry=https://registry.yarnpkg.com 3 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @Typeform/blocks 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Typeform 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CodeSandbox demos 2 | 3 | Demos for [@typeform/embed](https://github.com/Typeform/embed). 4 | 5 | ## HTML 6 | 7 | 1. [autoclose](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/autoclose) 8 | 2. [callbacks-duplicate-prevention](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/callbacks-duplicate-prevention) 9 | 3. [callbacks](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/callbacks) 10 | 4. [client-side](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/client-side) 11 | 5. [exit-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/exit-html) 12 | 6. [exit-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/exit-js) 13 | 7. [keep-session-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/keep-session-html) 14 | 8. [live-embed-eu](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/live-embed-eu) 15 | 9. [live-embed](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/live-embed) 16 | 10. [load-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/load-html) 17 | 11. [load-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/load-js) 18 | 12. [popover-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/popover-html) 19 | 13. [popover-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/popover-js) 20 | 14. [popup-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/popup-html) 21 | 15. [popup-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/popup-js) 22 | 16. [preselect-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/preselect-html) 23 | 17. [prevent-reopen-on-close-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/prevent-reopen-on-close-html) 24 | 18. [reload-event](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/reload-event) 25 | 19. [respect-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/respect-js) 26 | 20. [scroll-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/scroll-html) 27 | 21. [scroll-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/scroll-js) 28 | 22. [sidetab-customized-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-customized-html) 29 | 23. [sidetab-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-html) 30 | 24. [sidetab-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/sidetab-js) 31 | 25. [slider-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/slider-html) 32 | 26. [slider-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/slider-js) 33 | 27. [time-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/time-html) 34 | 28. [time-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/time-js) 35 | 29. [transitive-params-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/transitive-params-html) 36 | 30. [transitive-params-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/transitive-params-js) 37 | 31. [widget-autoresize](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-autoresize) 38 | 32. [widget-focus](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-focus) 39 | 33. [widget-full-screen-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-full-screen-html) 40 | 34. [widget-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-html) 41 | 35. [widget-inline](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-inline) 42 | 36. [widget-js](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-js) 43 | 37. [widget-lazy-html](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-lazy-html) 44 | 38. [widget-sandbox](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-sandbox) 45 | 39. [widget-theme](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-theme) 46 | 47 | ## React (NextJS) 48 | 49 | [React app](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-nextjs) 50 | 51 | ## Dev notes 52 | 53 | Do not edit this README file or any of the `demo-` directories manually. They are generated automatically by [github action](https://github.com/Typeform/embed-demo/blob/main/.github/workflows/update-demos.yml) using [`yarn deploy` script](https://github.com/Typeform/embed-demo/blob/main/scripts/deploy-codesandbox.js). 54 | -------------------------------------------------------------------------------- /demo-html/autoclose/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 8 | 9 | 10 | 13 | 14 | 15 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /demo-html/autoclose/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "autoclose", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - autoclose", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/callbacks-duplicate-prevention/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 27 | 28 | 29 | 30 |
I have z-index 10k
31 |
32 | 33 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo-html/callbacks-duplicate-prevention/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "callbacks-duplicate-prevention", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - callbacks-duplicate-prevention", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/callbacks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 14 | 15 | 16 |
28 | 40 | 41 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /demo-html/callbacks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "callbacks", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - callbacks", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/client-side/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Client-side Snippet Demo 7 | 15 | 16 | 17 |

This page will inject embed code client-side with JS

18 |

19 | This embed code is inserted before the JS lib is loaded and will load 20 | automatically. 21 |

22 |
23 |

24 | Embed code here is inserted later, after the JS lib is loaded and needs to 25 | be loaded manually via 26 | window.tf.load(). 27 |

28 |
29 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /demo-html/client-side/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client-side", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - client-side", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/exit-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: exit (via embed code) 5 | 16 | 17 | 18 | 19 |
20 |

This popup opens on exit intent (via embed code)

21 |

22 | If a user wants to navigate away from your page, they usually need to 23 | access the browser toolbar. 24 |

25 |

26 | We detect mouse movement in top part of the page - if the mouse is moving 27 | "up", we open the popup. 28 |

29 |

The popup is opened only once (on first detected exit intent).

30 | 40 | 41 |

Technical stuff

42 |

43 | This is not available for customization on "Share" page, but the embed lib 44 | allows it. 45 |

46 |
47 | 48 | 57 | 58 |
59 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /demo-html/exit-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exit-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - exit-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/exit-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: exit (via API) 5 | 16 | 17 | 18 | 19 |
20 |

This popup opens on exit intent (via API)

21 |

22 | If a user wants to navigate away from your page, they usually need to 23 | access the browser toolbar. 24 |

25 |

26 | We detect mouse movement in top part of the page - if the mouse is moving 27 | "up", we open the popup. 28 |

29 |

The popup is opened only once (on first detected exit intent).

30 | 31 |

Technical stuff

32 |

33 | This is not available for customization on "Share" page, but the embed lib 34 | allows it. 35 |

36 |
37 | 38 | 47 | 48 |
49 | 50 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /demo-html/exit-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exit-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - exit-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/keep-session-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 8 | 9 | 12 | 15 |
16 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /demo-html/keep-session-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "keep-session-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - keep-session-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/live-embed-eu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EU Region Forward Compatible Static HTML Demo 7 | 27 | 28 | 29 |
I have z-index 10k
30 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /demo-html/live-embed-eu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "live-embed-eu", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - live-embed-eu", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/live-embed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 27 | 28 | 29 |
I have z-index 10k
30 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /demo-html/live-embed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "live-embed", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - live-embed", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/load-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: load (via embed code) 5 | 6 | 7 | 8 |

This slider opens on page load (via embed code)

9 |

If you see this you very likely already closed the slider.

10 |

If the slider did not open automatically something is broken.

11 | 12 | 35 | 36 | 44 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /demo-html/load-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "load-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - load-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/load-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: load (via API) 5 | 6 | 7 | 8 |

This slider opens on page load (via API)

9 |

If you see this you very likely already closed the slider.

10 |

If the slider did not open automatically something is broken.

11 | 12 | 13 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /demo-html/load-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "load-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - load-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/popover-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 8 | 9 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /demo-html/popover-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "popover-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - popover-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/popover-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 21 | 22 | 23 | 24 |
I have z-index 10k
25 |

26 | You can also toggle the popover via this button: 27 | 28 |

29 |
30 |

31 | You can also toggle the popover with custom icon via this button: 32 | 33 |

34 | 35 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /demo-html/popover-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "popover-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - popover-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/popup-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 21 | 22 | 23 |
24 |
I have z-index 10k
25 | 33 | 40 | 47 | 55 | 56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /demo-html/popup-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "popup-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - popup-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/popup-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 8 | 9 | 10 | 11 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /demo-html/popup-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "popup-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - popup-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/preselect-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 27 | 28 | 29 |
I have z-index 10k
30 |

31 | This embed preselects the answer to 6 and continues to 32 | next question. 33 |

34 |

35 | More info in this help center article. 39 |

40 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /demo-html/preselect-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "preselect-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - preselect-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/prevent-reopen-on-close-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: data-tf-prevent-reopen-on-close 5 | 6 | 7 | 8 | 9 | 10 |

Popover opens first (after 1 second).

11 |

12 | Sidetab opens second (after 6 seconds). However, if you closed the popover 13 | before it opens, the sidetab does not open because they both show the same 14 | typeform. 15 |

16 |

17 | If you closed either popover or sidetab, neither of them will open on page 18 | reload. 19 |

20 |

21 | Regardless of your previous actions a popup opens third (after 7 seconds). 22 | If you close it, it will not reopen on page reload. 23 |

24 |

25 | Information on closed typeforms is stored in cookie. You can reset the 26 | cookie below: 27 |

28 | 29 | 38 | 39 | 40 | 49 | 50 | 51 | 60 | 61 |

62 | 65 |

66 | 67 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /demo-html/prevent-reopen-on-close-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "prevent-reopen-on-close-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - prevent-reopen-on-close-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/reload-event/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 19 | 20 | 21 | 22 |
23 |

Async widget

24 |
25 |

26 | We will inject embed code here 3 seconds after the page has loaded. 27 |

28 |

Click the buttons below when this text is gone.

29 |
30 |

31 |
32 |
33 |

Standard widget

34 |
35 |
36 |
37 |

38 | Use the buttons below when new widget is injected into the left column. 39 |

40 |

41 | Load new embeds only: 42 |

43 |

44 | Reload all embeds in the page: 45 | 46 |

47 | 48 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /demo-html/reload-event/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reload-event", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - reload-event", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/respect-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open and respect 5 | 6 | 7 | 8 | 9 | 10 |

Respect

11 |
12 |
13 |
16 | 17 |
18 |

Form in popover opens in 1 second.

19 |

20 | If respect = none the same form in slider opens in 2 21 | second. 22 |

23 |

24 | If respect = none or same different form in side tab 25 | might open in 3 seconds. 26 |

27 | 28 | 29 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /demo-html/respect-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "respect-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - respect-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/scroll-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: scroll (via embed code) 5 | 6 | 33 | 34 | 35 |
36 | The popover will open at 30%
37 | You scrolled 0px, that is 38 | 0.00% of the page 39 |
40 |

41 | This popover opens on scroll - at 30% (via 42 | embed code) 43 |

44 |

45 | The popover is opened automatically when you scroll past given percentage 46 | of the page height. 47 |

48 |

49 | The popover is opened only once (when you scroll past the given percentage 50 | for the first time). 51 |

52 | 62 | 63 |

Customize the percentage

64 |

This can be set on "Share" page as well.

65 |
66 | 67 | 75 | 76 |
77 | 78 | 101 | 102 |
103 |

Random text to make the page long

104 |

105 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra 106 | aliquam augue vitae volutpat. Integer eu turpis elit. 107 |

108 |

109 | Mauris nec lobortis metus. Quisque commodo quis neque sed volutpat. 110 | Integer a bibendum ante, at dapibus arcu. 111 |

112 |

113 | Curabitur at suscipit enim. Aliquam ut urna nunc. Praesent nisl elit, 114 | iaculis nec lectus vitae, posuere aliquet velit. 115 |

116 |

117 | Aenean id porttitor nisi. Phasellus vel fermentum elit. In ut maximus 118 | risus, quis lobortis elit. 119 |

120 |

121 | Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, 122 | vulputate sed erat vitae, vehicula bibendum turpis. 123 |

124 |

125 | Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam. 126 |

127 |

128 | Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa 129 | ullamcorper pulvinar. 130 |

131 |

132 | Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. 133 | Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi. 134 |

135 |

136 | Quisque felis enim, blandit in convallis in, bibendum non metus. Proin 137 | consectetur ut ante nec malesuada. 138 |

139 |

140 | Pellentesque interdum id metus condimentum varius. Nullam fringilla 141 | lacinia posuere. 142 |

143 |

144 | Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo 145 | dolor, molestie quis diam id, tempor ullamcorper diam. 146 |

147 |

148 | Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget 149 | blandit molestie, massa leo sollicitudin nisi. 150 |

151 |

152 | Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue 153 | pharetra et. Nullam sed elit turpis. 154 |

155 |

156 | Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non 157 | nunc porttitor finibus. 158 |

159 |

Proin elementum risus et molestie aliquam.

160 |

161 | Duis a egestas lectus, sed mattis nisl. Ut ultricies id mi vel varius. 162 | Donec nec laoreet orci. 163 |

164 |

165 | Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. 166 | Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi. 167 |

168 |

169 | Quisque felis enim, blandit in convallis in, bibendum non metus. Proin 170 | consectetur ut ante nec malesuada. 171 |

172 |

173 | Pellentesque interdum id metus condimentum varius. Nullam fringilla 174 | lacinia posuere. 175 |

176 |

177 | Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo 178 | dolor, molestie quis diam id, tempor ullamcorper diam. 179 |

180 |

181 | Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget 182 | blandit molestie, massa leo sollicitudin nisi. 183 |

184 |

185 | Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue 186 | pharetra et. Nullam sed elit turpis. 187 |

188 |

189 | Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non 190 | nunc porttitor finibus. 191 |

192 |

Proin elementum risus et molestie aliquam.

193 |

194 | Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. 195 | Aenean cursus nulla sit amet lectus consequat vestibulum. 196 |

197 |

198 | In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non 199 | facilisis mi. 200 |

201 |

202 | Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. 203 | Curabitur pharetra, lorem non tincidunt sollicitudin. 204 |

205 |

206 | Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. 207 | Curabitur et tempor purus. 208 |

209 |

210 | Maecenas commodo lorem augue, sed varius est maximus auctor. Proin 211 | finibus justo eu ante bibendum mollis. 212 |

213 |

214 | Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend 215 | efficitur. Pellentesque vitae pellentesque nisl. 216 |

217 |

218 | Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna. 219 |

220 |

221 | In hac habitasse platea dictumst. Nulla sit amet mauris elit. Maecenas 222 | consectetur imperdiet nisl, a vestibulum lectus maximus vel. 223 |

224 |

225 | Nulla sagittis tempus arcu id vestibulum. Donec at nulla congue, luctus 226 | orci sit amet, scelerisque ante. 227 |

228 |

229 | Praesent faucibus, lacus et varius cursus, turpis nibh scelerisque est, 230 | sit amet lacinia sapien metus vitae tellus. 231 |

232 |

233 | Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, 234 | vulputate sed erat vitae, vehicula bibendum turpis. 235 |

236 |

237 | Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam. 238 |

239 |

240 | Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa 241 | ullamcorper pulvinar. 242 |

243 |

244 | Mauris aliquam erat feugiat ligula faucibus, eu imperdiet ante molestie. 245 |

246 |

247 | Donec convallis, nisi at molestie fringilla, mi dolor suscipit risus, 248 | vitae gravida nulla libero vitae urna. 249 |

250 |

251 | Vestibulum id nisi mauris. In faucibus vitae massa eget feugiat. Morbi 252 | in arcu congue, iaculis eros ac, fermentum purus. 253 |

254 |

255 | Fusce lectus tortor, facilisis tincidunt varius ac, sodales quis eros. 256 | Pellentesque quis nulla a nisl feugiat pretium. 257 |

258 |

Duis et magna finibus, hendrerit ligula non, rutrum nunc.

259 |

260 | Pellentesque interdum id metus condimentum varius. Nullam fringilla 261 | lacinia posuere. 262 |

263 |

264 | Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo 265 | dolor, molestie quis diam id, tempor ullamcorper diam. 266 |

267 |

268 | Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget 269 | blandit molestie, massa leo sollicitudin nisi. 270 |

271 |

272 | Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue 273 | pharetra et. Nullam sed elit turpis. 274 |

275 |

276 | Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non 277 | nunc porttitor finibus. 278 |

279 |

Proin elementum risus et molestie aliquam.

280 |

281 | Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. 282 | Aenean cursus nulla sit amet lectus consequat vestibulum. 283 |

284 |

285 | In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non 286 | facilisis mi. 287 |

288 |

289 | Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. 290 | Curabitur pharetra, lorem non tincidunt sollicitudin. 291 |

292 |

293 | Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. 294 | Curabitur et tempor purus. 295 |

296 |

297 | Maecenas commodo lorem augue, sed varius est maximus auctor. Proin 298 | finibus justo eu ante bibendum mollis. 299 |

300 |

301 | Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend 302 | efficitur. Pellentesque vitae pellentesque nisl. 303 |

304 |

305 | Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna. 306 |

307 |

308 | In hac habitasse platea dictumst. Nulla sit amet mauris elit. Maecenas 309 | consectetur imperdiet nisl, a vestibulum lectus maximus vel. 310 |

311 |

312 | Nulla sagittis tempus arcu id vestibulum. Donec at nulla congue, luctus 313 | orci sit amet, scelerisque ante. 314 |

315 |

316 | Praesent faucibus, lacus et varius cursus, turpis nibh scelerisque est, 317 | sit amet lacinia sapien metus vitae tellus. 318 |

319 |

320 | Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, 321 | vulputate sed erat vitae, vehicula bibendum turpis. 322 |

323 |

324 | Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam. 325 |

326 |

327 | Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa 328 | ullamcorper pulvinar. 329 |

330 |

331 | Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. 332 | Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi. 333 |

334 |

335 | Quisque felis enim, blandit in convallis in, bibendum non metus. Proin 336 | consectetur ut ante nec malesuada. 337 |

338 |

339 | Pellentesque interdum id metus condimentum varius. Nullam fringilla 340 | lacinia posuere. 341 |

342 |

343 | Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo 344 | dolor, molestie quis diam id, tempor ullamcorper diam. 345 |

346 |

347 | Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget 348 | blandit molestie, massa leo sollicitudin nisi. 349 |

350 |

351 | Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue 352 | pharetra et. Nullam sed elit turpis. 353 |

354 |

355 | Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non 356 | nunc porttitor finibus. 357 |

358 |

Proin elementum risus et molestie aliquam.

359 |

360 | Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. 361 | Aenean cursus nulla sit amet lectus consequat vestibulum. 362 |

363 |

364 | In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non 365 | facilisis mi. 366 |

367 |

368 | Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. 369 | Curabitur pharetra, lorem non tincidunt sollicitudin. 370 |

371 |

372 | Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. 373 | Curabitur et tempor purus. 374 |

375 |

376 | Maecenas commodo lorem augue, sed varius est maximus auctor. Proin 377 | finibus justo eu ante bibendum mollis. 378 |

379 |

380 | Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend 381 | efficitur. Pellentesque vitae pellentesque nisl. 382 |

383 |

384 | Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna. 385 |

386 |

387 | Mauris aliquam erat feugiat ligula faucibus, eu imperdiet ante molestie. 388 |

389 |
390 | 391 | 392 | -------------------------------------------------------------------------------- /demo-html/scroll-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scroll-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - scroll-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/scroll-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: scroll (via API) 5 | 6 | 20 | 21 | 22 |
23 | The popover will open at 30%
24 | You scrolled 0px, that is 25 | 0.00% of the page 26 |
27 |

28 | This popover opens on scroll - at 30% (via 29 | API) 30 |

31 |

32 | The popover is opened automatically when you scroll past given percentage 33 | of the page height. 34 |

35 |

36 | The popover is opened only once (when you scroll past the given percentage 37 | for the first time). 38 |

39 | 40 |

Customize the percentage

41 |

This can be set on "Share" page as well.

42 |
43 | 44 | 52 | 53 |
54 | 55 | 56 | 88 | 89 |
90 |

Random text to make the page long

91 |

92 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra 93 | aliquam augue vitae volutpat. Integer eu turpis elit. 94 |

95 |

96 | Mauris nec lobortis metus. Quisque commodo quis neque sed volutpat. 97 | Integer a bibendum ante, at dapibus arcu. 98 |

99 |

100 | Curabitur at suscipit enim. Aliquam ut urna nunc. Praesent nisl elit, 101 | iaculis nec lectus vitae, posuere aliquet velit. 102 |

103 |

104 | Aenean id porttitor nisi. Phasellus vel fermentum elit. In ut maximus 105 | risus, quis lobortis elit. 106 |

107 |

108 | Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, 109 | vulputate sed erat vitae, vehicula bibendum turpis. 110 |

111 |

112 | Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam. 113 |

114 |

115 | Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa 116 | ullamcorper pulvinar. 117 |

118 |

119 | Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. 120 | Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi. 121 |

122 |

123 | Quisque felis enim, blandit in convallis in, bibendum non metus. Proin 124 | consectetur ut ante nec malesuada. 125 |

126 |

127 | Pellentesque interdum id metus condimentum varius. Nullam fringilla 128 | lacinia posuere. 129 |

130 |

131 | Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo 132 | dolor, molestie quis diam id, tempor ullamcorper diam. 133 |

134 |

135 | Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget 136 | blandit molestie, massa leo sollicitudin nisi. 137 |

138 |

139 | Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue 140 | pharetra et. Nullam sed elit turpis. 141 |

142 |

143 | Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non 144 | nunc porttitor finibus. 145 |

146 |

Proin elementum risus et molestie aliquam.

147 |

148 | Duis a egestas lectus, sed mattis nisl. Ut ultricies id mi vel varius. 149 | Donec nec laoreet orci. 150 |

151 |

152 | Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. 153 | Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi. 154 |

155 |

156 | Quisque felis enim, blandit in convallis in, bibendum non metus. Proin 157 | consectetur ut ante nec malesuada. 158 |

159 |

160 | Pellentesque interdum id metus condimentum varius. Nullam fringilla 161 | lacinia posuere. 162 |

163 |

164 | Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo 165 | dolor, molestie quis diam id, tempor ullamcorper diam. 166 |

167 |

168 | Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget 169 | blandit molestie, massa leo sollicitudin nisi. 170 |

171 |

172 | Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue 173 | pharetra et. Nullam sed elit turpis. 174 |

175 |

176 | Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non 177 | nunc porttitor finibus. 178 |

179 |

Proin elementum risus et molestie aliquam.

180 |

181 | Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. 182 | Aenean cursus nulla sit amet lectus consequat vestibulum. 183 |

184 |

185 | In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non 186 | facilisis mi. 187 |

188 |

189 | Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. 190 | Curabitur pharetra, lorem non tincidunt sollicitudin. 191 |

192 |

193 | Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. 194 | Curabitur et tempor purus. 195 |

196 |

197 | Maecenas commodo lorem augue, sed varius est maximus auctor. Proin 198 | finibus justo eu ante bibendum mollis. 199 |

200 |

201 | Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend 202 | efficitur. Pellentesque vitae pellentesque nisl. 203 |

204 |

205 | Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna. 206 |

207 |

208 | In hac habitasse platea dictumst. Nulla sit amet mauris elit. Maecenas 209 | consectetur imperdiet nisl, a vestibulum lectus maximus vel. 210 |

211 |

212 | Nulla sagittis tempus arcu id vestibulum. Donec at nulla congue, luctus 213 | orci sit amet, scelerisque ante. 214 |

215 |

216 | Praesent faucibus, lacus et varius cursus, turpis nibh scelerisque est, 217 | sit amet lacinia sapien metus vitae tellus. 218 |

219 |

220 | Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, 221 | vulputate sed erat vitae, vehicula bibendum turpis. 222 |

223 |

224 | Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam. 225 |

226 |

227 | Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa 228 | ullamcorper pulvinar. 229 |

230 |

231 | Mauris aliquam erat feugiat ligula faucibus, eu imperdiet ante molestie. 232 |

233 |

234 | Donec convallis, nisi at molestie fringilla, mi dolor suscipit risus, 235 | vitae gravida nulla libero vitae urna. 236 |

237 |

238 | Vestibulum id nisi mauris. In faucibus vitae massa eget feugiat. Morbi 239 | in arcu congue, iaculis eros ac, fermentum purus. 240 |

241 |

242 | Fusce lectus tortor, facilisis tincidunt varius ac, sodales quis eros. 243 | Pellentesque quis nulla a nisl feugiat pretium. 244 |

245 |

Duis et magna finibus, hendrerit ligula non, rutrum nunc.

246 |

247 | Pellentesque interdum id metus condimentum varius. Nullam fringilla 248 | lacinia posuere. 249 |

250 |

251 | Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo 252 | dolor, molestie quis diam id, tempor ullamcorper diam. 253 |

254 |

255 | Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget 256 | blandit molestie, massa leo sollicitudin nisi. 257 |

258 |

259 | Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue 260 | pharetra et. Nullam sed elit turpis. 261 |

262 |

263 | Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non 264 | nunc porttitor finibus. 265 |

266 |

Proin elementum risus et molestie aliquam.

267 |

268 | Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. 269 | Aenean cursus nulla sit amet lectus consequat vestibulum. 270 |

271 |

272 | In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non 273 | facilisis mi. 274 |

275 |

276 | Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. 277 | Curabitur pharetra, lorem non tincidunt sollicitudin. 278 |

279 |

280 | Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. 281 | Curabitur et tempor purus. 282 |

283 |

284 | Maecenas commodo lorem augue, sed varius est maximus auctor. Proin 285 | finibus justo eu ante bibendum mollis. 286 |

287 |

288 | Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend 289 | efficitur. Pellentesque vitae pellentesque nisl. 290 |

291 |

292 | Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna. 293 |

294 |

295 | In hac habitasse platea dictumst. Nulla sit amet mauris elit. Maecenas 296 | consectetur imperdiet nisl, a vestibulum lectus maximus vel. 297 |

298 |

299 | Nulla sagittis tempus arcu id vestibulum. Donec at nulla congue, luctus 300 | orci sit amet, scelerisque ante. 301 |

302 |

303 | Praesent faucibus, lacus et varius cursus, turpis nibh scelerisque est, 304 | sit amet lacinia sapien metus vitae tellus. 305 |

306 |

307 | Phasellus pellentesque placerat turpis ac semper. Duis ligula enim, 308 | vulputate sed erat vitae, vehicula bibendum turpis. 309 |

310 |

311 | Donec nibh purus, vehicula at mauris volutpat, placerat molestie diam. 312 |

313 |

314 | Mauris tristique posuere ipsum vitae venenatis. Donec ut orci id massa 315 | ullamcorper pulvinar. 316 |

317 |

318 | Morbi pulvinar ante mauris, at sollicitudin lorem molestie sit amet. 319 | Morbi tellus nisi, rutrum ut lectus et, luctus eleifend mi. 320 |

321 |

322 | Quisque felis enim, blandit in convallis in, bibendum non metus. Proin 323 | consectetur ut ante nec malesuada. 324 |

325 |

326 | Pellentesque interdum id metus condimentum varius. Nullam fringilla 327 | lacinia posuere. 328 |

329 |

330 | Morbi pellentesque ante vitae tellus ullamcorper sollicitudin. Proin leo 331 | dolor, molestie quis diam id, tempor ullamcorper diam. 332 |

333 |

334 | Donec sed pulvinar nunc, et posuere purus. Morbi ornare, diam eget 335 | blandit molestie, massa leo sollicitudin nisi. 336 |

337 |

338 | Id tempus ex nisi quis lectus. Etiam laoreet dui est, quis tempus augue 339 | pharetra et. Nullam sed elit turpis. 340 |

341 |

342 | Donec et mi tellus. Aliquam ut interdum dolor. Aliquam dapibus velit non 343 | nunc porttitor finibus. 344 |

345 |

Proin elementum risus et molestie aliquam.

346 |

347 | Phasellus sagittis iaculis nisi at molestie. Aliquam id justo orci. 348 | Aenean cursus nulla sit amet lectus consequat vestibulum. 349 |

350 |

351 | In volutpat neque at egestas pellentesque. Vivamus in viverra eros, non 352 | facilisis mi. 353 |

354 |

355 | Suspendisse sed metus molestie dolor convallis porta eu vitae mauris. 356 | Curabitur pharetra, lorem non tincidunt sollicitudin. 357 |

358 |

359 | Odio tortor consequat nisi, et feugiat lectus odio sit amet nisi. 360 | Curabitur et tempor purus. 361 |

362 |

363 | Maecenas commodo lorem augue, sed varius est maximus auctor. Proin 364 | finibus justo eu ante bibendum mollis. 365 |

366 |

367 | Proin laoreet dapibus lorem a euismod. Integer dignissim eleifend 368 | efficitur. Pellentesque vitae pellentesque nisl. 369 |

370 |

371 | Suspendisse vitae sem vitae risus sollicitudin sagittis ac sed urna. 372 |

373 |

374 | Mauris aliquam erat feugiat ligula faucibus, eu imperdiet ante molestie. 375 |

376 |
377 | 378 | 379 | -------------------------------------------------------------------------------- /demo-html/scroll-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scroll-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - scroll-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/sidetab-customized-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 14 | 15 | 16 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /demo-html/sidetab-customized-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sidetab-customized-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - sidetab-customized-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/sidetab-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 14 | 15 | 16 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /demo-html/sidetab-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sidetab-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - sidetab-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/sidetab-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /demo-html/sidetab-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sidetab-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - sidetab-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/slider-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 8 | 9 | 12 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /demo-html/slider-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slider-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - slider-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/slider-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /demo-html/slider-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slider-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - slider-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/time-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: time (via embed code) 5 | 6 | 7 | 8 |

9 | This sidetab opens in 5 seconds (via embed code) 10 |

11 |

The sidetab is opened automatically after the given time has passed.

12 | 20 | Open the sidetab manually instead 21 | 22 | 23 |

Customize the time

24 |

This can be set on "Share" page as well.

25 |
26 | 27 | 35 | 36 |
37 | 38 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /demo-html/time-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "time-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - time-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/time-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Open: time (via API) 5 | 6 | 7 | 8 |

This sidetab opens in 5 seconds (via API)

9 |

The sidetab is opened automatically after the given time has passed.

10 | 11 |

Customize the time

12 |

This can be set on "Share" page as well.

13 |
14 | 15 | 23 | 24 |
25 | 26 | 27 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /demo-html/time-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "time-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - time-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/transitive-params-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 28 | 29 | 30 |
I have z-index 10k
31 |
37 |
43 | 44 | 45 |
52 | 53 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /demo-html/transitive-params-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "transitive-params-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - transitive-params-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/transitive-params-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 28 | 29 | 30 | 31 |
I have z-index 10k
32 |
33 |
34 | 35 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /demo-html/transitive-params-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "transitive-params-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - transitive-params-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-autoresize/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 27 | 28 | 29 |

30 | Widget with autoResize / data-tf-auto-resize 31 |

32 |

33 | Typeform below will be automatically resized to fit question and avoid 34 | displaying scrollbars. 35 |

36 |

37 | It has limits of minimum height 500px and 38 | maximum height 800px. 39 |

40 |
41 |
48 |
 
 
49 |
50 | 51 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /demo-html/widget-autoresize/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-autoresize", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-autoresize", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-focus/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 24 | 25 | 26 | 27 | 28 |

Auto focus and manual focus()

29 |

30 | You can and then use the 31 | button in top left to focus the typeform (once it looses focus). 32 |

33 | 34 | 35 |
36 |

37 | You can (once it 38 | looses focus). 39 |

40 | 41 | 42 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /demo-html/widget-focus/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-focus", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-focus", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-full-screen-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 21 | 22 | 23 |
I have z-index 10k
24 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /demo-html/widget-full-screen-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-full-screen-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-full-screen-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 27 | 28 | 29 |
I have z-index 10k
30 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /demo-html/widget-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-inline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 15 | 16 | 17 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /demo-html/widget-inline/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-inline", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-inline", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 27 | 28 | 29 | 30 |
I have z-index 10k
31 |
32 | 33 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /demo-html/widget-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-js", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-js", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-lazy-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 50 | 51 | 52 |
form not loaded yet
53 |

There is a widget down below

54 |

55 | The widget is lazy-loaded. It is not loaded yet. It will 56 | be loaded when you scroll to it. 57 |

58 |

59 | When the form is ready the onReady callback will display a console.log 60 | output. Also the status indicator in bottom right will change. 61 |

62 |

More text

63 |

64 | The text here is not relevant. It's only purpose is not make sure the 65 | widget is displayed "below the fold" and not loaded on page load. 66 |

67 |

68 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel turpis 69 | felis. In non dictum libero, quis dictum leo. Maecenas ultrices, felis ut 70 | eleifend mollis, augue leo commodo ipsum, vel congue neque dolor sit amet 71 | tortor. Proin in fermentum risus, id varius felis. Nam ut diam blandit, 72 | pharetra neque quis, convallis erat. Etiam vehicula imperdiet sem 73 | fringilla vehicula. Aliquam erat volutpat. Cras consequat tempor lorem eu 74 | consequat. Sed ut mauris eget metus consequat vehicula sit amet id mi. 75 | Vivamus tellus erat, blandit at cursus eget, imperdiet eu neque. Donec 76 | accumsan nulla et dui placerat, in posuere mi hendrerit. Mauris hendrerit 77 | tempus tempor. Etiam sed odio nibh. 78 |

79 |

80 | In venenatis accumsan nibh, eu scelerisque ex blandit vel. Integer ornare 81 | elementum porta. Fusce tempus quam a risus volutpat, nec bibendum est 82 | fermentum. Etiam vel ornare erat, eu maximus purus. Cras semper odio nec 83 | interdum dictum. Nam sollicitudin, sapien a porttitor molestie, ante 84 | ligula finibus mauris, at vestibulum tellus magna vel nulla. Quisque non 85 | risus lectus. Aliquam interdum convallis sem sit amet euismod. In commodo 86 | nisi et dolor tincidunt, a facilisis lacus dapibus. 87 |

88 |

89 | Nam nec lorem consequat odio fringilla sagittis eu sed nisi. Vestibulum 90 | rutrum magna sit amet eros iaculis elementum. Phasellus vitae erat non 91 | ligula gravida aliquet. Duis dui ante, dictum sit amet neque ut, tristique 92 | bibendum lacus. Nunc eget arcu ac nisi finibus fermentum ac vitae tellus. 93 | Nunc vulputate feugiat quam ut fermentum. Ut vel felis tellus. Nam 94 | tristique ac dui sed luctus. Integer mattis non odio nec facilisis. Nullam 95 | cursus ligula tortor. Pellentesque bibendum, mauris eget ultrices egestas, 96 | orci lorem dictum ante, ut semper sem ante sit amet velit. Donec in 97 | accumsan purus, viverra tincidunt eros. Pellentesque est neque, faucibus a 98 | magna quis, dignissim ultricies lacus. Nullam commodo lorem sed quam 99 | congue congue. 100 |

101 |

102 | Duis nisi tortor, ornare in nisi nec, dictum dapibus metus. Proin eu 103 | porttitor ex. In nec aliquet erat, ut placerat lorem. Ut molestie ligula 104 | et efficitur sodales. Nam sollicitudin, massa ac imperdiet dapibus, enim 105 | nisi pretium libero, id sagittis dui quam hendrerit nulla. Suspendisse 106 | pharetra nibh sed nulla bibendum, sit amet vestibulum nisi faucibus. Nulla 107 | nec dignissim ante. 108 |

109 |

110 | Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce 111 | lacinia nunc augue, ac consequat diam sagittis et. In eget urna tristique, 112 | elementum lacus sed, scelerisque justo. Ut et erat nisl. Curabitur 113 | dignissim ante vel massa aliquam dapibus. Nullam in leo libero. In hac 114 | habitasse platea dictumst. Donec sit amet purus orci. Suspendisse laoreet, 115 | velit nec varius mattis, magna orci venenatis odio, ut pharetra nulla nisl 116 | eu ligula. 117 |

118 |

The widget is here

119 |
126 | 127 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /demo-html/widget-lazy-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-lazy-html", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-lazy-html", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-sandbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 14 | 15 | 16 |

Sandbox Typefom

17 |

Submissions are disabled for this form.

18 |
24 | 25 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /demo-html/widget-sandbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-sandbox", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-sandbox", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-html/widget-theme/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Static HTML Demo 7 | 31 | 32 | 33 |
I have z-index 10k
34 | 35 |
36 | 37 | 38 |

Demonstrate popup with transparent background

39 | 40 |

41 | Widget can have transparent background. This is fine on desktop. On mobile 42 | devices it opens as popup and needs opaque background to hide content 43 | below it. 44 |

45 | 46 |

47 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus eu 48 | ligula eget bibendum. Etiam porta accumsan lectus ac commodo. Fusce 49 | sodales tortor a imperdiet dapibus. Sed leo massa, vulputate eget maximus 50 | et, elementum et purus. Phasellus odio lectus, imperdiet ut pretium in, 51 | dictum sed libero. Nullam pellentesque, nisl in ornare dapibus, libero dui 52 | lobortis tellus, sed blandit lectus lacus quis ante. Morbi rhoncus mollis 53 | diam, sit amet fermentum lorem gravida at. 54 |

55 | 56 |

57 | Donec magna quam, vulputate id nunc aliquet, egestas eleifend sem. Sed ac 58 | arcu id eros pulvinar tempor. Curabitur non tellus ac nisi feugiat tempor 59 | eu gravida dolor. Maecenas sed risus metus. In massa turpis, tempus et 60 | tellus interdum, vestibulum tincidunt libero. 61 |

62 | 63 |

64 | Aliquam vitae nunc eu diam elementum interdum a in lacus. In ultrices 65 | vestibulum libero sit amet aliquet. In consectetur nulla purus, at 66 | tincidunt mi condimentum eget. Etiam ut ex augue. Donec et venenatis nisi. 67 | Fusce venenatis ultricies sollicitudin. Nam lectus lacus, porta et nibh 68 | sed, convallis condimentum metus. 69 |

70 | 71 | 72 | -------------------------------------------------------------------------------- /demo-html/widget-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "widget-theme", 3 | "license": "MIT", 4 | "description": "Embed SDK Demo - widget-theme", 5 | "version": "1.0.0", 6 | "main": "index.html", 7 | "scripts": { 8 | "start": "parcel index.html --open", 9 | "build": "parcel build index.html" 10 | }, 11 | "dependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "7.2.0" 16 | }, 17 | "resolutions": { 18 | "@babel/preset-env": "7.13.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo-nextjs/app/app-menu.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { useSearchParams } from 'next/navigation' 4 | 5 | import { Menu } from '../shared/menu' 6 | import { defaultFormId } from '../shared/constants' 7 | 8 | export const AppMenu = () => { 9 | const query = useSearchParams() 10 | return 11 | } 12 | -------------------------------------------------------------------------------- /demo-nextjs/app/app/popup/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { Popover, PopupButton } from '@typeform/embed-react' 4 | import { useSearchParams } from 'next/navigation' 5 | 6 | import { defaultFormId } from '../../../shared/constants' 7 | 8 | const handleOnReady = () => { 9 | // eslint-disable-next-line no-console 10 | console.log('form in popover ready') 11 | } 12 | 13 | export default function Page() { 14 | const searchParams = useSearchParams() 15 | const id = searchParams?.get('id') ?? defaultFormId 16 | 17 | const buttonStyle = { 18 | padding: '10px 20px', 19 | borderRadius: 10, 20 | border: 'none', 21 | background: 'navy', 22 | color: 'white', 23 | fontSize: 16, 24 | cursor: 'pointer', 25 | } 26 | 27 | return ( 28 |
29 |

All embed types <3 Next.js version >= 13

30 | 31 |

32 | 44 |

45 | 46 |
58 | ) 59 | } 60 | -------------------------------------------------------------------------------- /demo-nextjs/app/app/widget/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { Widget } from '@typeform/embed-react' 4 | import { useSearchParams } from 'next/navigation' 5 | 6 | import { defaultFormId } from '../../../shared/constants' 7 | 8 | export default function Page() { 9 | const searchParams = useSearchParams() 10 | const widgetContainerStyle = { 11 | width: 500, 12 | height: 400, 13 | margin: '20px auto', 14 | } 15 | 16 | return ( 17 |
18 |

Embed widget <3 Next.js version <= 13

19 | 20 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /demo-nextjs/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Suspense } from 'react' 2 | 3 | import { AppMenu } from './app-menu' 4 | import '../shared/globals.css' 5 | 6 | export default function AppLayout({ children }: { children: React.ReactNode }) { 7 | return ( 8 | 9 | 10 |

11 | This is an example Next.js app with{' '} 12 | App Router. 13 |

14 | 15 | 16 | {children} 17 | 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /demo-nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. 7 | -------------------------------------------------------------------------------- /demo-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-nextjs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "yarn next dev -p 9090", 7 | "lint": "yarn eslint --ignore-path ../../.gitignore .", 8 | "clean": "rm -rf ./.next", 9 | "build": "next build" 10 | }, 11 | "dependencies": { 12 | "@typeform/embed": "5.5.0", 13 | "@typeform/embed-react": "4.6.0", 14 | "next": "^15.0.3", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^22.10.0", 20 | "@types/react": "^18.3.3", 21 | "@types/react-dom": "^18.3.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo-nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | import { AppProps } from 'next/app' 3 | 4 | import '../shared/globals.css' 5 | import { Menu } from '../shared/menu' 6 | import { defaultFormId } from '../shared/constants' 7 | 8 | export default function MyApp({ Component, pageProps }: AppProps) { 9 | const router = useRouter() 10 | const formId = router.query?.id ?? defaultFormId 11 | return ( 12 | <> 13 |

14 | This is an example Next.js app with{' '} 15 | Pages Router. 16 |

17 | 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /demo-nextjs/pages/forward-ref.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | import { PopupButton, GenericEmbed } from '@typeform/embed-react' 3 | 4 | export default function PopupPage({ id }: { id: string }) { 5 | const buttonStyle = { 6 | padding: '10px 20px', 7 | borderRadius: 10, 8 | border: 'none', 9 | background: 'navy', 10 | color: 'white', 11 | fontSize: 16, 12 | cursor: 'pointer', 13 | } 14 | const ref = useRef() 15 | 16 | return ( 17 |
18 |

Embed popup with forwarded ref <3 Next.js

19 | 20 |

21 | 28 | 29 | ️✅ 30 | 31 | open popup 32 | 33 |

34 | 35 |

36 | 39 |

40 |
41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /demo-nextjs/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { Widget } from '@typeform/embed-react' 2 | 3 | export default function HomePage({ id }: { id: string }) { 4 | const widgetContainerStyle = { 5 | width: 500, 6 | height: 400, 7 | margin: '20px auto', 8 | } 9 | 10 | return ( 11 |
12 |

Embed widget <3 Next.js

13 | 14 |
23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /demo-nextjs/pages/popover.tsx: -------------------------------------------------------------------------------- 1 | import { Popover } from '@typeform/embed-react' 2 | 3 | const handleOnReady = () => { 4 | // eslint-disable-next-line no-console 5 | console.log('form ready') 6 | } 7 | 8 | export default function PopoverPage({ id }: { id: string }) { 9 | return ( 10 |
11 |

Embed popover <3 Next.js

12 | 13 |
25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /demo-nextjs/pages/popup.tsx: -------------------------------------------------------------------------------- 1 | import { PopupButton } from '@typeform/embed-react' 2 | 3 | export default function PopupPage({ id }: { id: string }) { 4 | const buttonStyle = { 5 | padding: '10px 20px', 6 | borderRadius: 10, 7 | border: 'none', 8 | background: 'navy', 9 | color: 'white', 10 | fontSize: 16, 11 | cursor: 'pointer', 12 | } 13 | 14 | return ( 15 |
16 |

Embed popup <3 Next.js

17 | 18 |

19 | 31 |

32 |
33 | ) 34 | } 35 | -------------------------------------------------------------------------------- /demo-nextjs/pages/sidetab.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | import { GenericEmbed, Sidetab } from '@typeform/embed-react' 3 | 4 | export default function SidetabPage({ id }: { id: string }) { 5 | const sidetabRef = useRef() 6 | 7 | return ( 8 |
9 |

Embed sidetab <3 Next.js

10 | 11 |
24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /demo-nextjs/pages/slider.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | import { GenericEmbed, SliderButton } from '@typeform/embed-react' 3 | 4 | export default function Slider({ id }: { id: string }) { 5 | const sliderRef = useRef() 6 | 7 | const buttonStyle = { 8 | padding: '10px 20px', 9 | borderRadius: 4, 10 | border: 'none', 11 | background: 'lightgray', 12 | color: 'black', 13 | fontSize: 16, 14 | cursor: 'pointer', 15 | } 16 | 17 | return ( 18 |
19 |

Embed slider <3 Next.js

20 | 21 |

22 | 31 |

32 | 33 |

34 | 35 | open slider (small from left) 36 | 37 |

38 | 39 |

40 | Or you can{' '} 41 | to 42 | open the slider (right) programmatically via ref. 43 |

44 |
45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /demo-nextjs/pages/vanilla.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react' 2 | import { createPopup, createWidget } from '@typeform/embed' 3 | 4 | import '@typeform/embed/build/css/popup.css' 5 | import '@typeform/embed/build/css/widget.css' 6 | 7 | // with @typeform/embed-react lib this component could be as short as 8 | const Widget = ({ id }: { id: string }) => { 9 | const containerRef = useRef(null) 10 | 11 | const widgetContainerStyle = { 12 | width: 500, 13 | height: 400, 14 | margin: '20px auto', 15 | } 16 | 17 | useEffect(() => { 18 | if (containerRef.current) { 19 | createWidget(id, { 20 | container: containerRef.current, 21 | medium: 'demo-test', 22 | transitiveSearchParams: ['foo', 'bar'], 23 | hidden: { foo: 'foo value', bar: 'bar value' }, 24 | tracking: { utm_medium: 'fb', tracking: 'bar value' }, 25 | }) 26 | } 27 | }, [id]) 28 | 29 | return
30 | } 31 | 32 | // with @typeform/embed-react lib this component could be as short as click 33 | const PopupButton = ({ id }: { id: string }) => { 34 | const openPopup = () => { 35 | createPopup(id, { 36 | medium: 'demo-test', 37 | hidden: { foo: 'foo value', bar: 'bar value' }, 38 | }).open() 39 | } 40 | 41 | return ( 42 |

43 | 46 |

47 | ) 48 | } 49 | 50 | export default function Popup({ id }: { id: string }) { 51 | return ( 52 |
53 |

Embed vanilla JavaScript library <3 React and Next.js too

54 | 55 | 56 | 57 | 58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /demo-nextjs/pages/widget-eu.tsx: -------------------------------------------------------------------------------- 1 | import { Widget } from '@typeform/embed-react' 2 | 3 | import { defaultFormIdEURegion } from '../shared/constants' 4 | 5 | export default function HomePage() { 6 | const widgetContainerStyle = { 7 | width: 500, 8 | height: 400, 9 | margin: '20px auto', 10 | } 11 | 12 | return ( 13 |
14 |

Embed widget <3 Next.js

15 | 16 |
26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /demo-nextjs/shared/constants.ts: -------------------------------------------------------------------------------- 1 | export const defaultFormId = 'HLjqXS5W' 2 | export const defaultFormIdEURegion = 'fsP70kdi' 3 | -------------------------------------------------------------------------------- /demo-nextjs/shared/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 4 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 5 | } 6 | 7 | a { 8 | color: blue; 9 | text-decoration: underline; 10 | cursor: pointer; 11 | } 12 | 13 | * { 14 | box-sizing: border-box; 15 | } 16 | 17 | .menu { 18 | border-top: 1px #aaa solid; 19 | border-bottom: 1px #aaa solid; 20 | padding: 10px 0; 21 | margin: 16px 0; 22 | } 23 | 24 | .menu a { 25 | display: inline-block; 26 | margin: 0 10px; 27 | } 28 | -------------------------------------------------------------------------------- /demo-nextjs/shared/menu.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | export const Menu = ({ id }: { id: string }) => { 4 | const links: Record = { 5 | '/': 'widget', 6 | '/widget-eu': 'widget (EU region)', 7 | '/popup': 'popup', 8 | '/slider': 'slider', 9 | '/sidetab': 'sidetab', 10 | '/popover': 'popover', 11 | '/vanilla': 'vanilla library in react', 12 | '/forward-ref': 'forward ref', 13 | '/app/widget': 'widget (app)', 14 | '/app/popup': 'popup (app)', 15 | } 16 | 17 | return ( 18 |
19 | {Object.keys(links).map((path) => ( 20 | 21 | {links[path]} 22 | 23 | ))} 24 |
25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /demo-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "allowUnreachableCode": false, 6 | "skipLibCheck": true, 7 | "strict": false, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "noImplicitAny": true, 11 | "incremental": true, 12 | "module": "esnext", 13 | "esModuleInterop": true, 14 | "moduleResolution": "node", 15 | "resolveJsonModule": true, 16 | "isolatedModules": true, 17 | "jsx": "preserve", 18 | "plugins": [ 19 | { 20 | "name": "next" 21 | } 22 | ], 23 | "strictNullChecks": true, 24 | "target": "ES2017" 25 | }, 26 | "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "embed-demo", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "repository": "git@github.com:Typeform/embed-demo.git", 6 | "author": "Max Prilutskiy ", 7 | "license": "MIT", 8 | "dependencies": { 9 | "fs-extra": "^10.1.0", 10 | "replace-in-files": "^3.0.0" 11 | }, 12 | "devDependencies": { 13 | "@typeform/eslint-config": "^3.0.2", 14 | "eslint": "^7.16.0", 15 | "husky": ">=6", 16 | "lint-staged": ">=10", 17 | "prettier": "^2.5.0", 18 | "typescript": "^5.7.2" 19 | }, 20 | "lint-staged": { 21 | "*.{js,md}": [ 22 | "prettier --write" 23 | ], 24 | "*.js": [ 25 | "eslint --fix" 26 | ] 27 | }, 28 | "prettier": "@typeform/eslint-config/prettier", 29 | "scripts": { 30 | "prepare": "husky install", 31 | "lint": "eslint --fix . && prettier --write .", 32 | "deploy": "node scripts/deploy-codesandbox.js" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scripts/deploy-codesandbox.js: -------------------------------------------------------------------------------- 1 | const process = require('process') 2 | const fs = require('fs') 3 | const path = require('path') 4 | 5 | const fse = require('fs-extra') 6 | const replaceInFiles = require('replace-in-files') 7 | 8 | const thisRepoRootDir = path.resolve(__dirname, '..') 9 | const embedRepoPackagesDir = path.resolve( 10 | __dirname, 11 | '..', 12 | '..', 13 | 'embed', 14 | 'packages' 15 | ) 16 | 17 | const demoHtmlDirName = 'demo-html' 18 | const demoNextDirName = 'demo-nextjs' 19 | 20 | const originDemoHtmlDir = path.resolve(embedRepoPackagesDir, demoHtmlDirName) 21 | const destDemoHtmlDir = path.resolve(thisRepoRootDir, demoHtmlDirName) 22 | const destDemoHtmlPublicDir = path.join(destDemoHtmlDir, 'public') 23 | const originDemoNextDir = path.resolve(embedRepoPackagesDir, demoNextDirName) 24 | const destDemoNextDir = path.resolve(thisRepoRootDir, demoNextDirName) 25 | 26 | const readmeFilePath = path.resolve(thisRepoRootDir, 'README.md') 27 | 28 | const removeUnusedFilesHtml = (dir) => { 29 | const files = ['package.json', 'README.md', 'CHANGELOG.md', 'public/lib'] 30 | files.forEach((file) => fse.removeSync(path.join(dir, file))) 31 | } 32 | 33 | const removeUnusedFilesNextJs = (dir) => { 34 | const files = ['node_modules', 'README.md', 'CHANGELOG.md', '.next', 'public'] 35 | files.forEach((file) => fse.removeSync(path.join(dir, file))) 36 | } 37 | 38 | const buildDemoHtml = async (dir) => { 39 | fs.readdirSync(dir) 40 | .filter((file) => fs.statSync(path.join(dir, file)).isDirectory()) 41 | .forEach((dirName) => { 42 | const innerDir = path.join(dir, dirName) 43 | fse.copySync(innerDir, dir) 44 | fse.removeSync(innerDir) 45 | }) 46 | 47 | const newDir = path.resolve(dir, '..') 48 | fse.copySync(dir, newDir) 49 | fse.removeSync(dir) 50 | 51 | const filesGlob = './**/*.html' 52 | 53 | await replaceInFiles({ 54 | files: filesGlob, 55 | from: /\.+\/lib\/embed\.js/g, 56 | to: '//embed.typeform.com/next/embed.js', 57 | }) 58 | 59 | await replaceInFiles({ 60 | files: filesGlob, 61 | from: /\.+\/lib\/css\//g, 62 | to: '//embed.typeform.com/next/css/', 63 | }) 64 | 65 | const demoNames = [] 66 | 67 | fs.readdirSync(newDir).forEach((fileName) => { 68 | const dirName = path.parse(fileName).name 69 | const finalDir = path.join(newDir, dirName) 70 | const oldDir = path.join(newDir, fileName) 71 | const fileFinalDir = path.join(newDir, dirName, fileName) 72 | 73 | demoNames.push(dirName) 74 | 75 | fse.ensureDirSync(finalDir) 76 | fse.moveSync(oldDir, fileFinalDir) 77 | fs.renameSync(fileFinalDir, path.join(finalDir, 'index.html')) 78 | 79 | const json = { 80 | name: dirName, 81 | license: 'MIT', 82 | description: `Embed SDK Demo - ${dirName}`, 83 | version: '1.0.0', 84 | main: 'index.html', 85 | scripts: { 86 | start: 'parcel index.html --open', 87 | build: 'parcel build index.html', 88 | }, 89 | dependencies: { 'parcel-bundler': '^1.6.1' }, 90 | devDependencies: { 91 | '@babel/core': '7.2.0', 92 | }, 93 | resolutions: { 94 | '@babel/preset-env': '7.13.8', 95 | }, 96 | } 97 | 98 | fse.writeJsonSync(path.join(finalDir, 'package.json'), json) 99 | }) 100 | 101 | return demoNames 102 | } 103 | 104 | const writeReadmeFile = (demoHtmlNames) => { 105 | fse.removeSync(readmeFilePath) 106 | 107 | fs.writeFileSync( 108 | readmeFilePath, 109 | `# CodeSandbox demos 110 | 111 | Demos for [@typeform/embed](https://github.com/Typeform/embed). 112 | 113 | ## HTML 114 | 115 | ${demoHtmlNames 116 | .map( 117 | (name, index) => 118 | `${ 119 | index + 1 120 | }. [${name}](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/${demoHtmlDirName}/${name})` 121 | ) 122 | .join('\n')} 123 | 124 | ## React (NextJS) 125 | 126 | [React app](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-nextjs) 127 | 128 | ## Dev notes 129 | 130 | Do not edit this README file or any of the \`demo-\` directories manually. They are generated automatically by [github action](https://github.com/Typeform/embed-demo/blob/main/.github/workflows/update-demos.yml) using [\`yarn deploy\` script](https://github.com/Typeform/embed-demo/blob/main/scripts/deploy-codesandbox.js). 131 | ` 132 | ) 133 | } 134 | 135 | async function main() { 136 | fse.removeSync(destDemoHtmlDir) 137 | fse.ensureDirSync(destDemoHtmlDir) 138 | 139 | fse.removeSync(destDemoNextDir) 140 | fse.ensureDirSync(destDemoNextDir) 141 | 142 | fse.copySync(originDemoHtmlDir, destDemoHtmlDir) 143 | fse.copySync(originDemoNextDir, destDemoNextDir) 144 | 145 | process.chdir(thisRepoRootDir) 146 | 147 | removeUnusedFilesHtml(destDemoHtmlDir) 148 | removeUnusedFilesNextJs(destDemoNextDir) 149 | 150 | const demoHtmlNames = await buildDemoHtml(destDemoHtmlPublicDir) 151 | 152 | writeReadmeFile(demoHtmlNames) 153 | } 154 | 155 | main() 156 | -------------------------------------------------------------------------------- /sonar-project.properties: -------------------------------------------------------------------------------- 1 | sonar.projectKey=Typeform_embed-demo 2 | sonar.organization=typeform 3 | 4 | sonar.inclusions=packages/*/src/**/*.ts,src/**/*.js 5 | sonar.exclusions=node_modules/**,dist/**,**/*.spec.ts,**/*.test.ts 6 | 7 | sonar.test.exclusions=node_modules/**,dist/** --------------------------------------------------------------------------------