Skip to content

Commit 2a91f2f

Browse files
author
Daniel Quah
committed
2 parents d2e3260 + ef45447 commit 2a91f2f

5 files changed

Lines changed: 191 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,39 @@ There are two ways to use GuideBlocks:
1818

1919
0. you have an account on the Contextual Dashboard and you've added the Android SDK, you've added the **app_key** into your App and tested a simple Guide in your App.
2020

21+
1. In your build.gradle add:
22+
23+
```
24+
implementation 'com.github.GuideBlocks-org:Android-GuideBlocks:0.0.4', {
25+
exclude group: 'com.google.android.material'
26+
exclude group: 'com.github.bumptech.glide'
27+
}
28+
```
29+
30+
2. In your activities where you want to use GuideBlocks add (for example):
31+
32+
```
33+
import com.contextu.al.confetti.ConfettiGuideBlocks
34+
import com.contextu.al.core.CtxEventObserver
35+
```
36+
37+
for the GuideBlock you wish to use, then add
38+
39+
```
40+
val confettiGuideBlocks = "confetti"
41+
42+
Contextual.registerGuideBlock(confettiGuideBlocks).observe(this){ contextualContainer ->
43+
if(contextualContainer.guidePayload.guide.guideBlock.contentEquals(confettiGuideBlocks)){
44+
ConfettiGuideBlocks(this@MainActivity).show()
45+
}
46+
}
47+
```
48+
49+
50+
4. build and run!
51+
52+
53+
2154

2255
### 2. Make your own App elements into private GuideBlocks
2356

@@ -51,11 +84,11 @@ Email: support@contextu.al
5184
TestApp: https://github.com/contextu-al/FavDish
5285
TestAppBranch: confetti
5386
Description: Launch confetti to targeted users at any time with this low-code GuideBlock
54-
Acknowledgements: https://github.com/simibac/ConfettiSwiftUI
55-
Screenshot: https://github.com/GuideBlocks-org/iOS-GuideBlocks/blob/main/Sources/iOS-GuideBlocks/Confetti/confetti-guideblock.png
56-
Video: https://vimeo.com/907653617/7384df8a67
87+
Acknowledgements: https://github.com/DanielMartinus/Konfetti
88+
Screenshot:
89+
Video: https://vimeo.com/manage/videos/909526616/8efaae6607
5790
Extensibility: {
5891
"guideBlockKey": "Confetti"
5992
}
6093
```
61-
94+

‎app/src/main/java/com/contextu/al/confetti/GuideBlock.yaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```
2+
Title: Confetti
3+
Author: Daniel Quah
4+
Email: support@contextu.al
5+
TestApp: https://github.com/contextu-al/FavDish
6+
TestAppBranch: confetti
7+
Description: Launch confetti to targeted users at any time with this low-code GuideBlock
8+
Acknowledgements: https://github.com/DanielMartinus/Konfetti
9+
Screenshot:
10+
Video: https://vimeo.com/manage/videos/909526616/8efaae6607
11+
Extensibility: {
12+
"guideBlockKey": "confetti"
13+
}
14+
```
15+

‎app/src/main/java/com/contextu/al/confetti/README.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
## confetti
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.confetti.ConfettiGuideBlocks
22+
import com.contextu.al.core.CtxEventObserver
23+
```
24+
25+
for the GuideBlock you wish to use, then add
26+
27+
```
28+
val confettiGuideBlocks = "confetti"
29+
30+
Contextual.registerGuideBlock(confettiGuideBlocks).observe(this){ contextualContainer ->
31+
if(contextualContainer.guidePayload.guide.guideBlock.contentEquals(confettiGuideBlocks)){
32+
ConfettiGuideBlocks(this@MainActivity).show()
33+
}
34+
}
35+
```
36+
37+
38+
4. Build your App and Run it on a phone or
39+
5. Go to the Dashboard and create a guide:
40+
* Use this [video]( https://vimeo.com/863886653#t=0m58s "Another Guide Creation How-to") to see the steps
41+
* choose “Display the guides on any screen of your app” and
42+
* pick one of the “Standard” Contextual Announcement Templates.
43+
* Preview the Announcement on your Phone - it should look similar to the template
44+
6. Now go to the Extensibility section in the sidebar and paste in the JSON as follows:
45+
`
46+
{
47+
"guideBlockKey": "confetti"
48+
}
49+
`
50+
* Match the name in the JSON to the name of your wrapper in the code
51+
52+
JSON editing
53+
54+
<img src="https://raw.githubusercontent.com/contextu-al/FavDish/main/screenshots/confettiJSON.png" alt="Adding your Extra JSON" width="200"/>
55+
56+
or use the Tree method of editing
57+
58+
<img src="https://raw.githubusercontent.com/contextu-al/FavDish/main/screenshots/confettiTree.png" alt="Adding your Extra JSON" width="200"/>
59+
60+
7. If you are still in Preview Mode, then you should see the Announcement will magically change to confetti
61+
8. Change the Title and Content and buttons. Play around with it and see the results.
62+
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.
63+

‎app/src/main/java/com/contextu/al/fancyannouncement/GuideBlock.yaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```
2+
Title: Fancy Announcement
3+
Author: Daniel Quah
4+
Email: support@contextu.al
5+
TestApp: https://github.com/contextu-al/FavDish
6+
TestAppBranch: main
7+
Description: A modal popup that you want to style your way.
8+
Screenshot:
9+
Video:
10+
Extensibility: {
11+
"guideBlockKey": "FancyAnnouncement"
12+
}
13+
```
14+

‎app/src/main/java/com/contextu/al/fancyannouncement/README.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
## Fancy Announcement
2+
3+
In this example, we show how to make a Fancy Announcement, just like the crazy ones your Designer comes up with 🤣. Its a simple example to get you started with Contextual Extensibility without needing to hard-code your changes every time you want to update the tip.
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.fancyannouncement.FancyAnnouncementGuideBlocks
22+
import com.contextu.al.core.CtxEventObserver
23+
```
24+
25+
4. for the GuideBlock you wish to use, then Copy-Paste the instantiation of the Guide Component AFTER the Contextual SDK registration.
26+
27+
```
28+
val faGuideBlocks = "FancyAnnouncement"
29+
30+
Contextual.registerGuideBlock(faGuideBlocks).observe(this){ contextualContainer ->
31+
if(contextualContainer.guidePayload.guide.guideBlock.contentEquals(faGuideBlocks)){
32+
FancyAnnouncementGuideBlocks(this@MainActivity).show()
33+
}
34+
}
35+
```
36+
37+
5. Build your App and Run it on a phone or
38+
6. Go to the Dashboard and create a guide:
39+
* Use this [video]( https://vimeo.com/863886653#t=0m58s "Another Guide Creation How-to") to see the steps
40+
* choose “Display the guides on any screen of your app” and
41+
* pick one of the “Standard” Contextual Announcement Templates.
42+
* Preview the Announcement on your Phone - it should look similar to the template
43+
7. Now go to the Extensibility section in the sidebar and paste in the JSON as follows:
44+
`
45+
{
46+
"guideBlockKey": "FancyAnnouncement"
47+
}
48+
`
49+
* Match the name in the JSON to the name of your wrapper in the code
50+
51+
JSON editing
52+
53+
<img src="https://raw.githubusercontent.com/contextu-al/FavDish/main/screenshots/FancyAnnouncementJSON.png" alt="Adding your Extra JSON" width="200"/>
54+
55+
or use the Tree method of editing
56+
57+
<img src="https://raw.githubusercontent.com/contextu-al/FavDish/main/screenshots/FancyAnnouncementTree.png" alt="Adding your Extra JSON" width="200"/>
58+
59+
8. If you are still in Preview Mode, then you should see the Announcement will magically change to Fancy Announcement
60+
9. Change the Title and Content and buttons. Play around with it and see the results.
61+
10. Save the guide and show to your Product Team, once you release this version of the App they can launch Fancy Announcement to whoever they want, whenever they want.
62+

0 commit comments

Comments
 (0)