This sample application show's Contextual SDK for both no-code and low code use-cases.
- Create an account at Contextual Dashboard.
- Install the Contextual SDK following the instructions for IOS or Android.
- Follow this video for more step-by-step guide creation.
Like something Contextual doesn’t offer in our Standard Components? Contextual provide a powerful capability to use your favourite open source components or even your own in-App elements as part of Guides. We call these "GuideBlocks".
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.
- Create an account at Contextual Dashboard.
- Install the Contextual SDK following the instructions for IOS or Android.
- Open src/components/Tab1.js and add the sample wrapper code for FancyAnnouncement to your App.
- Copy-Paste the instantiation of the Guide Component AFTER the Contextual SDK registration.
- Build your App and Run it.
- Click on the Contextual Creator (the Chrome extension) and create a guide:
- Pick one of the “Standard” Contextual Announcement Templates.
- Use this video to see the steps
- Preview the Announcement with the Creator - it should look similar to the template
- Now go to the Extensibility section (Extra JSON) in the sidebar and paste in the JSON as follows:
{ "guideBlockKey": "FancyAnnouncement" }
- Match the name in the JSON to the name of your wrapper in the code
- If you are still in Preview Mode (or when you run the App with the guide enabled), then you should see the Announcement will magically change to Fancy Announcement
- Change the Title and Content and buttons. Play around with it and see the results.
- 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.