Skip to main content

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
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

KeyTypeDescriptionExample
componentIdstringID of the component that emitted the eventgallery_4137542896361
contentStreamstringID of the content stream"b7625b6e-1497-40c3-b118-1583b617d1ab"
expandedIndexintegerindex of the exapnded UGC item2
tilesCountintegerNumber of visible tiles10
totalResultsintegerTotal number of items in selected saved filter120
isAllContentDisplayedbooleanindicates if all content (ugc items) was loaded and displayed to a user (assuming that only whole lines of content are displayed now)false
ugcObjectobjectObject representation of the expanded contentSee below
ugcObject.idintegerID of the UGC item7992013
ugcObject.translationsobjectAvailable translation units for the UGC item{}
ugcObject.activate_unitsarrayList of activation unit objects[]
ugcObject.submissionobjectSubmission details if the image is UGC from a campaign{}
ugcObject.hashtagobjectInjested Hashtag DetailsSee below
ugcObject.hashtag.social_platformstringThe platform the hashtag was ingested frominstagram
ugcObject.hashtag.hashtag_textstringThe hashtag content (without the # sign)nofilter
ugcObject.featuredbooleanIndicates if this specific UGC item is a featured itemfalse
ugcObject.approval_statusstringThe approval status of the UGC item. Should be app if the content has been approvedapp
ugcObject.shortened_permalinkstringPermalink if it has been generatedhttps://perma.link/123
ugcObject.last_modifiedstringISO 8601 Timestamp of last modification2020-11-23T21:51:54+00:00
ugcObject.created_onstringISO 8601 Timestamp of creation2020-11-23T21:51:54+00:00
ugcObject.tagsobjectUGC Tags DetailsSee below
ugcObject.tags.hashtagsarrayList of all the tags associated['nofilter', 'foodporn']
ugcObject.contentobjectAdditional content detailsSee below
ugcObject.content.content_typestringimage or video or textimage
ugcObject.content.mediaobjectAdditional media infosSee below
ugcObject.content.media.idintegerInternal ID of the media1234
ugcObject.content.media.platform_data.urlstringLink to the original post/mediahttps://www.instagram.com/p/CX328Pth82W/
ugcObject.content.media.original_urlstringURL of the original image on Wyng servers,https://cdn.wyng.com/i123/image.jpg
ugcObject.content.media.base_urlstringURL of the folder containing the images,https://cdn.wyng.com/i123
ugcObject.content.media.media_typestringimage or video or textimage
ugcObject.content.media.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
ugcObject.content.media.media_urlsobjectObject containing links to the available image sizesSee below
ugcObject.content.media.media_urls.large_imagestringDirect URL to the image in the largest formathttps://cdn.wyng.com/i123/image_1.jpg
ugcObject.content.media.media_urls.medium_imagestringhttps://cdn.wyng.com/i123/image_2.jpg
ugcObject.content.media.media_urls.small_imagestringhttps://cdn.wyng.com/i123/image_3.jpg
ugcObject.content.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
ugcObject.content.authorobjectAuthor infosSee below
ugcObject.content.author.idintegerWyng internal ID for this author12312321321
ugcObject.content.author.profileobjectAuthor Profile infosSee below
ugcObject.content.author.profile.usernamestringPlatform Usernamebeeple_crap
ugcObject.content.author.profile.namestringDisplay name, might be empty on some platformsbeeple
ugcObject.content.author.profile.profile_linkstringDisplay name, might be empty on some platformshttps://www.instagram.com/beeple_crap/
ugcObject.content.author.profile.avatarstringLink to the profile avatarhttps://images.url/avatar.jpg
ugcObject.content.author.platform_idstringThe ID or username of the author on the platform the content comes from12342141223
ugcObject.content.author.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
ugcObject.content.permission_modifiedstringISO 8601 Timestamp of when the UGC permission was last modified2020-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

KeyTypeDescriptionExample
componentIdstringID of the component that emitted the eventgallery_4137542896361
contentStreamstringID of the content stream"b7625b6e-1497-40c3-b118-1583b617d1ab"
expandedIndexintegerindex of the expanded UGC item2
totalResultsintegerTotal number of items in selected saved filter120
isAllContentDisplayedbooleanindicates if all content (ugc items) was loaded and displayed to a user (assuming that only whole lines of content are displayed now)false
ugcObjectobjectObject representation of the expanded contentSee below
ugcObject.idintegerID of the UGC item7992013
ugcObject.translationsobjectAvailable translation units for the UGC item{}
ugcObject.activate_unitsarrayList of activation unit objects[]
ugcObject.submissionobjectSubmission details if the image is UGC from a campaign{}
ugcObject.hashtagobjectInjested Hashtag DetailsSee below
ugcObject.hashtag.social_platformstringThe platform the hashtag was ingested frominstagram
ugcObject.hashtag.hashtag_textstringThe hashtag content (without the # sign)nofilter
ugcObject.featuredbooleanIndicates if this specific UGC item is a featured itemfalse
ugcObject.approval_statusstringThe approval status of the UGC item. Should be app if the content has been approvedapp
ugcObject.shortened_permalinkstringPermalink if it has been generatedhttps://perma.link/123
ugcObject.last_modifiedstringISO 8601 Timestamp of last modification2020-11-23T21:51:54+00:00
ugcObject.created_onstringISO 8601 Timestamp of creation2020-11-23T21:51:54+00:00
ugcObject.tagsobjectUGC Tags DetailsSee below
ugcObject.tags.hashtagsarrayList of all the tags associated['nofilter', 'foodporn']
ugcObject.contentobjectAdditional content detailsSee below
ugcObject.content.content_typestringimage or video or textimage
ugcObject.content.mediaobjectAdditional media infosSee below
ugcObject.content.media.idintegerInternal ID of the media1234
ugcObject.content.media.platform_data.urlstringLink to the original post/mediahttps://www.instagram.com/p/CX328Pth82W/
ugcObject.content.media.original_urlstringURL of the original image on Wyng servers,https://cdn.wyng.com/i123/image.jpg
ugcObject.content.media.base_urlstringURL of the folder containing the images,https://cdn.wyng.com/i123
ugcObject.content.media.media_typestringimage or video or textimage
ugcObject.content.media.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
ugcObject.content.media.media_urlsobjectObject containing links to the available image sizesSee below
ugcObject.content.media.media_urls.large_imagestringDirect URL to the image in the largest formathttps://cdn.wyng.com/i123/image_1.jpg
ugcObject.content.media.media_urls.medium_imagestringhttps://cdn.wyng.com/i123/image_2.jpg
ugcObject.content.media.media_urls.small_imagestringhttps://cdn.wyng.com/i123/image_3.jpg
ugcObject.content.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
ugcObject.content.authorobjectAuthor infosSee below
ugcObject.content.author.idintegerWyng internal ID for this author12312321321
ugcObject.content.author.profileobjectAuthor Profile infosSee below
ugcObject.content.author.profile.usernamestringPlatform Usernamebeeple_crap
ugcObject.content.author.profile.namestringDisplay name, might be empty on some platformsbeeple
ugcObject.content.author.profile.profile_linkstringDisplay name, might be empty on some platformshttps://www.instagram.com/beeple_crap/
ugcObject.content.author.profile.avatarstringLink to the profile avatarhttps://images.url/avatar.jpg
ugcObject.content.author.platform_idstringThe ID or username of the author on the platform the content comes from12342141223
ugcObject.content.author.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
ugcObject.content.permission_modifiedstringISO 8601 Timestamp of when the UGC permission was last modified2020-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

KeyTypeDescriptionExample
componentIdstringID of the component that emitted the eventgallery_4137542896361
contentStreamstringID of the content streamb7625b6e-1497-40c3-b118-1583b617d1ab
tilesCountintegerNumber of visible tiles16
overallCountintegerNumber of loaded ugc items32
totalResultsintegerTotal number of items in selected saved filter123
isAllContentDisplayedbooleanindicates 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

KeyTypeDescriptionExample
eventTypestringWill always be flex_grid_new_content_addedflex_grid_new_content_added
componentIdstringID of the component that emitted the eventgallery_4137542896361
contentStreamstringID of the content streamb7625b6e-1497-40c3-b118-1583b617d1ab
tilesCountintegerNumber of visible tiles16
overallCountintegerNumber of loaded ugc items32
totalResultsintegerTotal number of items in selected saved filter123
isAllContentDisplayedbooleanindicates 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

KeyTypeDescriptionExample
eventTypestringWill always be campaign_loadedcampaign_loaded
experienceIdstringID of the experience that emitted the event63becf4248c8268d8beef8bf

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

KeyTypeDescriptionExample
eventTypestringWill always be page_loadedpage_loaded
experienceIdstringID of the experience that emitted the event63becf4248c8268d8beef8bf
selectedPageIdstringID of the page that emitted the eventpage_3494166833552
componentsarray of ojbectsArray 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',
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.selectedPageId === '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

KeyTypeDescriptionExample
experienceIdstringID of the experience that emitted the event61c4a785af47070010b4a9c9
componentIdstringID of the component that emitted the eventreward_12345678
eventTypestringWill always be reward_code_issuedreward_code_issued
sourceIdstringID of the answered form that triggered the rewardsign_up_12345678
identifierstringEmail / Identifier of the user that reward a codejohn.doe@wyng.com
isReminderbooleanWill be set to true if a user has already won and gets the same code displayed again as a reminderfalse
claimedAtstringDatetime string when the code was claimed2021-12-29T23:49:48
couponobjectInformations related to the distributed couponSee example below
coupon.labelstringCoupon name20% Off first order
coupon.valuestringCoupon value20OFF
collectionobjectConfiguration options of the reward componentSee example below
collection.isInstantWinbooleantrue if component configured as Instant Winfalse
collection.labelstringName of the Code Collection the component is using20% Coupons
collection.startTimeintStart of the redemption period as a milisecond Unix Timestamp1639545600000
collection.endTimeintEnd of the redemption period as a milisecond Unix Timestamp1640930400000
collection.valuestringInternal ID of the code validator61ca213387aad0e932924206
collection.extraobjectAdditional 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

KeyTypeDescriptionExample
experienceIdstringID of the experience that emitted the event61c4a785af47070010b4a9c9
componentIdstringID of the component that emitted the eventreward_12345678
eventTypestringWill always be reward_code_not_issuedreward_code_not_issued
sourceIdstringID of the answered form that triggered the rewardsign_up_12345678
errorMessagestringReason why no code was issued. Refer to reasons list below.No Active Codes
collectionobjectConfiguration options of the reward componentSee example below
collection.isInstantWinbooleantrue if component configured as Instant Winfalse
collection.labelstringName of the Code Collection the component is using20% Coupons
collection.startTimeintStart of the redemption period as a milisecond Unix Timestamp1639545600000
collection.endTimeintEnd of the redemption period as a milisecond Unix Timestamp1640930400000
collection.valuestringInternal ID of the code validator61ca213387aad0e932924206
collection.extraobjectAdditional 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

MessageDescription
No active codesThe code collection has ran out of codes to issue
Code Collection inactive
Instant Win Loss
Instant Win Already WonUser has already won a coupon code and cannot win again (Instant Win only)
Coupon Validation Failed: Malformed TokenThe token sent to the API cannot be decoded and might have been tampered with
Coupon Validation outside of redemption periodReturned 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',
quiz_summary: {
question_id_1: ['question_1_answer_id_2'],
question_id_2: ['question_2_answer_id_4'],
},
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

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

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

KeyTypeDescriptionExample
idstringID of the component that emitted the eventquiz_123456
resultIdstringThe ID of the result that is displayed to the userresult_123456
behaviorstringThe 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
outcomeTypestringHow 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
namestringResult's nameCongrats!
descriptionstringResult's description. Used when the behavior is default.You won!
redirectUrlstring, undefinedThe redirect's URL if behavior is url.https://youtu.be/dQw4w9WgXcQ
redirectPageIdstring, undefinedThe redirect's page ID if behavior is experience_page.page_1234567
imageobjectResult's description. Used when the behavior is default.See example below
image.linkstringThe image's URL.https://images.url/image.jpg
image.namestringThe image's name.winning_image.jpg
quizSummaryobjectSummary 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
topResultsarrayRanked 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

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"
}]
}

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

{
contentType: "photos"
}

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

{
tab: "photos"
}

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

{
tab: "photos"
}

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

{
type: "stickers",
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);