Events
Events
The widget reports what happens on your page so you can react to it, for example to hide a promo banner when the survey opens or to send a completed response to your analytics.
Two ways to listen
With the command queue:
rawquotes('on', 'completed', function (detail) {
console.log(detail.responseId)
})
Or with a DOM event on the widget's host element, [data-rawquotes]. The payload is event.detail.
These events do not bubble, so listen on the element itself:
document.querySelector('[data-rawquotes]').addEventListener('completed', function (event) {
console.log(event.detail.responseId)
})
Register on listeners before init. There is no way to remove a listener. A listener that throws is
ignored and never breaks the widget.
Every payload also carries schemaVersion: 1, which is left out of the table below.
All events
| Event | When | Payload | Mode |
|---|---|---|---|
ready | The widget is mounted, before the survey loads. | { scriptVersion } | both |
launcher_ready | show and hide start working. Once per mount. | { surveyId, survey } | floating |
opened | The card opens (tap, autoOpen, show). | {} | floating |
rendered | The first question is drawn. In floating mode, at every opening of the card. | { surveyId, versionId } | both |
render_error | The survey cannot be drawn. | { surveyId, reason }, reason is not_found, network or malformed | both |
question_shown | Each question that is shown. | { questionId, position } | both |
answer_saved | After a successful send, one event per answer (not per tap). | { questionId, responseId } | both |
validation_failed | The visitor tries to continue without a required answer. | { questionId } | both |
submit_failed | Sending failed. | { questionId, status }, status is missing for a network error | both |
completed | The thank-you screen. | { surveyId, responseId } | both |
dismissed | The card was closed after its first question was shown and before the survey was completed, including a show followed by hide with no answer given. | { questionId } | floating |
closed | The card is back to closed. | {} | floating |
launcher_ready
It fires once per mount, in floating mode only, at the moment show and hide start working. Inline
mode has no such event: there, rendered is the signal. It does not fire when the survey cannot be
loaded (you get render_error instead), nor when this visitor has already answered a survey that
allows one response. In that case nothing is drawn in either mode, so inline mode sends no
rendered event either.
survey is the whole survey object as the server sent it, before your appearance from init or
update is laid over it. Its fields are:
| Field | Meaning |
|---|---|
surveyId, surveyVersionId, version | Identifiers and the version number. |
questions | The questions, in order, with their type, display, prompt, options, rating range and show conditions. |
appearance | The appearance saved on the Appearance tab. Fields as in Appearance options. |
alreadyResponded | true if this visitor has answered already. |
fillStatus | 'pending' or 'completed'. Set only on the public fill page, so normally absent in the widget. |
allowMultipleResponses | Whether the survey accepts more than one response from a visitor. |
Recipes
rawquotes('on', 'opened', function () {
document.querySelector('#promo').hidden = true
})
rawquotes('on', 'completed', function (detail) {
analytics.track('survey_completed', { id: detail.responseId })
})
rawquotes('on', 'submit_failed', function (detail) {
console.warn('survey send failed', detail.status)
})
To open the survey from your own button as soon as it can, see Open and close from your own code.