|
| 1 | +## circlevideo |
| 2 | + |
| 3 | +Everyone loves Confetti! This is a simple example to get you started with Contextual Extensibility without needing to hard-code your changes every time you want to celebrate with the user. |
| 4 | + |
| 5 | +1. Create an account at [Contextual Dashboard](https://dashboard.contextu.al/ "Contextual Dashboard"). |
| 6 | +2. Install the Contextual SDK following the instructions for IOS or Android. |
| 7 | +3. Copy-Paste the instantiation of the Guide Component AFTER the Contextual SDK registration. |
| 8 | + |
| 9 | +**In your build.gradle add:** |
| 10 | + |
| 11 | +``` |
| 12 | +implementation 'com.github.GuideBlocks-org:Android-GuideBlocks:0.0.4', { |
| 13 | + exclude group: 'com.google.android.material' |
| 14 | + exclude group: 'com.github.bumptech.glide' |
| 15 | + } |
| 16 | +``` |
| 17 | + |
| 18 | +**In your activities where you want to use GuideBlocks add (for example):** |
| 19 | + |
| 20 | +``` |
| 21 | +import com.contextu.al.circlevideo.CircleVideoGuideBlocks |
| 22 | +import com.contextu.al.core.CtxEventObserver |
| 23 | +``` |
| 24 | + |
| 25 | +for the GuideBlock you wish to use, then add |
| 26 | + |
| 27 | +``` |
| 28 | + val circleVideoGuideBlocks = "CircleVideo" |
| 29 | + Contextual.registerGuideBlock(circleVideoGuideBlocks).observe(this){ |
| 30 | + contextualContainer -> |
| 31 | + if(contextualContainer.guidePayload.guide.guideBlock.contentEquals(circleVideoGuideBlocks)){ |
| 32 | + val circleVideoView = CircleVideoGuideBlock(this@MainActivity) |
| 33 | + val contentUrl:String = contextualContainer.guidePayload.guide.contentText.text ?: "" |
| 34 | + circleVideoView.show(contentUrl) |
| 35 | + } |
| 36 | + } |
| 37 | +``` |
| 38 | + |
| 39 | + |
| 40 | +4. Build your App and Run it on a phone or |
| 41 | +5. Go to the Dashboard and create a guide: |
| 42 | +* Use this [video]( https://vimeo.com/863886653#t=0m58s "Another Guide Creation How-to") to see the steps |
| 43 | +* choose “Display the guides on any screen of your app” and |
| 44 | +* pick one of the “Standard” Contextual Announcement Templates. |
| 45 | +* Preview the Announcement on your Phone - it should look similar to the template |
| 46 | +6. Now go to the Extensibility section in the sidebar and paste in the JSON as follows: |
| 47 | + ` |
| 48 | + { |
| 49 | + "guideBlockKey": "CircleVideo" |
| 50 | + } |
| 51 | + ` |
| 52 | +* Match the name in the JSON to the name of your wrapper in the code |
| 53 | + |
| 54 | +JSON editing |
| 55 | + |
| 56 | +<img src="https://raw.githubusercontent.com/contextu-al/FavDish/main/screenshots/confettiJSON.png" alt="Adding your Extra JSON" width="200"/> |
| 57 | + |
| 58 | +or use the Tree method of editing |
| 59 | + |
| 60 | +<img src="https://raw.githubusercontent.com/contextu-al/FavDish/main/screenshots/confettiTree.png" alt="Adding your Extra JSON" width="200"/> |
| 61 | + |
| 62 | +7. If you are still in Preview Mode, then you should see the Announcement will magically change to confetti |
| 63 | +8. Change the Title and Content and buttons. Play around with it and see the results. |
| 64 | +9. Save the guide and show to your Product Team, once you release this version of the App they can launch confetti to whoever they want, whenever they want. |
| 65 | + |
0 commit comments