diff --git a/docs/callbacks.md b/docs/callbacks.md index 03d3ac82..64a2a610 100644 --- a/docs/callbacks.md +++ b/docs/callbacks.md @@ -17,6 +17,7 @@ Available callbacks: - **onQuestionChanged** fires when user navigates between form questions - **onHeightChanged** fires when height of currently displayed question changes - **onEndingButtonClick** fires when user clicks on the button on your typeform ending screen (it also disables the redirect functionality) +- **onDuplicateDetected** fires when the respondent reaches the quota of responses defined in [the duplicate prevention setting](https://www.typeform.com/help/a/prevent-duplicate-responses-27917825492244/) Each callback receives a payload object with `formId` to identify the typeform that sent the event. Depending on the callback there might be more data in the payload - see examples below. @@ -246,6 +247,37 @@ Or in HTML: ``` +## onDuplicateDetected + +The `onDuplicateDetected` callback will execute whenever we detect the respondent reached the quota of responses +defined in [the duplicate prevention setting](https://www.typeform.com/help/a/prevent-duplicate-responses-27917825492244/). + +In JavaScript: + +```javascript +import { createSlider } from '@typeform/embed' +import '@typeform/embed/build/css/slider.css' + +createSlider('', { + onDuplicateDetected: ({ formId }) => { + console.log(`Duplicate detected for form ${formId}`) + }, +}) +``` + +Or in HTML: + +```html + + + +``` + ## What's next? Learn more about [contributing](/embed/contribute), or see what other open-source developers have created on the [Community projects](/community/) page. diff --git a/docs/configuration.md b/docs/configuration.md index 7de455b8..e58dfe07 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -33,7 +33,7 @@ If you embed via HTML, you need to pass optinos as attributes with `data-tf-` pr `options` is an object with optional properties: | name | type | description | default | -| ---------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | +| ---------------------- | ---------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------------- | | container | HTMLElement | specify element to place the embed into, only for widget, required | current element when embedding as HTML, otherwise `undefined` | | position | string | slider position: `right` or `left` | `right` | | size | number | size of the popup in percentage | `100` (100% size, fullscreen popup) | @@ -67,6 +67,7 @@ If you embed via HTML, you need to pass optinos as attributes with `data-tf-` pr | onQuestionChanged | function | fires when user navigates between form questions | `undefined` | | onHeightChanged | function | fires when form question height changes (eg. on navigation between questions or on error message) | `undefined` | | onEndingButtonClick | function | fires when button on ending screen is clicked | `undefined` | +| onDuplicateDetected | function | fires when the respondent reaches the quota of responses defined in [the duplicate prevention setting](https://www.typeform.com/help/a/prevent-duplicate-responses-27917825492244/) | `undefined` | | autoResize | string / boolean | resize form to always fit the displayed question height, avoid scrollbars in the form (inline widget only), set min and max height separated by coma, eg. `"200,600"` | `false` | | shareGaInstance | string / boolean | shares Google Analytics instance of the host page with embedded typeform, you can provide your Google Analytics ID to specify which instance to share (if you have more than one in your page) | `false` | | inlineOnMobile | boolean | removes placeholder welcome screen in mobile and makes form show inline instead of fullscreen | `false` | diff --git a/packages/embed/README.md b/packages/embed/README.md index 5c620a0e..924e5dd8 100644 --- a/packages/embed/README.md +++ b/packages/embed/README.md @@ -159,7 +159,7 @@ Closing and opening a typeform in modal window will restart the progress from th | [onQuestionChanged](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/callbacks) | function | fires when user navigates between form questions | `undefined` | | [onHeightChanged](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/callbacks) | function | fires when form question height changes (eg. on navigation between questions or on error message) | `undefined` | | [onEndingButtonClick](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/callbacks) | function | fires when button on ending screen is clicked, disables button redirect functionality | `undefined` | -| onDuplicateDetected | function | fires when the responder reaches the quota of submission defined in the duplicate prevention setting | `undefined` | +| onDuplicateDetected | function | fires when the respondent reaches the quota of responses defined in [the duplicate prevention setting](https://www.typeform.com/help/a/prevent-duplicate-responses-27917825492244/) | `undefined` | | [autoResize](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-autoresize) | string / boolean | resize form to always fit the displayed question height, avoid scrollbars in the form (inline widget only), set min and max height separated by coma, eg. `"200,600"` | `false` | | [shareGaInstance](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-inline) | string / boolean | shares Google Analytics instance of the host page with embedded typeform, you can provide your Google Analytics ID to specify which instance to share (if you have more than one in your page) | `false` | | [inlineOnMobile](https://codesandbox.io/s/github/Typeform/embed-demo/tree/main/demo-html/widget-inline) | boolean | removes placeholder welcome screen in mobile and makes form show inline instead of fullscreen | `false` | @@ -258,7 +258,7 @@ You can listen to form events by providing callback methods: console.log(`Ending button clicked in end screen ${ref}`) }, onDuplicateDetected: ({ formId }) => { - console.log(`User already reached the quote of submission for form ${formId}`) + console.log(`User reached the quote of responses for form ${formId}`) } }) document.querySelector('#btn').click = () => { diff --git a/packages/embed/src/initializers/build-options-from-attributes.spec.ts b/packages/embed/src/initializers/build-options-from-attributes.spec.ts index c6de0231..f786084a 100644 --- a/packages/embed/src/initializers/build-options-from-attributes.spec.ts +++ b/packages/embed/src/initializers/build-options-from-attributes.spec.ts @@ -17,6 +17,7 @@ describe('build-options-from-attributes', () => { data-tf-on-submit="onTypeformSubmit" data-tf-on-question-changed="onTypeformQuestionChanged" data-tf-on-height-changed="onTypeformHeightChanged" + data-tf-on-duplicate-detected="onDuplicateDetected" data-tf-auto-resize="100,300" data-tf-open="exit" data-tf-open-value="3000" @@ -45,6 +46,7 @@ describe('build-options-from-attributes', () => { win.onTypeformSubmit = jest.fn() win.onTypeformQuestionChanged = jest.fn() win.onTypeformHeightChanged = jest.fn() + win.onDuplicateDetected = jest.fn() const element = wrapper.querySelector('#element') as HTMLElement const options = buildOptionsFromAttributes(element) @@ -62,6 +64,7 @@ describe('build-options-from-attributes', () => { onSubmit: win.onTypeformSubmit, onQuestionChanged: win.onTypeformQuestionChanged, onHeightChanged: win.onTypeformHeightChanged, + onDuplicateDetected: win.onDuplicateDetected, autoResize: '100,300', open: 'exit', openValue: 3000, diff --git a/packages/embed/src/initializers/build-options-from-attributes.ts b/packages/embed/src/initializers/build-options-from-attributes.ts index 4d474e50..aaf9f097 100644 --- a/packages/embed/src/initializers/build-options-from-attributes.ts +++ b/packages/embed/src/initializers/build-options-from-attributes.ts @@ -18,6 +18,7 @@ export const buildOptionsFromAttributes = (element: HTMLElement) => { onSubmit: 'function', onQuestionChanged: 'function', onHeightChanged: 'function', + onDuplicateDetected: 'function', autoResize: 'stringOrBoolean', onClose: 'function', onEndingButtonClick: 'function',