.png){kind=logo}
Engagement Effects and Configurations
Kahani Engagement Effects Configurations
Listed below are the effect configurations for the Kahani module and the necessary properties that need to be passed to the stories.json file.
Right now, there are two types of effects, attract effects and callout effects.
The callout effect is the effect that can either affect a specific story or the entire story blocks, an example is the leading arrow effect, sweep in animation, and floating-point callout effect.
Attract effects usually affect a specified story. An example would be depress and floating-point
Leading Arrow/Sweep Effect/Hot Pocket Call-out
To enable these three effects on a story block, we add the below attributes to the story block object:
Leading Arrow
Sweep In Effect
Hot Pocket Effect
"calloutEffect": { <br> "leadingArrowEffect": { <br> "isEnabled": false, <br> "title": "See", <br> "text": "My story" <br> }, <br> "hotPocketEffect": { <br> "isEnabled": false, <br> "text": "Check it out!" <br> }, <br> "enableSweepInEffect": false <br> }
Floating-point Call-out
To enable the floating-point effect, we need to add the property to the actual story object.
Play Button Effect
To enable the play-button effect, we need to add the property to the actual story object.
"effect": {
"playButton": true, <br> "callout": { <br> "effectName": "floating-point" <br> "effectText": "See our stories" <Optional for playButton effect> <br> }<br> }<br>
Tooltip Effect
Configuration - Add to the story object:
"effect": { <br> "showTooltip": true, <br> "tooltipText": "Our" <br> }
Attract Effect Configurations:
The configuration for the attract effects follows a JSON like structure with a structure to specify the configuration required to show a specific effect on the actual story, this property needs to be added to the story we want to display the effect on.
Example for binary, depress, and sweep border effect
"effect": {<br> "attractEffectName": "binary" | "depress" | "sweep-border" <br> }
There is an initial configuration that was made for the bounce effect, this can be enabled on a story by padding bounce: true to the object of a specific story.
URL Based configuration:
Leading arrow:
- ?showLeadingArrow=true&text=more%20story&title=see
Play button effect:
- ?playButtonIndex=<StoryIndex>
Depress, Binary or sweep border effect:
- ?effectName=depress&storyIndex=1
Floating point effect:
- ?showFloatingPoint=true&storyIndex=1&text=see%20our%20story
Show play button and depress effect on a story:
- ?playButtonIndex=1&effectName=depress
<em>window.KahaniModule.calloutConfig={<br> bounce: true,<br> storyIndex: 0,<br> showTooltip: true,<br> tooltipText: "Tap to learn more!"<br></em><em>}</em>