Skip to content

Commit

Permalink
feat(TU-13163): Update developer portal onDuplicateDetected docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@gierlas
gierlas committed Aug 26, 2024
1 parent eef9336 commit 0b27eda
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 3 deletions.
32 changes: 32 additions & 0 deletions docs/callbacks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -246,6 +247,37 @@ Or in HTML:
</script>
```

## 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('<form-id>', {
onDuplicateDetected: ({ formId }) => {
console.log(`Duplicate detected for form ${formId}`)
},
})
```

Or in HTML:

```html
<button data-tf-slider="<form-id>" data-tf-on-duplicate-detected="duplicateDetected">open</button>
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
// this function needs to be available on global scope (window)
function duplicateDetected({ formId }) {
console.log(`Duplicate detected for form ${formId}`)
}
</script>
```

## What's next?

Learn more about [contributing](/embed/contribute), or see what other open-source developers have created on the [Community projects](/community/) page.
3 changes: 2 additions & 1 deletion docs/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) |
Expand Down Expand Up @@ -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` |
Expand Down
4 changes: 2 additions & 2 deletions packages/embed/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down Expand Up @@ -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 = () => {
Expand Down
3 changes: 3 additions & 0 deletions packages/embed/src/initializers/build-options-from-attributes.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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)
Expand All @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/embed/src/initializers/build-options-from-attributes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const buildOptionsFromAttributes = (element: HTMLElement) => {
onSubmit: 'function',
onQuestionChanged: 'function',
onHeightChanged: 'function',
onDuplicateDetected: 'function',
autoResize: 'stringOrBoolean',
onClose: 'function',
onEndingButtonClick: 'function',
Expand Down

0 comments on commit 0b27eda

Please sign in to comment.