Skip to content

Commit c1a8627

Browse files
author
Matej Lednicky
committed
fix(DIST-193): Fix for autoOpen backward compatibility
Also add docs for behavioral triggers functionality.
1 parent e295c2b commit c1a8627

File tree

5 files changed

+30
-14
lines changed

5 files changed

+30
-14
lines changed

‎README.md

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ typeformEmbed.makeWidget(element, url, options)
5757
| hideFooter | Hide typeform footer, that appears showing the progress bar and the navigation buttons. | `Boolean` | false |
5858
| hideHeaders | Hide typeform header, that appears when you have a Question group, or a long question that you need to scroll through to answer, like a Multiple Choice block. | `Boolean` | false |
5959
| onSubmit | Callback function that will be executed right after the typeform is successfully submitted. | `Function` | - |
60-
| onReady | Callback function that will be executed once the typeform is ready. | `Function` | - |
60+
| onReady | Callback function that will be executed once the typeform is ready. | `Function` | - |
6161

6262
#### Example:
6363

@@ -95,27 +95,33 @@ typeformEmbed.makePopup(url, options)
9595

9696
| option | description | values | default |
9797
|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------|---------|
98-
| mode | ![typeform Embed Popup modes](/documentation/popup.png) <br/> The way of showing the embed | `String` any of: <br/> `"popup"` <br/> `"drawer_left"` <br/> `"drawer_right"` | "popup" |
99-
| autoOpen | Your typeform will launch as soon as your web page is opened | `Boolean` | false |
100-
| autoClose | Time until the embedded typeform will automatically close after a respondent clicks the Submit button. The default time is 5 seconds. PRO+ users can change the `autoClose` time. | `Number` (seconds) | - |
98+
| mode | The way of showing the popup | `String` any of: <br/> `"popup"` <br/> `"drawer_left"` <br/> `"drawer_right"` <br/> `"side-panel"` <br/> `"popover"` | "popup" |
99+
| ❌ autoOpen | Your typeform will launch as soon as your web page is opened **Deprecated:** Use `open: "load"` instead | `Boolean` | false |
100+
| 💡 open | Your typeform will launch based on behavioral triggers | `String` any of: <br/> `"exit"` <br/> `"load"` <br/> `"scroll"` <br/> `"time"`| null |
101+
| 💡 openValue | Configuration for behavioral triggers. Based on `open`: <br/> - `"exit"`: exit threshold in pixels <br/> - `"scroll"`: % of page scrolled <br/> * `"time"`: time in milliseconds | `Number` | null |
102+
| autoClose | Time until the embedded typeform will automatically close after a respondent clicks the Submit button. The default time is 5 seconds. PRO+ users can change the `autoClose` time. | `Number` (seconds) | - |
101103
| hideScrollbars | Hide fixed scrollbars. | `Boolean` | false |
102104
| hideFooter | Hide typeform footer, that appears showing the progress bar and the navigation buttons. | `Boolean` | false |
103105
| hideHeaders | Hide typeform header, that appears when you have a Question group, or a long question that you need to scroll through to answer, like a Multiple Choice block. | `Boolean` | false |
104-
| drawerWidth | Specify the width of the drawer (only applies if using `mode` `"drawer_left"` or `"drawer_right"`). | `Number` (pixels) | 800 |
106+
| drawerWidth | Specify the width of the drawer (only applies if using `mode` `"drawer_left"` or `"drawer_right"`). | `Number` (pixels) | 800 |
105107
| onSubmit | Callback function that will be executed right after the typeform is successfully submitted. | `Function` | - |
106-
| onReady | Callback function that will be executed once the typeform is ready. |
107-
`Function` | - |
108-
| onClose | Callback function that will be executed once the typeform is closed. |
109-
`Function` | - |
108+
| onReady | Callback function that will be executed once the typeform is ready. | `Function` | - |
109+
| onClose | Callback function that will be executed once the typeform is closed. | `Function` | - |
110110

111-
#### Example:
111+
Types:
112+
113+
- ❌ Deprecated option. Will be removed in future.
114+
- 💡 Experimental option. Implementation might change in future without prior notice. Use at your own risk.
115+
116+
#### Example:
112117

113118
```js
114119
typeformEmbed.makePopup(
115120
'https://admin.typeform.com/to/PlBzgL',
116121
{
117122
mode: 'drawer_left',
118-
autoOpen: true,
123+
open: 'scroll',
124+
openValue: 30,
119125
autoClose: 3,
120126
hideScrollbars: true,
121127
onSubmit: function () {

‎documentation/popup.png

-5.44 KB
Binary file not shown.

‎src/core/attributes.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ const sanitizePopupAttributes = data => {
4444
obj.autoClose = submitCloseDelay
4545
}
4646

47+
if (data.autoOpen === '' || data.autoOpen === 'true') {
48+
obj.autoOpen = true
49+
}
50+
4751
if (data.hideHeaders === '' || data.hideHeaders === 'true') {
4852
obj.hideHeaders = true
4953
}
@@ -59,8 +63,6 @@ const sanitizePopupAttributes = data => {
5963
if (data.open) {
6064
obj.open = data.open
6165
obj.openValue = data.openValue
62-
} else if (data.autoOpen === '' || data.autoOpen === 'true') { // legacy auto-open attribute
63-
obj.open = 'load'
6466
}
6567

6668
return obj

‎src/core/attributes.spec.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,18 @@ describe('Attributes', () => {
1111
popupMockElem.setAttribute('data-mode', 'popup')
1212
popupMockElem.setAttribute('data-submit-close-delay', 10)
1313
popupMockElem.setAttribute('data-auto-open', true)
14+
popupMockElem.setAttribute('data-open', 'scroll')
15+
popupMockElem.setAttribute('data-open-value', 20)
1416
popupMockElem.setAttribute('data-hide-headers', '')
1517
popupMockElem.setAttribute('data-hide-footer', false)
1618
popupMockElem.setAttribute('data-invalid-attribute', true)
1719

1820
const popupOptions = {
1921
mode: 'popup',
2022
autoClose: 10,
21-
open: 'load',
23+
autoOpen: true,
24+
open: 'scroll',
25+
openValue: '20',
2226
hideHeaders: true
2327
}
2428

‎src/core/make-popup.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,10 @@ export default function makePopup (url, options) {
131131
}
132132
}
133133

134+
if (!options.open && options.autoOpen) { // legacy auto-open attribute
135+
options.open = 'load'
136+
}
137+
134138
handleAutoOpen(popup, options.open, options.openValue)
135139

136140
return popup

0 commit comments

Comments
 (0)