Team NudgeFudge presents NudgeLab.
No Code App Nudges
built on ☕ at HackRx3.0.
Develop an in-app tool to allow setting up in-app nudges for various use cases, tool to allow nudge configuration on screen without need of having to code them on the screen / per use case.
- A Nudge is a visual element that is used to draw attention of the user to something, for example a new section in an application.
- There are two types of Users that we have considered
- Admin, a kind of user that adds the nudges.
- Client are the ones for which the nudges are created.
- We have considered there are two types of ways to render a nudge
- Campaigns, that can be run manually by Admin.
- Trigger based, that are displayed after execution of a particular function, identified via unique
event_label.
- Our implementation builds upon the existing backend servers of a business. These backends are referred to as Business Backend.
- MongoDB
- ExpressJS
- ReactJS
- NodeJS
- TypeScript
- Redis
- Go to the
Admin Dashboardand create your project - In your project, add some nudges
- Copy the script tag generated and paste it at the end of your
bodyelement
<body>
<!-- your code -->
<script
src="https://nudgelab.jagnani73.com/api/v1/nudge/campaign.js"
data-app-id="demo-app-id"
></script>
</body>- Every project created is associated with its own unique
app_idthat makes the project, and all the nudges created under it independent of the platform. - The ideal implementation of our application consists of a Client SDK, Backend SDK, and a Backend Server, Frontend Server.
- The admin once authenticated on the Frontend Server, creates a project (and in it the nudges) that communicates with the Backend Server; stores the data.
- The Client SDK essentially works as a CDN that at the end renders the nudge on when and where needed. It handles the Campaign Nudges by fetching all of the configured campaign nudges for the specified
app_id. - Since we are building upon an existing business backend, there are API calls present. Our Backend SDK intercepts those calls and injects an
event_labelto the data. This data is then pushed to a SMQ (Simple Message Queue). - The Backend Server has a listener on the queue and pops every message received in the queue. It then filters and fetches out the nudges based on the
event_labelandapp_id. These fetched configurations are then pushed back to the Client SDK that is listening to a web socket for these Trigger Nudges. - On receiving configuration on the socket, the Client SDK again renders the requested nudges on the application.
- The Admin will authenticate itself.
- It will then create a project.
- Inside the project, there is a application specific SDK/CDN
scriptthat needs to be pasted in the client application. - It will then create the desired nudges in the project.
- Add more types of nudges, with more customizing options
- Dynamic drag and drop to get IDs of elements
- Analytics for the nudges and how the user responds to them; tracking user engagement
- Using a DLQ (Dead Letter Queue) for nudges that were not able to be received; cases of failure of delivery
- Adding support for more platforms
- Adding user specific nudges
NudgeLab is available under the MIT license. See the LICENSE file for more info.
Please read Contributing.md for details on our code of conduct, and the process for submitting pull requests to us.
Many people have contacted us asking if they can use this code for their own websites. The answer to that question is usually "yes", with attribution. There are some cases, such as using this code for a business or something that is greater than a personal project, that we may be less comfortable saying yes to. If in doubt, please don't hesitate to ask us.
We value keeping this site open source, but as you all know, plagiarism is bad. We spent a non-negligible amount of effort developing, designing, and trying to perfect this iteration of our website, and we are proud of it! All we ask is to not claim this effort as your own.
Refer to this handy quora post if you're not sure what to do. Thanks!