### Wyng SDK Initialization
Source: https://developers.wyng.com/docs/experience-sdk/intro
An example of how to initialize and access the Wyng SDK, recommended for custom JavaScript added in the Wyng experience editor.
```APIDOC
## Wyng SDK Initialization
### Description
This code snippet demonstrates the recommended way to access the Wyng SDK within a Wyng experience.
It uses an Immediately-Invoked Function Expression (IIFE) to ensure the code is self-contained and avoids conflicts with other JavaScript.
The `_WYNG_ID_` tag is a placeholder that Wyng automatically replaces with the actual experience ID when the JavaScript is added to the **Custom JavaScript** field in the experience editor.
### Method
N/A (Client-side JavaScript execution)
### Endpoint
N/A (Client-side JavaScript execution)
### Parameters
N/A
### Request Example
```javascript
(function() {
const sdk = window.wyng['_WYNG_ID_'];
// YOUR CUSTOM JAVASCRIPT HERE
})();
```
### Response
N/A
```
--------------------------------
### Enable Test Mode for Wyng Activations via URL Parameter
Source: https://developers.wyng.com/docs/wyng-moments/intro
This example shows how to enable test mode for Wyng activations by appending a URL parameter. When in test mode, only test configurations of activations will be active, while production configurations are disabled.
```url
your-web-site.com/some/page?wmax_test_mode=true
```
--------------------------------
### Install Wyng Agent JavaScript Snippet
Source: https://developers.wyng.com/docs/wyng-moments/intro
This snippet installs the Wyng JavaScript agent on your website. You need to replace the placeholder '123456' with your actual brand property ID. The script should be placed in the `` section of your HTML.
```html
```
--------------------------------
### Profiles SDK - Installation
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-sdk
Instructions on how to install the Profiles JavaScript SDK by adding a script tag to your website.
```APIDOC
## Profiles SDK - Installation
### Description
Add the following script tag to your website's HTML to include the Profiles SDK.
### Method
Not applicable (Client-side script inclusion)
### Endpoint
`https://mx.wyng.com/js/profiles-sdk.js`
### Request Example
```html
```
### Response
After inclusion, the SDK will be available globally as `window.wyng.profiles`.
```
--------------------------------
### Initialize Wyng SDK with IIFE Structure (JavaScript)
Source: https://developers.wyng.com/docs/experience-sdk/intro
This snippet demonstrates the recommended way to initialize the Wyng SDK within an Immediately-Invoked Function Expression (IIFE). This prevents global scope pollution and ensures your custom JavaScript interacts correctly with the SDK, especially when experiences are embedded on a web page. The `_WYNG_ID_` tag is automatically replaced with the actual experience ID.
```javascript
(function() {
const sdk = window.wyng['_WYNG_ID_'];
// YOUR CUSTOM JAVASCRIPT
})();
```
--------------------------------
### Wyng Profiles Data Model Configuration Example
Source: https://developers.wyng.com/docs/wyng-profiles/intro
This JSON object represents a sample data model configuration for Wyng Profiles. It defines fields like anonymous visitor IDs ('uids'), known identifiers ('email', 'salesforce_id'), and attributes ('traveler_activities') with their respective types and settings. This configuration is managed through the Wyng dashboard.
```json
{
"strong_id": "email",
"ids_priority": [
"salesforce_id",
"email",
"uids"
],
"fields": [
{
"id": "uids",
"name": "Anonymous Visitor ID",
"status": "active",
"is_key": true,
"type": "set",
"values": [],
"allow_other_values": true,
"retention_window": null,
"relevance_window": null,
"is_hash_field": false
},
{
"id": "email",
"name": "Email Address",
"status": "active",
"is_key": true,
"type": "text",
"values": [],
"allow_other_values": true,
"retention_window": null,
"relevance_window": null,
"is_hash_field": false
},
{
"id": "salesforce_id",
"name": "SF User ID",
"status": "active",
"is_key": true,
"type": "text",
"values": [],
"allow_other_values": true,
"retention_window": null,
"relevance_window": null,
"is_hash_field": false
},
{
"id": "traveler_activities",
"name": "Favorite Sport",
"status": "active",
"is_key": false,
"type": "set",
"values": [
"Football",
"Basketball",
"Skiing",
"Baseball",
"Volleyball",
"Cricket"
],
"allow_other_values": false,
"retention_window": 365,
"relevance_window": 365,
"is_hash_field": false
}
]
}
```
--------------------------------
### Debug Mode - Enable/Disable
Source: https://developers.wyng.com/docs/experience-sdk/intro
Instructions on how to enable and disable debug mode for a Wyng experience using the `setDebug` method.
```APIDOC
## Debug Mode - Enable/Disable
### Description
Debug mode provides additional information not normally visible to the user, which is helpful during development and troubleshooting.
This section details how to activate and deactivate debug mode for a specific experience using the `setDebug` method of the Wyng SDK.
### Method
`setDebug(status: boolean)`
### Endpoint
`window.wyng['YOUR EXPERIENCE ID'].setDebug(status)`
### Parameters
#### Path Parameters
N/A
#### Query Parameters
N/A
#### Request Body
N/A
### Request Example
**To enable debug mode:**
```javascript
window.wyng['YOUR_EXPERIENCE_ID'].setDebug(true);
```
**To disable debug mode:**
```javascript
window.wyng['YOUR_EXPERIENCE_ID'].setDebug(false);
```
### Response
#### Success Response (200)
N/A (This is a method call, not an API request/response)
#### Response Example
N/A
```
--------------------------------
### Define ID Priority for Visitor Profiles
Source: https://developers.wyng.com/docs/wyng-profiles/intro
Specifies the order of preference for different user identifiers when matching visitor profiles. The SDK iterates through this list to find the best match.
```json
{
"ids_priority": [
"salesforce_id",
"email",
"hashed_email",
"uids"
]
}
```
--------------------------------
### Attribute Comparison URL Example
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
This example shows how to construct a URL to compare a specific field's value for a profile against a given value. This endpoint is useful for checking if an attribute matches a certain criterion and is accessible with a TDM public token.
```HTTP
/profiles//compare?=
```
--------------------------------
### Example Field Objects for Profiles API
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
Illustrates example field objects that can be included in a data model for the Profiles API. This example shows how to define fields for 'email' and 'skin_concerns', specifying their IDs, names, types, and status. The 'is_internal' flag is also demonstrated.
```json
[
{
"id": "email",
"name": "Email",
"type": "text",
"status": "active"
},
{
"id": "skin_concerns",
"name": "Skin Concerns",
"type": "text",
"is_internal": true
}
]
```
--------------------------------
### Profile Lookup by UID or Email (URL Example)
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
This example demonstrates how to construct a URL to look up a profile using either a unique identifier (uid) or an email address. The API requires an access token, which can be passed as a URL parameter or an HTTP header.
```HTTP
/profiles/lookup?uid=&email=
```
--------------------------------
### Get Product Details
Source: https://developers.wyng.com/docs/experience-sdk/product
Retrieves comprehensive details for a given product using its unique identifier (Product ID or SKU).
```APIDOC
## GET /websites/developers_wyng/getProduct
### Description
This method returns the product details for the given Product ID or SKU.
### Method
GET
### Endpoint
/websites/developers_wyng/getProduct
### Parameters
#### Query Parameters
- **productId** (string) - Required - Product ID or SKU
### Request Example
No request body needed for this GET request.
### Response
#### Success Response (200)
- **external_id** (string) - The external identifier for the product.
- **name** (string) - The name of the product.
- **description** (string) - A detailed description of the product.
- **image_url** (string) - The URL of the product image.
- **item_group_id** (string) - The item group identifier.
- **click_through_url** (string) - The URL to redirect users for more information or purchase.
- **price** (string) - The regular price of the product.
- **sale_price** (string) - The sale price of the product, if applicable.
- **size** (string) - The size or weight of the product.
- **availability** (string) - The stock availability status (e.g., 'in stock').
- **click_unit_library** (integer) - Identifier for click unit library.
- **color** (string) - The color of the product.
- **custom1** (string) - Custom field 1 for product attributes.
- **custom2** (string) - Custom field 2 for product attributes.
- **custom3** (string) - Custom field 3 for product attributes.
#### Response Example
```json
{
"external_id": "SKU100605",
"name": "Skin Foundation Stick, Neutral Porcelain",
"description": "A portable cream foundation stick that glides on weightless medium-to-full coverage that lasts all day.",
"image_url": "https://www.bobbibrowncosmetics.com/media/export/cms/products/v2_1080x1080/bb_sku_EA6C37_1080x1080_0.jpg",
"item_group_id": "29723",
"click_through_url": "https://www.bobbibrowncosmetics.com/product/14017/29723/makeup/face/foundation/skin-foundation-stick/ss14/Skin-Foundation-Stick#/shade/Neutral_Porcelain_%28N-",
"price": "$69.00",
"sale_price": "$59.00",
"size": "0.31 oz/9g",
"availability": "in stock",
"click_unit_library": 1,
"color": "Neutral Porcelain (N-010)",
"custom1": "Extra light beige with a balance of yellow & pink; slightly more yellow; for pale skin",
"custom2": "All skin tones and types.",
"custom3": "After moisturizing skin, lightly glide across forehead, cheeks, nose, and chin. Blend with fingertips or a sponge. Build coverage as desired."
}
```
```
--------------------------------
### Example Profile Data Structure
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
An example JSON object representing a profile with various fields, including UIDs, email, and custom attributes like 'hello' and 'test_key'. This structure is used as a reference for profile attribute operators.
```json
{
"tdm_id": "5f633bc86feb832df525d51f",
"fields": {
"uids": {"value": [
"d",
"c"
]},
"email": {
"value": "hello@aWoRlD.com",
"updated": "2021-06-17T10:40:04Z",
"created": "2021-03-22T10:11:00.347000"
},
"hello": {
"value": "hi",
"updated": "2021-06-17T10:40:04Z",
"created": "2021-03-22T10:11:00.347000"
},
"test_key": {
"value": 1234,
"updated": "2021-06-17T10:40:04Z",
"created": "2020-01-22T16:11:00.347000"
},
"test": {
"value": 2,
"updated": "2021-06-17T10:40:04Z",
"created": "2021-06-17T10:40:04Z"
}
}
}
```
--------------------------------
### Segment Creation Example Request (JSON)
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
An example JSON request for creating a segment. It includes a name and an expression that combines multiple conditions using the 'and' operator, including 'profile-attribute-equal' and 'profile-attribute-has'.
```json
{
"name": "test3",
"expression": {
"operator": "and",
"operands": [
{
"operator": "profile-attribute-equal",
"operands": [
"email",
"test2@test.te"
]
},
{
"operator": "profile-attribute-has",
"operands": [
"text_field",
"some"
]
}
]
}
}
```
--------------------------------
### Segment Creation Example Response (JSON)
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
An example JSON response for a successful segment creation or update. It includes the segment's ID, name, TDM ID, the expression used, and timestamps for creation and update.
```json
{
"id": "612cd80b8f7dc59afd836639",
"name": "test3",
"tdm_id": "60f9c1e7395ea00202ea36f2",
"expression": {
"operator": "and",
"operands": [
{
"operator": "profile-attribute-equal",
"operands": [
"email",
"test2@test.te"
]
},
{
"operator": "profile-attribute-has",
"operands": [
"text_field",
"some"
]
}
]
},
"updated_at": "2021-09-02T07:12:47.558888",
"created_at": "2021-09-02T07:12:47.558888"
}
```
--------------------------------
### Profile Lookup Success Response (JSON Example)
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
This is an example of a successful response when a profile is found using the lookup endpoint. It returns the unique ID of the matched profile.
```JSON
{
"id": "5f68bf46030feaa8f4b5bb7b"
}
```
--------------------------------
### Sample Public Data Output
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-sdk
An example of the JSON output that might be returned for public profile data. This structure includes common profile fields and their potential values.
```json
{
"email": "john.smith@email.com",
"hair_color": "brown",
"skin_concerns": [ "Eye Bags", "Oily Skin" ]
}
```
--------------------------------
### Segment Retrieval Example Response (JSON)
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
An example JSON response for retrieving a segment. It mirrors the structure of the creation response but might reflect the current state of the segment.
```json
{
"id": "612cd80b8f7dc59afd836639",
"name": "test3",
"tdm_id": "60f9c1e7395ea00202ea36f2",
"expression": {
"operator": "and",
"operands": [
{
"operator": "profile-attribute-equal",
"operands": [
"email",
"test2@test.te"
]
},
true
]
},
"updated_at": "2021-08-30T13:07:23.777000",
"created_at": "2021-08-30T13:07:23.777000"
}
```
--------------------------------
### Retrieve Single Attribute (JSON Example)
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
This JSON example shows the expected response for retrieving a single attribute of a profile. It includes the attribute's creation and update timestamps, its value, and relevance and retention window settings. Requires a TDM token.
```JSON
{
"created": "2021-07-09T16:24:53.797000",
"value": "Attribute value",
"updated": "2021-07-09T16:24:53.797000",
"relevance_window": 10,
"retention_window": 30
}
```
--------------------------------
### Event Payload: Individual Entry Expanded Example
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
Example of the JSON payload for the 'individual_entry_was_expanded' event. This payload contains information about the expanded entry, component, and content details.
```json
{
eventType: 'individual_entry_was_expanded',
componentId: 'flex_grid_2340193501679',
expandedIndex: 2,
isAllContentDisplayed: false,
tilesCount: 5,
overallCount: 30,
totalResults: 37,
ugcObject:
{
content: {
content_type: 'image'
}
}
}
```
--------------------------------
### Quiz Event Payload Examples (JSON)
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
Examples of JSON payloads for different quiz event types, including question, fact, result, scoreboard, and form events. These payloads structure the data associated with each quiz step.
```json
{
"currentQuestionIndex": 0,
"eventType": "quiz_new_step_shown",
"id": "question_3989579239",
"questionText": "New Question",
"totalQuestions": 2,
"type": "question"
}
```
```json
{
"currentQuestionIndex": undefined,
"eventType": "quiz_new_step_shown",
"id": "question_3989579239",
"questionText": undefined,
"totalQuestions": 2,
"type": "fact"
}
```
```json
{
"currentQuestionIndex": undefined,
"eventType": "quiz_new_step_shown",
"id": "question_3989579239",
"questionText": undefined,
"totalQuestions": 2,
"type": "result"
}
```
```json
{
"currentQuestionIndex": undefined,
"eventType": "quiz_new_step_shown",
"id": "question_3989579239",
"questionText": undefined,
"totalQuestions": 2,
"type": "scoreboard"
}
```
```json
{
"currentQuestionIndex": undefined,
"eventType": "quiz_new_step_shown",
"id": "question_3989579239",
"questionText": undefined,
"totalQuestions": 2,
"type": "quiz_form_section"
}
```
--------------------------------
### Set and Validate Image Field
Source: https://developers.wyng.com/docs/experience-sdk/action-dispatcher
This example demonstrates setting and validating an Image field using the `setAndValidateFormField` action. The `fieldValue` should be a string URL pointing to the image.
```javascript
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'image_580323694217',
fieldValue: 'https://images.url/my_image.jpg'
}
)
```
--------------------------------
### Set and Validate Date Field
Source: https://developers.wyng.com/docs/experience-sdk/action-dispatcher
This example shows how to set and validate a Date field using the `setAndValidateFormField` action. The `fieldValue` must be an object with `monthValue`, `dayValue`, and `yearValue` properties.
```javascript
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'date_3579334075255',
fieldValue: {
monthValue: '2',
dayValue: '27',
yearValue: '1992'
}
}
)
```
--------------------------------
### Set and Validate Multiple Choice Field
Source: https://developers.wyng.com/docs/experience-sdk/action-dispatcher
This example demonstrates setting and validating a Multiple Choice field using the `setAndValidateFormField` action. The `fieldValue` should be a string representing the desired choice.
```javascript
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'multiple_choice_1819084264811',
fieldValue: 'Choice 2'
}
)
```
--------------------------------
### Identify Visitor with Hashed Email and Anonymous ID
Source: https://developers.wyng.com/docs/wyng-profiles/intro
Demonstrates how to use the `wyng.profiles.identify` function to add a hashed email to the identity context. This is used in conjunction with an anonymous visitor ID for profile matching.
```javascript
windows.wyng.profiles.identify({
hashed_email: '0cba00ca3da1b283a57287bcceb17e35'
});
// Identity context example:
// {
// uids: 'e23d1615c7874594b929d69c67714d09',
// hashed_email: '0cba00ca3da1b283a57287bcceb17e35'
// }
```
--------------------------------
### Initialize Profiles SDK
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-sdk
Initialize the Profiles SDK using a Public Access Token before calling any SDK functions. If 'Enable Personalization Using Profiles' is active in Experience Studio, initialization is automatic.
```javascript
window.wyng.profiles.init('public_access_token');
```
--------------------------------
### GET /segments Response Structure
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
An example of the expected JSON response when retrieving a list of defined segments for a TDM. It includes segment ID, name, TDM ID, and the expression defining the segment.
```json
[
{
"id": "612cd80b8f7dc59afd836639",
"name": "test3",
"tdm_id": "60f9c1e7395ea00202ea36f2",
"expression": {
"operator": "and",
"operands": [
{
"operator": "profile-attribute-equal",
"operands": [
"email",
"test2@test.te"
]
},
true
]
},
"updated_at": "2021-08-30T13:07:23.777000",
"created_at": "2021-08-30T13:07:23.777000"
}
]
```
--------------------------------
### Disable Debug Mode for Wyng Experience (JavaScript)
Source: https://developers.wyng.com/docs/experience-sdk/intro
This code snippet demonstrates how to disable debug mode for a Wyng experience after it has been enabled. Turning off debug mode reverts the experience to its normal visibility settings. Ensure you replace '63121234124134' with the correct experience ID.
```javascript
window.wyng['63121234124134'].setDebug(false);
```
--------------------------------
### Profiles SDK - Initialization
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-sdk
Details on how to initialize the Profiles SDK using a Public Access Token, unless personalization is automatically enabled.
```APIDOC
## Profiles SDK - Initialization
### Description
Initialize the SDK before using any functions, unless 'Enable Personalization Using Profiles' is toggled on. Initialization requires a Public Access Token.
### Method
JavaScript Function Call
### Endpoint
N/A (SDK function)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
window.wyng.profiles.init('public_access_token');
```
### Response
Successful initialization prepares the SDK for subsequent function calls.
```
--------------------------------
### Enable Debug Mode for Wyng Experience (JavaScript)
Source: https://developers.wyng.com/docs/experience-sdk/intro
This code snippet shows how to enable debug mode for a specific Wyng experience. Debug mode provides additional information that is normally hidden from the user, which is useful for developing and troubleshooting live experiences. Replace '63121234124134' with your actual experience ID.
```javascript
window.wyng['63121234124134'].setDebug(true);
```
--------------------------------
### setComponentSettings
Source: https://developers.wyng.com/docs/experience-sdk/action-dispatcher
Allows setting additional query and display order for a component in a single command. This is a combined action for filtering and sorting content.
```APIDOC
## POST dispatchCampaignAction /setComponentSettings
### Description
Allows setting additional query and display order for a component in a single command. This is a combined action for filtering and sorting content.
### Method
POST
### Endpoint
`window.wyng['_WYNG_ID_'].dispatchCampaignAction`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **componentId** (string) - Required - The id of the component you want to target, e.g. `sign_up_436366175206`.
- **actionType** (string) - Required - Must be `setComponentSettings`.
- **settings** (object) - Required - An object containing key-value pairs for `additionalQuery` (string) and/or `order` (string).
- **additionalQuery** (string) - Optional - The query string for filtering content.
- **order** (string) - Optional - The sorting criteria for content display.
### Request Example
```json
{
"componentId": "flex_grid_1234567890",
"actionType": "setComponentSettings",
"settings": {
"additionalQuery": "tags.campaign_tag:featured",
"order": "created_on:desc"
}
}
```
### Response
#### Success Response (200)
This action does not return a specific success response body, but the component's settings will be updated upon successful execution.
#### Response Example
(No specific response body)
```
--------------------------------
### Segment Definition - 'profile-attribute-exists' Non-Existent Attribute Example
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
Example demonstrating the 'profile-attribute-exists' operator evaluating to false. This occurs when checking for an attribute ('some') that does not exist in the provided example profile.
```json
{
"operator": "profile-attribute-exists",
"operands": [
"some"
]
}
}
```
--------------------------------
### Install Profiles SDK via Script Tag
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-sdk
Include the Profiles SDK in your web application by adding a script tag to your HTML. This makes the SDK functions available globally as `window.wyng.profiles`.
```html
```
--------------------------------
### Progressive Form Logic with Experiences SDK
Source: https://developers.wyng.com/docs/experience-sdk/personalization
This JavaScript code demonstrates how to implement a progressive form using the Experiences SDK and Profiles SDK. It checks for existing profile attributes and dynamically hides or reveals form fields accordingly, ensuring users only fill in missing information.
```javascript
// Example: Hide fields if attribute is already known
if (ProfilesSDK.getProfile().skin_shade) {
ExperiencesSDK.hideFields(['skin_shade']);
}
// Example: Reveal fields if attribute was previously hidden
// ExperiencesSDK.revealFields(['skin_tone']);
// Example: Make a field required if it's visible
// if (ExperiencesSDK.isFieldVisible('email')) {
// ExperiencesSDK.requireFields(['email']);
// }
```
--------------------------------
### Event Payload: Campaign Loaded Example
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
Example of the JSON payload for the 'campaign_loaded' event. This event signifies that a campaign has finished loading and includes the experience ID.
```json
{
eventType: 'campaign_loaded',
experienceId: '63becf4248c8268d8beef8bf'
}
```
--------------------------------
### Get Product Details with JavaScript
Source: https://developers.wyng.com/docs/experience-sdk/product
Retrieves product details using the provided Product ID or SKU. This method is part of the Wyng JavaScript SDK and requires the `window.wyng` object. It returns a comprehensive object containing product attributes like ID, name, description, price, and availability.
```javascript
const product = await window.wyng['_WYNG_ID_'].getProduct('SKU96405');
console.log(product);
```
--------------------------------
### Profile Lookup Not Found Response (JSON Example)
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
This is an example of the response when a profile is not found. It returns an empty JSON object and a 200 status code.
```JSON
{}
```
--------------------------------
### Set Component Settings (Query and Display Order)
Source: https://developers.wyng.com/docs/experience-sdk/action-dispatcher
Allows setting multiple component settings, specifically the additional query for filtering and the display order for sorting content, in a single action.
```javascript
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: "setComponentSettings",
settings: {
additionalQuery: 'tags.marketer_tags:beach',
order: 'created_on:desc'
}
}
)
```
--------------------------------
### Reveal Unlocked Event Payload Example
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
An example of the payload for the 'reveal_unlocked' event. This event is triggered when a Reveal component transitions to an unlocked state. The payload includes the 'componentId' of the affected Reveal component.
```json
{
componentId: "reveal_123"
}
```
--------------------------------
### Event Payload: New Content Added Example
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
Example of the JSON payload for the 'flex_grid_new_content_added' event. This payload is emitted when new content is loaded into the Flex Grid, providing details about the updated content.
```json
{
eventType: "flex_grid_new_content_added",
componentId: "flex_grid_123456789",
contentStream: "a123456-1a1b-78ab-aa00-abcdef1ghi23",
tilesCount: 25,
overallCount: 34,
totalResults: 87,
isAllContentDisplayed: false,
}
```
--------------------------------
### Set and Validate Multi-Select Field (Array of Objects)
Source: https://developers.wyng.com/docs/experience-sdk/action-dispatcher
This example demonstrates setting and validating a Multi-Select field using an array of objects for the `fieldValue`. Each object specifies the `choice`, its `id` (index), and whether it should be `selected`.
```javascript
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'multi_select_836826252302',
fieldValue: [
{
choice: 'Choice 1',
id: 0,
selected: false
},
{
choice: 'Choice 2',
id: 1,
selected: true
}
]
}
)
```
--------------------------------
### Reveal Outcome Selected Event Payload Examples
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
Examples of the payload structure for the 'reveal_outcome_selected' event. This event is triggered when an outcome is chosen. Payloads differ based on the Reveal mode (Linked Reward or Random).
```json
{
componentId: 'reveal_123',
reward: {
code: 'sale10',
label: 'Get 10% discount'
}
}
```
```json
{
outcomeName: 'Win a car',
componentId: 'reveal_123',
}
```
--------------------------------
### Segment Definition - 'profile-attribute-exists' Operator Example
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-api
Example of using the 'profile-attribute-exists' operator to check if a profile has a specific attribute set. This expression evaluates to true if the 'email' attribute exists in the profile.
```json
{
"operator": "profile-attribute-exists",
"operands": [
"email"
]
}
}
```
--------------------------------
### Navigate to Prior Quiz Question
Source: https://developers.wyng.com/docs/experience-sdk/action-dispatcher
Allows navigation back to the previous question within a quiz component.
```APIDOC
## POST /websites/developers_wyng/quiz/prior_question
### Description
Navigates the user back to the previous question in a quiz component. This action typically does not require a `componentId` if there's only one quiz on the page.
### Method
POST
### Endpoint
`/websites/developers_wyng/quiz/prior_question`
### Parameters
#### Request Body
- **actionType** (string) - Required - Must be `goToPriorQuizQuestion`.
### Request Example
```json
{
"actionType": "goToPriorQuizQuestion"
}
```
### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.
#### Response Example
```json
{
"status": "success"
}
```
```
--------------------------------
### Upload Editor Text Changed Event Payload Example
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
An example of the payload structure for the 'upload_editor_text_changed' event. This event is triggered when the user modifies text within the editor. The payload contains the new 'value' of the text input.
```json
{
value: "user input"
}
```
--------------------------------
### Upload Editor Item Added Event Payload Examples
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
Examples of the payload structure for the 'upload_editor_item_added' event. This event is triggered when a user drops a sticker or frame onto the editor. The payload includes the type of item and its URL.
```json
{
type: "stickers",
url: "http://web.site"
}
```
```json
{
type: "frames",
url: "http://web.site"
}
```
--------------------------------
### Event Payload Example for Quiz
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
This is an example of the event payload generated when a quiz result is shown. It includes details about the quiz, the result, and user responses. This payload is typically used to track quiz outcomes and user engagement.
```json
{
"id": "quiz_123456",
"resultId": "result_123456",
"name": "Result 1",
"behavior": "default",
"description": "You won.",
"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,
"correct_answer_id": "answer_789",
"correct_answer_text": "Q2: Answer 3 text",
"correct_answers": [
{
"answer_id": "answer_789",
"answer_text": "Q2: Answer 3 text"
}
]
}
]
}
```
--------------------------------
### Set and Validate Multi-Select Field (Array of Strings)
Source: https://developers.wyng.com/docs/experience-sdk/action-dispatcher
This example shows how to set and validate a Multi-Select field using an array of strings for the `fieldValue`. Each string represents a choice value to be selected. Case sensitivity applies.
```javascript
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'multi_select_836826252302',
fieldValue: ['Choice 2']
}
)
```
--------------------------------
### Event Payload: Flex Grid Displaying Content Changed Example
Source: https://developers.wyng.com/docs/experience-sdk/event-listener
Example of the JSON payload for the 'flex_grid_displaying_content_changed' event. This payload details changes in the Flex Grid's displayed content, including component and content stream IDs.
```json
{
"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"
}
```
--------------------------------
### Get User Profile Data (Async/Await)
Source: https://developers.wyng.com/docs/wyng-profiles/profiles-sdk
Retrieves user profile information asynchronously using `getProfile` and `await`. This method fetches both public and private profile data if authentication has been completed, otherwise, only public data is returned. The code includes error handling for situations where a user might not have a profile yet, logging a warning instead of crashing.
```javascript
try {
const profile = await window.wyng.profiles.getProfile();
console.log(profile);
} catch (error) {
console.warn('Profile does not (yet) exist for this User');
}
```
--------------------------------
### Navigate to a Specific Page using setPage
Source: https://developers.wyng.com/docs/experience-sdk/navigation-functions
The `setPage` method allows you to navigate to a specific page within the Wyng experience by its ID. This is a straightforward navigation method with no configurable options or dependencies beyond the Wyng SDK being loaded.
```javascript
window.wyng['_WYNG_ID_'].setPage('page_12345');
```
--------------------------------
### Define Sample Data Model in JSON
Source: https://developers.wyng.com/docs/experience-sdk/personalization
This JSON structure defines a sample data model for the Profiles SDK. It includes fields for visitor IDs, preferences like skin shade and tone, and favorite sports. This model can be directly imported into your Wyng account.
```json
{
"strong_id": "email",
"ids_priority": [
"email",
"uids"
],
"fields": [
{
"is_key": true,
"status": "active",
"type": "set",
"is_hash_field": false,
"relevance_window": null,
"allow_other_values": true,
"values": [],
"id": "uids",
"is_personal_data": false,
"name": "UIDs",
"retention_window": null
},
{
"is_key": false,
"status": "active",
"type": "set",
"is_hash_field": false,
"relevance_window": null,
"allow_other_values": false,
"values": [
"Very Light",
"Light",
"Medium",
"Medium Dark",
"Dark"
],
"id": "skin_shade",
"is_personal_data": false,
"name": "Skin Shade",
"retention_window": null
},
{
"is_key": false,
"status": "inactive",
"type": "set",
"is_hash_field": false,
"relevance_window": null,
"allow_other_values": false,
"values": [
"Pink",
"Tan",
"Olive",
"Brown",
"Black"
],
"id": "skin_tone",
"is_personal_data": false,
"name": "Skin Tone",
"retention_window": null
},
{
"is_key": false,
"status": "active",
"type": "text",
"is_hash_field": false,
"relevance_window": null,
"allow_other_values": false,
"values": [],
"id": "undertone",
"is_personal_data": false,
"name": "Undertone",
"retention_window": null
},
{
"is_key": true,
"status": "active",
"type": "text",
"is_hash_field": false,
"relevance_window": null,
"allow_other_values": false,
"values": [],
"id": "email",
"is_personal_data": false,
"name": "email",
"retention_window": null
},
{
"is_key": false,
"status": "active",
"type": "set",
"is_hash_field": false,
"relevance_window": null,
"allow_other_values": false,
"values": [
"Football",
"Basketball",
"Baseball",
"Hockey"
],
"id": "favorite_sport",
"is_personal_data": false,
"name": "Favorite Sport",
"retention_window": null
}
]
}
```
--------------------------------
### Flex Grid Component - Expanded Media (Any)
Source: https://developers.wyng.com/docs/experience-sdk/overriding-components/overridable-components
Allows rendering any type of media on the left-hand side of the details modal view. Use specific media components when possible.
```APIDOC
## Expanded Media (Any)
### Description
Any media, displayed on the left hand side in the details modal view (on the top in mobile version). Note: this allows to render any media on left-hand side from scratch, but may require more efforts - in a lot of cases it should be easier to use `FlexGridDetailsMediaImage`, `FlexGridDetailsMediaVideo`, `FlexGridDetailsMediaTextOnly`.
### Key
`FlexGridDetailsMediaAny`
### Parameters
#### Request Body
- **product** (Object) - Required - All available information about the UGC item.
```