Reveal Methods
The Reveal component allows you to create interactive experiences where users can participate to discover outcomes. The methods below provide programmatic control over the Reveal component's behavior, allowing you to lock/unlock participation, select outcomes, and manage the participation lifecycle.
Breaking changes were made on October 26, 2022. Please check if you are using the following deprecated calls and change them to the new format:
// Deprecated
revealComponentSelectOutcome('reveal_123', { outcomeName: 'Outcome 1'});
revealComponentSelectOutcome('reveal_123', 'Outcome 1');
// Deprecated
revealComponentResetOutcome('reveal_123');
revealComponentResetParticipation('reveal_123');
revealComponentLock
Lock pre-reveal content so user cannot participate. Use this to gate or limit participation based on some custom logic.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component to lock |
Example
window.wyng['_WYNG_ID_'].revealComponentLock('reveal_123');
revealComponentUnlock
Unlock pre-reveal content so user can start to participate. Use this to gate or limit participation based on some custom logic.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component to unlock |
Example
window.wyng['_WYNG_ID_'].revealComponentUnlock('reveal_123');
revealComponentSelectOutcome
Select a specific outcome to display to the user. If the Outcome selection mode is "random", outcomeName is not required and will be ignored if present. If the Outcome selection mode is "custom", outcomeName is required.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component |
outcomeName | string - optional | The name of the outcome to display (for custom mode) |
Example
window.wyng['_WYNG_ID_'].revealComponentSelectOutcome('reveal_123', 'Outcome 1');
revealComponentGetOutcome
Access information about the outcome displayed to the user.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component |
Example
window.wyng['_WYNG_ID_'].revealComponentGetOutcome('reveal_123');
revealComponentStartParticipation
Start the participation phase for a reveal component. Can be called only when a component is unlocked. This will change the component state to 'IN_PROGRESS' and send the relevant SDK and metrics events. Can be used for starting participation via SDK when you are using Custom pre-reveal or Spin-to-Win.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component |
options | object - optional | Options object containing additional settings |
Example
window.wyng['_WYNG_ID_'].revealComponentStartParticipation('reveal_123', {'outcomeName': 'Outcome 1'});
revealComponentStopParticipation
Stop the participation phase and display an outcome via SDK. This will change the component state to 'STOPPED', send the relevant SDK and metrics events, display an outcome, and update the participation state in Local Storage. This can be called for any pre-reveal type.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component |
Example
window.wyng['_WYNG_ID_'].revealComponentStopParticipation('reveal_123');
revealComponentResetParticipation
Reset outcome and participation state in Local Storage to allow a user to participate again.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component |
Example
window.wyng['_WYNG_ID_'].revealComponentResetParticipation('reveal_123');
revealComponentSpinWheelAndStop
Spin the wheel and show the outcome. This is an alias wrapping revealComponentStartParticipation for convenience when using Spin-to-Win pre-reveal.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component |
options | object - required | Options object |
options.speed | number - optional | Speed of the wheel spin |
options.duration | number - optional | Duration of the spin in milliseconds |
Example
window.wyng['_WYNG_ID_'].revealComponentSpinWheelAndStop('reveal_123', { speed: 3, duration: 5000 });
revealComponentIsLocked
Check the lock/unlock status of the Reveal component.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component |
Example
window.wyng['_WYNG_ID_'].revealComponentIsLocked('reveal_123');
revealComponentSetScratchOffImage
Set a new overlay image for "Scratch Off" style Reveal components.
Arguments
| Argument | Type | Description |
|---|---|---|
componentId | string - required | The id of the reveal component |
url | string - required | URL of the new overlay image |
width | number - required | Width of the overlay image in pixels |
height | number - required | Height of the overlay image in pixels |
Example
window.wyng['_WYNG_ID_'].revealComponentSetScratchOffImage({
componentId: 'reveal_123',
url: 'https://example.com/overlay.png',
width: 600,
height: 400
});