Re-usable open source components for IOS, Android, Web Apps. GuideBlocks help your App iterate fast and free up developers to work on features instead of engagement. Developers can add GuideBlocks to your App and then allow your Product Managers, Marketers, Designers launch the GuideBlock to target users without having do more coding or AppStore/Play releases.

You can also make an existing App component into a GuideBlock (see instructions), you can then keep private or publish here at https://guideblocks.org

Product teams are always asking their developers to tweak engagement elements of your App. The GuideBlocks mission is to let them change it themselves once you've done the initial coding.

So this will Allow you to Code Once, Run Anywhere, Anytime and for Any Users. When connected to the Contextual SDK and platform, the Product team can change wording, colours and then launch to targeted groups of App users (or all users) without an App release.

The other benefits are:

• Product Adoption audience targeting and analytics
• Improve User Activation and Retention without resorting to Anti–patterns like Pop-ups and Push Notifications
• Make use of your existing app components by wrapping them into GuideBlocks
• Built-in no-code walthroughs, tips, announcements, FAQs, feedback surveys and more.

This video explains GuideBlocks and Extensibility:

To access no-code and make your low-code GuideBlock available create an account

The best way to start is review one of the existing GuideBlocks in this repo, you will be creating a wrapper around your normal logic for visual elements.

1. (Optional) Unbundle the component in your code that you want to make a GuideBlock. You might need a bit of re-factoring.
2. (Optional) Prepare to take the configuration from JSON data (see the payload)
3. Integrate the Contextual SDK.
   • For IOS and Android
   • For Web you can try without adding the SDK by using the Contextual Chrome Extension
4. Implement the following methods in the GuideBlock (refer to the Sample Apps below to see examples)
   • presentGuideBlock which wraps your code for runtime display to show to the user. IOS ref:
   • isDismissingGuide a callback when your GuideBlock has completed or being dismissed. Perform any cleanup required to remove your component from display.
5. Map the incoming GuidePayload JSON from the Contextual Dashboard to your code's configurable elements [IOS ref:].
   • For example, text and image content, size, shape, colour. The configurations closely follow well-known CSS type terms.
   • If you have additional parameters that are not available in the GuidePayload, then they will be added in the Extensibility section.
6. Register your GuideBlock for use in the Contextual Dashboard with registerGuideBlock. IOS ref:
7. Create a Guide in the Contextual Dashboard and under the Extensibility section, add a key named guideBlockKey and enter in the value that you registered the GuideBlock as (in step 6). Add any other parameters you need from Step 5.
8. Enter preview mode on your device and view your GuideBlock. Once it is working OK, you can test it in runtime mode.
9. If you wish to contribute your GuideBlock to these public repos, follow the QA process in the Android or iOS Wiki.

Doing a quick test? Just clone these and build, the master branch should have all the completed GuideBlocks. The develop branche Contribute a GuideBlock? use these samples to submit for QA (see above)

• for IOS at https://github.com/contextu-al/AirBnB-iOS
• for Android at https://github.com/contextu-al/FavDish
• for Web at https://github.com/contextu-al/airbnb-web