Event Listener

Attach a callback function (listener) to a given campaign event, in order to run custom js code when a specific event happens. For instance the individual_entry_expanded event allows developer to run custom code whenever a user expands an entry from a gallery.

Listening for Campaign Events

Events are a simple way of notifying listeners that something has taken place. There are many notable events in a campaign flow that developers can and should take action on in order to create more custom experiences. Some events may be as simple as a state change, while others pass useful data along with it. By emitting and listening to events, developers can begin adding functionality on top of out-of-box campaigns without adding complexity.

Examples

Adding an event listener callback

The EventEmitter is able to register a callback for a given eventType. Any eventType can be registered. However, only eventTypes that the campaign emits will ever be invoked. This example shows how external developers can leverage the Wyng SDK to register event listeners to the EventEmitter.

function listener(event) {
    // custom javascript code
}

window.wyng['_WYNG_ID_'].addEventListener('form_submit_success', listener);

Removing an event listener callback

Calling addEventListener will return an anonymous function that can remove the listener when called. This example shows how external developers can leverage the Wyng SDK to remove a previously registered event listener from the EventEmitter.

Note: future iterations can introduce a formal api for removing event listeners through removeEventListener.

function listener(event) {
    // custom javascript code
}

const removeEventListener = window.wyng['_WYNG_ID_'].addEventListener('form_submit_success', listener);

removeEventListener(); // remove event listener

Supported Events

Form component events
- form_submit_button_clicked
- form_pre_submission
- form_submit_success
- form_submit_error
- form_field_changed
- form_identity_verification_started
- form_identity_verification_success
- form_identity_verification_failed
FlexGrid component (v2) events:
- individual_entry_expanded
- individual_entry_was_expanded
- flex_grid_displaying_content_changed
- flex_grid_new_content_added
Reward component events:
- reward_code_issued
- reward_code_not_issued
General events:
- campaign_loaded
- page_loaded
Quiz component events:
- quiz_question_answered
- quiz_metrics_loaded
- quiz_new_step_shown
- quiz_new_result_shown
Upload component events:
- upload_editor_opened
- upload_form_opened
- upload_warning_shown
- upload_closed
- upload_editor_tab_clicked
- upload_editor_drawer_hidden
- upload_editor_item_added
- upload_editor_text_changed
- upload_editor_image_loaded
Gallery component (v1 - deprecated) events:
- individual_entry_expanded
Gallery component (v2 - deprecated) events:
- individual_entry_expanded (event payload params is the same as for FlexGrid above)
Reveal component events:
- reveal_unlocked
- reveal_locked
- reveal_outcome_selected
- reveal_outcome_displayed
Button component events:
- button_clicked

danger

All events are generic and may be emitted for any component in a campaign. It is up to the implementation to filter out any individual form components needed.

All code snippets in this documentation will have an example of such filtering.

Form component Events

Form Submit Success

Form submissions are one of the most powerful features as they capture user information. Callbacks that are registered to this event will be invoked after a form has been successfully submitted.

Event payload example

{
    eventType: 'form_submit_success',
    componentId: 'sign_up_4137542896361',
    email: 'john@smith.com',
    fields: [
        {answer: true, field_type: 'opt_in', name: 'opt_in_7340448925344'},
        {answer: 'john@smith.com', field_type: 'email', name: 'email_address_7615019884892'}
    ]
}

Examples

Adding an event listener callback

function signupSuccessCallback(event) {
    if (event.componentId === 'sign_up_4137542896361') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('form_submit_success', signupSuccessCallback);

Form Submit Button Clicked

Event generated when clicking the form's submit button. Callbacks that are registered to this event will be invoked after the submit button was clicked but before the actual submission calls happened. Event will be emitted regardless of the validation status of the form. If you need to target an event after front-end validation has happened refer to form_pre_submission.

Event payload example

{
    component_id: 'sign_up_4137542896361', // The ID of the parent form component
    fields: [
        {answer: true, field_type: 'opt_in', name: 'opt_in_7340448925344'},
        {answer: 'john@smith.com', field_type: 'email', name: 'email_address_7615019884892'}
    ]
}

Examples

Adding an event listener callback

function submitClickedCallback(event) {
    if (event.componentId === 'sign_up_4137542896361') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('form_submit_button_clicked', submitClickedCallback);

Form Pre Submission

Callbacks that are registered to this event will be invoked after the submit button was clicked and right before the submission call. It will be emitted after all the steps that can happen after clicking the submit button (front-end field validation, captcha solving, identity verification…), but before the actual submission calls happened.

Event payload example

{
    component_id: 'sign_up_4137542896361', // The ID of the parent form component
    fields: [
        {answer: true, field_type: 'opt_in', name: 'opt_in_7340448925344'},
        {answer: 'john@smith.com', field_type: 'email', name: 'email_address_7615019884892'}
    ]
}

Examples

Adding an event listener callback

function submitClickedCallback(event) {
    if (event.componentId === 'sign_up_4137542896361') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('form_pre_submission', submitClickedCallback);

Form Submit Clicked

Deprecated and renamed to form_pre_submission.

Form Submit Error

Event generated on unsuccessful form submission. Callbacks that are registered to this event will be invoked after a form submit failed.

Event payload example

{
    eventType: 'form_submit_error',
    componentId: 'sign_up_4137542896361', // component id of a parent
}

Examples

Adding an event listener callback

function signupErrorCallback(event) {
    if (event.componentId === 'sign_up_4137542896361') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('form_submit_error', signupErrorCallback);

Form Field Changed

Event generated when a field value has changed. This event is similar to a blur event and happens when a field loses focus. As such it will not trigger on every keystrokes of a text field for instance.

Event payload example

{
    component_id: 'sign_up_4137542896361', // The ID of the parent form component
    field: {
        name: "email_address_7015860614732",
        field_type: "email",
        is_deleted: false,
        is_hidden: false,
        label: "Email",
        required: true,
    },
    target: {
        // Forwarded DOMEventTarget
        // @see https://dom.spec.whatwg.org/#ref-for-dom-event-target%E2%91%A2
    }
}

Examples

Adding an event listener callback

function fieldChangedCallback(event) {
    if (
        event.componentId === 'sign_up_4137542896361'
        && event.field.name === 'email_address_701586061473'
    ) {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('form_field_changed', fieldChangedCallback);

Identity Verification Started

Event generated when a user initiates the Identity Verification flow.

Event payload example

{
    component_id: 'sign_up_4137542896361', // The ID of the parent form component
    email: 'jane.doe@example.com', // This could also be "phone_number" with a phone number as value
    fields: [
        {answer: true, field_type: 'opt_in', name: 'opt_in_7340448925344'},
        {answer: 'john@smith.com', field_type: 'email', name: 'email_address_7615019884892'}
    ]
    token: undefined,
    isReturnUser: false,
}

Examples

Adding an event listener callback

function onVerificationStarted(event) {
    if (
        event.componentId === 'sign_up_4137542896361'
    ) {
        // custom javascript code
        console.log(`User ${event.email} is starting the identity verification flow`)
    }
}

window.wyng['_WYNG_ID_'].addEventListener('form_identity_verification_started', onVerificationStarted);

Identity Verification Success

Event generated when a user has succesfuly completed the Identity Verification flow.

Event payload example

{
    component_id: 'sign_up_4137542896361', // The ID of the parent form component
    email: 'jane.doe@example.com', // This could also be "phone_number" with a phone number as value
    fields: [
        {answer: true, field_type: 'opt_in', name: 'opt_in_7340448925344'},
        {answer: 'john@smith.com', field_type: 'email', name: 'email_address_7615019884892'}
    ]
    token: 'eyJhbGciOiJIUz[…]36POk6yJV_adQssw5c', // JWT token generated by the Wyng Identity Verification API
    isReturnUser: false, // Will be true if the user has already verified their identity and they bypassed the verification flow
}

Examples

Adding an event listener callback

function onVerificationSuccess(event) {
    if (
        event.componentId === 'sign_up_4137542896361'
    ) {
        // custom javascript code
        console.log(`User ${event.email} succesfully verified their identity`);
        console.log(`Verified JWT token: ${event.token}`);
    }
}

window.wyng['_WYNG_ID_'].addEventListener('form_identity_verification_success', onVerificationSuccess);

info

Please refer to this document to see a more complex example of how you can leverage this event to authenticate a user and access their profile data, when using Wyng Personalization.

Identity Verification Failed

Event generated when a user enters an invalid code during the Identity Verification flow.

Event payload example

{
    component_id: 'sign_up_4137542896361', // The ID of the parent form component
    email: 'jane.doe@example.com', // This could also be "phone_number" with a phone number as value
    fields: [
        {answer: true, field_type: 'opt_in', name: 'opt_in_7340448925344'},
        {answer: 'john@smith.com', field_type: 'email', name: 'email_address_7615019884892'}
    ]
    token: undefined,
    isReturnUser: false,
}

Examples

Adding an event listener callback

function onVerificationFailed(event) {
    if (
        event.componentId === 'sign_up_4137542896361'
    ) {
        // custom javascript code
        console.debug(`User ${event.phone_number} failed to verify their identity`);
    }
}

window.wyng['_WYNG_ID_'].addEventListener('form_identity_verification_failed', onVerificationFailed);

FlexGrid component Events

Individual Entry Expanded

Content metadata is passed in individual_entry_expanded event that gets emitted when expanding individual entry in gallery or carousel components. It helps developers customizing expanded view and taking advantage of content metadata.

Event Payload

Key	Type	Description	Example
`componentId`	`string`	ID of the component that emitted the event	`gallery_4137542896361`
`contentStream`	`string`	ID of the content stream	`"b7625b6e-1497-40c3-b118-1583b617d1ab"`
`expandedIndex`	`integer`	index of the exapnded UGC item	`2`
`tilesCount`	`integer`	Number of visible tiles	`10`
`totalResults`	`integer`	Total number of items in selected saved filter	`120`
`isAllContentDisplayed`	`boolean`	indicates if all content (ugc items) was loaded and displayed to a user (assuming that only whole lines of content are displayed now)	`false`
`ugcObject`	`object`	Object representation of the expanded content	See below
`ugcObject.id`	`integer`	ID of the UGC item	`7992013`
`ugcObject.translations`	`object`	Available translation units for the UGC item	`{}`
`ugcObject.activate_units`	`array`	List of activation unit objects	`[]`
`ugcObject.submission`	`object`	Submission details if the image is UGC from a campaign	`{}`
`ugcObject.hashtag`	`object`	Injested Hashtag Details	See below
`ugcObject.hashtag.social_platform`	`string`	The platform the hashtag was ingested from	`instagram`
`ugcObject.hashtag.hashtag_text`	`string`	The hashtag content (without the # sign)	`nofilter`
`ugcObject.featured`	`boolean`	Indicates if this specific UGC item is a featured item	`false`
`ugcObject.approval_status`	`string`	The approval status of the UGC item. Should be `app` if the content has been approved	`app`
`ugcObject.shortened_permalink`	`string`	Permalink if it has been generated	`https://perma.link/123`
`ugcObject.last_modified`	`string`	ISO 8601 Timestamp of last modification	`2020-11-23T21:51:54+00:00`
`ugcObject.created_on`	`string`	ISO 8601 Timestamp of creation	`2020-11-23T21:51:54+00:00`
`ugcObject.tags`	`object`	UGC Tags Details	See below
`ugcObject.tags.hashtags`	`array`	List of all the tags associated	`['nofilter', 'foodporn']`
`ugcObject.content`	`object`	Additional content details	See below
`ugcObject.content.content_type`	`string`	image or video or text	`image`
`ugcObject.content.media`	`object`	Additional media infos	See below
`ugcObject.content.media.id`	`integer`	Internal ID of the media	`1234`
`ugcObject.content.media.platform_data.url`	`string`	Link to the original post/media	`https://www.instagram.com/p/CX328Pth82W/`
`ugcObject.content.media.original_url`	`string`	URL of the original image on Wyng servers,	`https://cdn.wyng.com/i123/image.jpg`
`ugcObject.content.media.base_url`	`string`	URL of the folder containing the images,	`https://cdn.wyng.com/i123`
`ugcObject.content.media.media_type`	`string`	image or video or text	`image`
`ugcObject.content.media.social_platform`	`string`	The platform the image was ingested from (instagram, twitter…)	`instagram`
`ugcObject.content.media.media_urls`	`object`	Object containing links to the available image sizes	See below
`ugcObject.content.media.media_urls.large_image`	`string`	Direct URL to the image in the largest format	`https://cdn.wyng.com/i123/image_1.jpg`
`ugcObject.content.media.media_urls.medium_image`	`string`		`https://cdn.wyng.com/i123/image_2.jpg`
`ugcObject.content.media.media_urls.small_image`	`string`		`https://cdn.wyng.com/i123/image_3.jpg`
`ugcObject.content.social_platform`	`string`	The platform the image was ingested from (instagram, twitter…)	`instagram`
`ugcObject.content.author`	`object`	Author infos	See below
`ugcObject.content.author.id`	`integer`	Wyng internal ID for this author	`12312321321`
`ugcObject.content.author.profile`	`object`	Author Profile infos	See below
`ugcObject.content.author.profile.username`	`string`	Platform Username	`beeple_crap`
`ugcObject.content.author.profile.name`	`string`	Display name, might be empty on some platforms	`beeple`
`ugcObject.content.author.profile.profile_link`	`string`	Display name, might be empty on some platforms	`https://www.instagram.com/beeple_crap/`
`ugcObject.content.author.profile.avatar`	`string`	Link to the profile avatar	`https://images.url/avatar.jpg`
`ugcObject.content.author.platform_id`	`string`	The ID or username of the author on the platform the content comes from	`12342141223`
`ugcObject.content.author.social_platform`	`string`	The platform the image was ingested from (instagram, twitter…)	`instagram`
`ugcObject.content.permission_modified`	`string`	ISO 8601 Timestamp of when the UGC permission was last modified	`2020-11-23T21:51:54+00:00`

Event payload example

{
    eventType: 'individual_entry_expanded',
    componentId: 'gallery_4137542896361',
    expandedIndex: 2,
    ugcObject:
        {
            content: {
                content_type: 'image'
            }
        }
}

Examples

Adding an event listener callback

function entryExpandCallback(event) {
    if (event.componentId === 'gallery_4137542896361') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('individual_entry_expanded', entryExpandCallback);

Individual Entry Was Expanded

This event is emitted when a FlexGrid modal is expanded and is fully visible on screen.

Event Payload

Key	Type	Description	Example
`componentId`	`string`	ID of the component that emitted the event	`gallery_4137542896361`
`contentStream`	`string`	ID of the content stream	`"b7625b6e-1497-40c3-b118-1583b617d1ab"`
`expandedIndex`	`integer`	index of the expanded UGC item	`2`
`totalResults`	`integer`	Total number of items in selected saved filter	`120`
`isAllContentDisplayed`	`boolean`	indicates if all content (ugc items) was loaded and displayed to a user (assuming that only whole lines of content are displayed now)	`false`
`ugcObject`	`object`	Object representation of the expanded content	See below
`ugcObject.id`	`integer`	ID of the UGC item	`7992013`
`ugcObject.translations`	`object`	Available translation units for the UGC item	`{}`
`ugcObject.activate_units`	`array`	List of activation unit objects	`[]`
`ugcObject.submission`	`object`	Submission details if the image is UGC from a campaign	`{}`
`ugcObject.hashtag`	`object`	Injested Hashtag Details	See below
`ugcObject.hashtag.social_platform`	`string`	The platform the hashtag was ingested from	`instagram`
`ugcObject.hashtag.hashtag_text`	`string`	The hashtag content (without the # sign)	`nofilter`
`ugcObject.featured`	`boolean`	Indicates if this specific UGC item is a featured item	`false`
`ugcObject.approval_status`	`string`	The approval status of the UGC item. Should be `app` if the content has been approved	`app`
`ugcObject.shortened_permalink`	`string`	Permalink if it has been generated	`https://perma.link/123`
`ugcObject.last_modified`	`string`	ISO 8601 Timestamp of last modification	`2020-11-23T21:51:54+00:00`
`ugcObject.created_on`	`string`	ISO 8601 Timestamp of creation	`2020-11-23T21:51:54+00:00`
`ugcObject.tags`	`object`	UGC Tags Details	See below
`ugcObject.tags.hashtags`	`array`	List of all the tags associated	`['nofilter', 'foodporn']`
`ugcObject.content`	`object`	Additional content details	See below
`ugcObject.content.content_type`	`string`	image or video or text	`image`
`ugcObject.content.media`	`object`	Additional media infos	See below
`ugcObject.content.media.id`	`integer`	Internal ID of the media	`1234`
`ugcObject.content.media.platform_data.url`	`string`	Link to the original post/media	`https://www.instagram.com/p/CX328Pth82W/`
`ugcObject.content.media.original_url`	`string`	URL of the original image on Wyng servers,	`https://cdn.wyng.com/i123/image.jpg`
`ugcObject.content.media.base_url`	`string`	URL of the folder containing the images,	`https://cdn.wyng.com/i123`
`ugcObject.content.media.media_type`	`string`	image or video or text	`image`
`ugcObject.content.media.social_platform`	`string`	The platform the image was ingested from (instagram, twitter…)	`instagram`
`ugcObject.content.media.media_urls`	`object`	Object containing links to the available image sizes	See below
`ugcObject.content.media.media_urls.large_image`	`string`	Direct URL to the image in the largest format	`https://cdn.wyng.com/i123/image_1.jpg`
`ugcObject.content.media.media_urls.medium_image`	`string`		`https://cdn.wyng.com/i123/image_2.jpg`
`ugcObject.content.media.media_urls.small_image`	`string`		`https://cdn.wyng.com/i123/image_3.jpg`
`ugcObject.content.social_platform`	`string`	The platform the image was ingested from (instagram, twitter…)	`instagram`
`ugcObject.content.author`	`object`	Author infos	See below
`ugcObject.content.author.id`	`integer`	Wyng internal ID for this author	`12312321321`
`ugcObject.content.author.profile`	`object`	Author Profile infos	See below
`ugcObject.content.author.profile.username`	`string`	Platform Username	`beeple_crap`
`ugcObject.content.author.profile.name`	`string`	Display name, might be empty on some platforms	`beeple`
`ugcObject.content.author.profile.profile_link`	`string`	Display name, might be empty on some platforms	`https://www.instagram.com/beeple_crap/`
`ugcObject.content.author.profile.avatar`	`string`	Link to the profile avatar	`https://images.url/avatar.jpg`
`ugcObject.content.author.platform_id`	`string`	The ID or username of the author on the platform the content comes from	`12342141223`
`ugcObject.content.author.social_platform`	`string`	The platform the image was ingested from (instagram, twitter…)	`instagram`
`ugcObject.content.permission_modified`	`string`	ISO 8601 Timestamp of when the UGC permission was last modified	`2020-11-23T21:51:54+00:00`

Event payload example

{
    eventType: 'individual_entry_was_expanded',
    componentId: 'flex_grid_2340193501679',
    expandedIndex: 2,
    isAllContentDisplayed: false,
    tilesCount: 5,
    overallCount: 30,
    totalResults: 37,
    ugcObject:
        {
            content: {
                content_type: 'image'
            }
        }
}

Examples

Adding an event listener callback

function entryExpandCallback(event) {
    if (event.componentId === '"flex_grid_2340193501679"') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('individual_entry_was_expanded', entryExpandCallback);

Displaying Content Changed

This event is emitted when the content displayed in the flex grid gallery changes. For instance when the user resizes the browser.

Event Payload

Key	Type	Description	Example
`componentId`	`string`	ID of the component that emitted the event	`gallery_4137542896361`
`contentStream`	`string`	ID of the content stream	`b7625b6e-1497-40c3-b118-1583b617d1ab`
`tilesCount`	`integer`	Number of visible tiles	`16`
`overallCount`	`integer`	Number of loaded ugc items	`32`
`totalResults`	`integer`	Total number of items in selected saved filter	`123`
`isAllContentDisplayed`	`boolean`	indicates if all content (ugc items) was loaded and displayed to a user (assuming that only whole lines of content are displayed now)	`false`

Event payload example

    {
        "componentId": "flex_grid_588222191538",
        "contentStream": "b7625b6e-1497-40c3-b118-1583b617d1ab",
        "tilesCount": 16,
        "overallCount": 30,
        "totalResults": 134,
        "isAllContentDisplayed": false,
        "eventType": "flex_grid_displaying_content_changed",
        "experienceId": "61d495372724b904f6c738c5"
    }

Examples

Adding an event listener callback

function contentChangedCallback(event) {
    if (event.componentId === 'flex_grid_123456789') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('flex_grid_displaying_content_changed', contentChangedCallback);

New Content Added

This event is dispatched when new content is added to the FlexGrid Gallery, either with Infinite Scroll or after a user clicked on the Load More button.

Event Payload

Key	Type	Description	Example
`eventType`	`string`	Will always be `flex_grid_new_content_added`	`flex_grid_new_content_added`
`componentId`	`string`	ID of the component that emitted the event	`gallery_4137542896361`
`contentStream`	`string`	ID of the content stream	`b7625b6e-1497-40c3-b118-1583b617d1ab`
`tilesCount`	`integer`	Number of visible tiles	`16`
`overallCount`	`integer`	Number of loaded ugc items	`32`
`totalResults`	`integer`	Total number of items in selected saved filter	`123`
`isAllContentDisplayed`	`boolean`	indicates if all content (ugc items) was loaded and displayed to a user (assuming that only whole lines of content are displayed now)	`false`

Event payload example

{
    eventType: "flex_grid_new_content_added",
    componentId: "flex_grid_123456789",
    contentStream: "a123456-1a1b-78ab-aa00-abcdef1ghi23",
    tilesCount: 25,
    overallCount: 34,
    totalResults: 87,
    isAllContentDisplayed: false,
}

Examples

Adding an event listener callback

function newContentAddedCallback(event) {
    if (event.componentId === 'flex_grid_123456789') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('flex_grid_new_content_added', newContentAddedCallback);

General Events

Campaign Loaded

Content metadata is passed in campaign_loaded event that gets emitted when the campaign is finished loading.

Event payload

Key	Type	Description	Example
`eventType`	`string`	Will always be `campaign_loaded`	`campaign_loaded`
`experienceId`	`string`	ID of the experience that emitted the event	`63becf4248c8268d8beef8bf`

Event payload example

{
    eventType: 'campaign_loaded',
    experienceId: '63becf4248c8268d8beef8bf'
}

Examples

Adding an event listener callback

function successfulCallback(event) {
    // custom javascript code to be executed when campaign has been loaded
}

window.wyng['_WYNG_ID_'].addEventListener('campaign_loaded', successfulCallback);

Page Loaded

Content metadata is passed in page_loaded event that gets emitted when the page is finished loading.

Event payload

Key	Type	Description	Example
`eventType`	`string`	Will always be `page_loaded`	`page_loaded`
`experienceId`	`string`	ID of the experience that emitted the event	`63becf4248c8268d8beef8bf`
`pageId`	`string`	ID of the page that emitted the event	`page_3494166833552`
`selectedPageId`	`string`	(deprecated) ID of the page that emitted the event	`page_3494166833552`
`components`	`array of ojbects`	Array of components with the component configurations on the page, structure of the component object will vary based on the type of component, however it will always contain `componentId`, `children` (an array of strings of component Id's of the components children), `componentName`, `componentType`, and `componentConfig` (object that will have the configuration settings for this specific component	`[ { componentId: 'component_id_123456789', children: [ 'child_id_123456' ], componentConfig: {}, componentName: 'Component Name', componentType: 'type' } ]`

Event payload example

{
    eventType: 'page_loaded',
    experienceId: '63becf4248c8268d8beef8bf',
    pageId: 'page_3494166833552',
    selectedPageId: 'page_3494166833552',
    components: [
        {
            componentId: 'text_9452948535300',
            children: [],
            componentConfig: {
                backgroundColor: '',
                customClasses: '',
                text: '<p>Text displayed in the component</p>'
            },
            componentName: 'Text Component',
            componentType: 'text',
            componentState: {}
        }
    ]
}

Examples

Adding an event listener callback

function successfulCallback(event) {
    if (event.pageId === 'page_4137542896361') {
        // custom javascript code when specific page is loaded
    }
}

window.wyng['_WYNG_ID_'].addEventListener('page_loaded', successfulCallback);

Reward Component Events

Reward Code Issued

This event is triggered every time a reward code is issued to a user by the Reward Component.

Event payload

Key	Type	Description	Example
`experienceId`	`string`	ID of the experience that emitted the event	`61c4a785af47070010b4a9c9`
`componentId`	`string`	ID of the component that emitted the event	`reward_12345678`
`eventType`	`string`	Will always be `reward_code_issued`	`reward_code_issued`
`sourceId`	`string`	ID of the answered form that triggered the reward	`sign_up_12345678`
`identifier`	`string`	Email / Identifier of the user that reward a code	`john.doe@wyng.com`
`isReminder`	`boolean`	Will be set to true if a user has already won and gets the same code displayed again as a reminder	`false`
`claimedAt`	`string`	Datetime string when the code was claimed	`2021-12-29T23:49:48`
`coupon`	`object`	Informations related to the distributed coupon	See example below
`coupon.label`	`string`	Coupon name	`20% Off first order`
`coupon.value`	`string`	Coupon value	`20OFF`
`collection`	`object`	Configuration options of the reward component	See example below
`collection.isInstantWin`	`boolean`	`true` if component configured as Instant Win	`false`
`collection.label`	`string`	Name of the Code Collection the component is using	`20% Coupons`
`collection.startTime`	`int`	Start of the redemption period as a milisecond Unix Timestamp	`1639545600000`
`collection.endTime`	`int`	End of the redemption period as a milisecond Unix Timestamp	`1640930400000`
`collection.value`	`string`	Internal ID of the code validator	`61ca213387aad0e932924206`
`collection.extra`	`object`	Additional configuration options	`{ redemption_policy: "once" }`

Event Payload Example

{
    experienceId: "61c4a785af47070010b4a9c9",
    componentId: "reward_12345678",
    eventType: "reward_code_issued",
    sourceId: "sign_up_12345678",
    coupon: { value: 'CODE25', label: '25% off' },
    collection: {
        isInstantWin: false,
        label: "Your Code Library Name",
        startTime: 1639545600000,
        endTime: 1640930400000,
        extra: {
            redemption_policy: "once",
        },
        value: "61ca213387aad0e932924206",
    },
    identifier: "john.doe@wyng.com",
    isReminder: false,
    claimedAt: "2021-12-29T23:49:48"
}

Reward Code Not Issued

This event is triggered when the reward component does not issue a coupon code after a successful form submission

Event payload

Key	Type	Description	Example
`experienceId`	`string`	ID of the experience that emitted the event	`61c4a785af47070010b4a9c9`
`componentId`	`string`	ID of the component that emitted the event	`reward_12345678`
`eventType`	`string`	Will always be `reward_code_not_issued`	`reward_code_not_issued`
`sourceId`	`string`	ID of the answered form that triggered the reward	`sign_up_12345678`
`errorMessage`	`string`	Reason why no code was issued. Refer to reasons list below.	`No Active Codes`
`collection`	`object`	Configuration options of the reward component	See example below
`collection.isInstantWin`	`boolean`	`true` if component configured as Instant Win	`false`
`collection.label`	`string`	Name of the Code Collection the component is using	`20% Coupons`
`collection.startTime`	`int`	Start of the redemption period as a milisecond Unix Timestamp	`1639545600000`
`collection.endTime`	`int`	End of the redemption period as a milisecond Unix Timestamp	`1640930400000`
`collection.value`	`string`	Internal ID of the code validator	`61ca213387aad0e932924206`
`collection.extra`	`object`	Additional configuration options	`{ redemption_policy: "once" }`

Event payload example

{
    experienceId: "61c4a785af47070010b4a9c9",
    componentId: "reward_12345678",
    eventType: "reward_code_not_issued",
    sourceId: "sign_up_12345678",
    collection: {
        isInstantWin: false,
        label: "Your Code Library Name",
        startTime: 1639545600000,
        endTime: 1640930400000,
        extra: {
            redemption_policy: "once",
        },
        value: "61ca213387aad0e932924206",
    },
    errorMessage: 'No Active Codes',
}

Error Messages List

Message	Description
No active codes	The code collection has ran out of codes to issue
Code Collection inactive
Instant Win Loss
Instant Win Already Won	User has already won a coupon code and cannot win again (Instant Win only)
Coupon Validation Failed: Malformed Token	The token sent to the API cannot be decoded and might have been tampered with
Coupon Validation outside of redemption period	Returned when a user submits a form outside of the redemption period configured in the Reward component config

Quiz Component Events

Quiz Question Answered

This event is triggered when a user clicks on an answer in a questionnaire.

Event payload example for question

{
    eventType: 'quiz_question_answered',
    component_id: 'quiz_1234567890',
    question_text: 'Question 3',
    question_id: 'question_id_3',
    question_number: 3,
    answer_id: 'question_3_answer_id_1',
    answer_text: 'answer text',
    is_correct_answer: false, // Deprecated
    correct_answer_id: 'question_3_answer_id_2', // Deprecated
    correct_answer_text: 'correct answer text', // Deprecated
    correct_answers: [{
        answer_id: 'question_3_answer_id_2',
        answer_text: 'correct answer text'
    }],
    quiz_summary: {
        question_id_1: ['question_1_answer_id_2'],
        question_id_2: ['question_2_answer_id_4'],
        question_id_3: ['question_3_answer_id_1']
    },
    total_questions: 5
}

Examples

Adding an event listener callback

function quizNewStepCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('quiz_question_answered', quizNewStepCallback);

Quiz Metrics Loaded

This event is triggered when the metrics for a quiz component are loaded.

Event payload example

{
    eventType: "quiz_metrics_loaded",
    experienceId: "61c4a785af47070010b4a9c9",
    componentId: "quiz_1234567890",
    metrics: {
        question_3989579239: {
            answer_123456789: 24,
            answer_767863718: 58,
            answer_356234235: 72,
            answer_653234524: 25,
        }
    }
}

Examples

Adding an event listener callback

function quizMetricsLoaded(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('quiz_metrics_loaded', quizMetricsLoaded);

Quiz new step shown

This event is triggered when quiz component goes to a new step. Types of steps:

question
fact
result
scoreboard
quiz_form_section

Event payload example

Question
Fact
Result
Scoreboard
Form

{
    currentQuestionIndex: 0,
    eventType: "quiz_new_step_shown",
    id: "question_3989579239",
    questionText: "New Question",
    totalQuestions: 2,
    type: "question"
}

{
    currentQuestionIndex: undefined,
    eventType: "quiz_new_step_shown",
    id: "question_3989579239",
    questionText: undefined,
    totalQuestions: 2,
    type: "fact"
}

{
    currentQuestionIndex: undefined,
    eventType: "quiz_new_step_shown",
    id: "question_3989579239",
    questionText: undefined,
    totalQuestions: 2,
    type: "result"
}

{
    currentQuestionIndex: undefined,
    eventType: "quiz_new_step_shown",
    id: "question_3989579239",
    questionText: undefined,
    totalQuestions: 2,
    type: "scoreboard"
}

{
    currentQuestionIndex: undefined,
    eventType: "quiz_new_step_shown",
    id: "question_3989579239",
    questionText: undefined,
    totalQuestions: 2,
    type: "quiz_form_section"
}

Examples

Adding an event listener callback

function quizNewStepCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('quiz_new_step_shown', quizNewStepCallback);

Quiz new result shown

Two events are triggered when the quiz component is completed and reaches the result step.

quiz_new_result_calculated is emitted right after a quiz result gets calculated, before it is displayed to the user (useful with redirect result behaviors).
quiz_new_result_shown is emitted once the result has been displayed to the user.

Event payload

Both event have the same payload and the callback will recieve a object containing the following properties

Key	Type	Description	Example
`id`	`string`	ID of the component that emitted the event	`quiz_123456`
`resultId`	`string`	The ID of the result that is displayed to the user	`result_123456`
`behavior`	`string`	The type of result displayed. One of: default: The default type option (Display content in the builder) experience_page: redirect to a new page from the experience url: redirect to an external URL	`experience_page`
`outcomeType`	`string`	How the result was calculated. One of: weighted matching: Weighted match by specific answers correctness: Match by number of correct answers matching: Match by specific answers default: Default Result	`correctness`
`name`	`string`	Result's name	`Congrats!`
`description`	`string`	Result's description. Used when the behavior is default.	`You won!`
`redirectUrl`	`string`, `undefined`	The redirect's URL if `behavior` is url.	`https://youtu.be/dQw4w9WgXcQ`
`redirectPageId`	`string`, `undefined`	The redirect's page ID if `behavior` is experience_page.	`page_1234567`
`image`	`object`	Result's description. Used when the behavior is default.	See example below
`image.link`	`string`	The image's URL.	`https://images.url/image.jpg`
`image.name`	`string`	The image's name.	`winning_image.jpg`
`quizSummary`	`object`	Summary of the questions answered by the user. Key is the question_id as a String Value is an Array of the the answers id	See example below
`topResults`	`array`	Ranked list of results. Sorted by relevance based on result logic settings and the user's answers. If there are more than 10 possible results, only the top 10 will be included.	See example below
`responseDetails`	`array`	Array of objects that provide details on each question in a quiz including question content, answer options, and correct answer information (if applicable). Each object within this array represents a single question with its respective attributes.	See example below

Event payload example for question

{
    id: "quiz_123456",
    resultId: "result_123456",
    name: "Result 1"
    behavior: "default"
    description: "You won.",
    outcomeType: "correctness",
    image: {
        link: "http://www.fillmurray.com/g/200/300",
        name: "photo-12345678.jpeg",
    },
    redirectPageId: undefined,
    redirectUrl: undefined,
    quizSummary: {
        question_123456: [
            "answer_123456"
        ],
        question_789: [
            "answer_123",
            "answer_456"
        ],
    },
    topResults: [{
        id: "result_123456",
        title: "Result 1"
    }, {
        id: "result_789",
        title: "Result 2"
    }],
    responseDetails: [{
        question_number: 1,
        question_id: 'question_123456',
        question_text: 'New Question 1',
        answers: [{
            answer_id: 'answer_123456',
            answer_text: 'Q1: Answer 1',
        }]
    }, {
        question_number: 2,
        question_id: 'question_789',
        question_text: 'New Question 2',
        answers: [{
            answer_id: 'answer_123',
            answer_text: 'Q2: Answer 1 text',
        }, {
            answer_id: 'answer_456',
            answer_text: 'Q2: Answer 2 text',
        }],
        is_correct_answer: false,
        has_correct_answer: false, // Deprecated
        correct_answer_id: 'answer_789', // Deprecated
        correct_answer_text: 'Q2: Answer 3 text', // Deprecated
        correct_answers: [{
            answer_id: 'answer_789',
            answer_text: 'Q2: Answer 3 text',
        }]
    }]
}

Examples

Adding an event listener callback

function quizNewResultCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('quiz_new_result_shown', quizNewResultCallback);

Upload component events

Upload editor opened

This event is triggered when user reaches "Editor" step in "Image Upload" or "Video Upload" component.

Event payload example

Photos
Video

{
  contentType: "photos"
}

{
  contentType: "video"
}

Examples

Adding an event listener callback

function uploadEditorOpenedCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_editor_opened', uploadEditorOpenedCallback);

Upload form opened

This event is triggered when user reaches "Form" step in "Image Upload" or "Video Upload" component. It doesn't have payload.

Examples

Adding an event listener callback

function uploadFormOpenedCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_form_opened', uploadFormOpenedCallback);

Upload warning shown

This event is triggered when user reaches "Warning" step (sees “Are you sure” confirm message when clicking to exit) in "Image Upload" or "Video Upload" component. It doesn't have payload.

Examples

Adding an event listener callback

function uploadWarningShownCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_warning_shown', uploadWarningShownCallback);

Upload closed

This event is triggered when user exits upload component (either image or video). It doesn't have payload.

Examples

Adding an event listener callback

function uploadClosedCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_closed', uploadClosedCallback);

Upload editor tab clicked

This event is triggered when user clicks a tab on "Editor" step in "Image Upload" or "Video Upload" component.

Event payload example

Photos
Video
Stickers
Frames
Text

{
  tab: "photos"
}

{
  tab: "video"
}

{
  tab: "stickers"
}

{
  tab: "frames"
}

{
  tab: "text"
}

Examples

Adding an event listener callback

function uploadEditorTabClickedCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_editor_tab_clicked', uploadEditorTabClickedCallback);

Upload editor drawer hidden

This event is triggered when tab content is hidden on "Editor" step in "Image Upload" or "Video Upload" component.

Event payload example

Photos
Video
Stickers
Frames
Text

{
  tab: "photos"
}

{
  tab: "video"
}

{
  tab: "stickers"
}

{
  tab: "frames"
}

{
  tab: "text"
}

Examples

Adding an event listener callback

function uploadEditorDrawerHiddenCallback(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_editor_drawer_hidden', uploadEditorDrawerHiddenCallback);

Upload editor item added

This event is triggered when user drops a sticker, frame on "Editor" step in "Image Upload" or "Video Upload" component. URL points to asset.

Event payload example

Stickers
Frames

{
  type: "stickers",
  url: "http://web.site"
}

{
  type: "frames",
  url: "http://web.site"
}

Examples

Adding an event listener callback

function uploadEditorItemAdded(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_editor_item_added', uploadEditorItemAdded);

Upload editor text changed

This event is triggered when user changes text on "Editor" step in "Image Upload" or "Video Upload" component.

Event payload example

{
    value: "user input"
}

Examples

Adding an event listener callback

function uploadEditorTextChanged(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_editor_text_changed', uploadEditorTextChanged);

Upload editor image loaded

This event is triggered when image upload complete. We need this with “upload_editor_opened” event because the editor opens even if upload wasn't finished. It doesn't have payload.

Examples

Adding an event listener callback

function uploadEditorImageLoaded(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('upload_editor_image_loaded', uploadEditorImageLoaded);

Reveal component Events

Reveal unlocked

This event is triggered when a Reveal component switches to unlocked state

Event payload example

{
    componentId: "reveal_123"
}

Examples

Adding an event listener callback

function revealUnlocked(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('reveal_unlocked', revealUnlocked);

Reveal locked

This event is triggered when a Reveal component switches to locked state

Event payload example

{
    componentId: "reveal_123"
}

Examples

Adding an event listener callback

function revealLocked(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('reveal_locked', revealLocked);

Reveal outcome selected

This event is triggered when an outcome selected. In case of Random selection mode and Spin-to-win that happens on "Spin" button click. For Reward case event triggers when a Form component connected with a Reward is submitted.

Event payload example

In case of Linked Reward mode

{
    componentId: 'reveal_123',
    reward: {
        code: 'sale10'
        label: 'Get 10% discount'
    }
}

In case of Random mode

{
    outcomeName: 'Win a car',
    componentId: 'reveal_123',
}

Examples

Adding an event listener callback

function revealOutcomeSelected(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('reveal_outcome_selected', revealOutcomeSelected);

Reveal outcome displayed

This event is triggered when an outcome displayed. For Spin-to-win case it triggers after a wheel stops

Event payload example

In case of Linked Reward mode

{
    componentId: 'reveal_123',
    reward: {
        code: 'sale10'
        label: 'Get 10% discount'
    }
}

In case of Random mode

{
    outcomeName: 'Win a car',
    componentId: 'reveal_123',
}

Examples

Adding an event listener callback

function revealOutcomeDisplayed(event) {
    // custom javascript code
}
window.wyng['_WYNG_ID_'].addEventListener('reveal_outcome_displayed', revealOutcomeDisplayed);

Button component Events

Button clicked

This event is triggered when a Button component is clicked

Event payload

Key	Type	Description	Example
`experienceId`	`string`	ID of the experience that emitted the event	`67bff380804dce600d2ab77f`
`componentId`	`string`	ID of the component that emitted the event	`button_9252748122483`
`eventType`	`string`	Will always be `button_clicked`	`button_clicked`
`componentConfig`	`object`	Information related to the button component	See example below
`alignment`	`string`	Defines the alignment of the button text	`center`
`backgroundColor`	`string`	Specifies the background color of the button	`#FFFFFF`
`clickBehavior`	`string`	Determines the type of action that occurs when the button is clicked	`url`
`clickBehaviorOptions`	`object`	Additional options related to the click behavior	See example below
`target`	`string`	Defines how the URL or action is opened	OPEN_IN_CURRENT_TAB
`clickDestination`	`string`	The URL or endpoint the button navigates to when clicked	`http://example.com`
`customClasses`	`string`	Custom CSS classes that can be applied to the button for additional styling	`customclass`
`label`	`string`	The text displayed on the button	`Click here`
`popupHtml`	`string`	HTML content displayed as a popup when the button is clicked	`<p>Pop up content</p>`
`eventData`	`object`	Additional data passed as a JavaScript object when the button is clicked	`{ "label1": "value1"}`
`style`	`object`	CSS styling for the button	`{ 'fontFamily': 'sans-serif' }`
`type`	`string`	Defines the type of the component, generally a button in this context	`button`
`useCustomStyles`	`boolean`	Specifies whether to use custom styling or default styles	false

Event Payload Example

{
    componentId: 'button_9252748122483',
    experienceId: '67bff380804dce600d2ab77f'
    eventType: 'button_clicked',
    componentConfig: {
     'alignment': 'center',
     'backgroundColor': '#FFFFFF',
     'clickBehavior': 'custom_code',
     'clickDestination': 'http://example.com',
     'customClasses': '',
     'label': 'Click Here',
     'popupHtml': '<p>Pop up content</p>',
     'eventData': { attribute1: 'value1', attribute2: 'value2' },
     'style': {'fontFamily': 'sans-serif'},
     'type': 'button',
     'useCustomStyles': false
    }
}

Examples

Adding an event listener callback

function buttonClickedCallback(event) {
    if (event.componentId === 'button_9252748122483') {
        // custom javascript code
    }
}

window.wyng['_WYNG_ID_'].addEventListener('button_clicked', buttonClickedCallback);

Listening for Campaign Events​

Examples​

Adding an event listener callback​

Removing an event listener callback​

Supported Events​

Form component Events​

Form Submit Success​

Event payload example​

Examples​

Form Submit Button Clicked​

Event payload example​

Examples​

Form Pre Submission​

Event payload example​

Examples​

Form Submit Clicked​

Form Submit Error​

Event payload example​

Examples​

Form Field Changed​

Event payload example​

Examples​

Identity Verification Started​

Event payload example​

Examples​

Identity Verification Success​

Event payload example​

Examples​

Identity Verification Failed​

Event payload example​

Examples​

FlexGrid component Events​

Individual Entry Expanded​

Event Payload​

Event payload example​

Examples​

Individual Entry Was Expanded​

Event Payload​

Event payload example​

Examples​

Displaying Content Changed​

Event Payload​

Event payload example​

Examples​

New Content Added​

Event Payload​

Event payload example​

Examples​

General Events​

Campaign Loaded​

Event payload​

Event payload example​

Examples​

Page Loaded​

Event payload​

Event payload example​

Examples​

Reward Component Events​

Reward Code Issued​

Event payload​

Event Payload Example​

Reward Code Not Issued​

Event payload​

Event payload example​

Quiz Component Events​

Quiz Question Answered​

Examples​

Quiz Metrics Loaded​

Examples​

Quiz new step shown​

Event payload example​

Examples​

Quiz new result shown​

Event payload​

Event payload example for question​

Examples​

Upload component events​

Upload editor opened​

Event payload example​

Examples​

Listening for Campaign Events

Examples

Adding an event listener callback

Removing an event listener callback

Supported Events

Form component Events

Form Submit Success

Event payload example

Examples

Form Submit Button Clicked

Event payload example

Examples

Form Pre Submission

Event payload example

Examples

Form Submit Clicked

Form Submit Error

Event payload example

Examples

Form Field Changed

Event payload example

Examples

Identity Verification Started

Event payload example

Examples

Identity Verification Success

Event payload example

Examples

Identity Verification Failed

Event payload example

Examples

FlexGrid component Events

Individual Entry Expanded

Event Payload

Event payload example

Examples

Individual Entry Was Expanded

Event Payload

Event payload example

Examples

Displaying Content Changed

Event Payload

Event payload example

Examples

New Content Added

Event Payload

Event payload example

Examples

General Events

Campaign Loaded

Event payload

Event payload example

Examples

Page Loaded

Event payload

Event payload example

Examples

Reward Component Events

Reward Code Issued

Event payload

Event Payload Example

Reward Code Not Issued

Event payload

Event payload example

Quiz Component Events

Quiz Question Answered

Examples

Quiz Metrics Loaded

Examples

Quiz new step shown

Event payload example

Examples

Quiz new result shown

Event payload

Event payload example for question

Examples

Upload component events

Upload editor opened

Event payload example

Examples