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

Effect Properties

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>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.