Whatsapp Flow JSON drag and drop Builder
About me
I am a Senior Product Developer involved in developing frontend application tools to provide solution for the client usecases.
The problem I wanted to solve
Flow JSON enables businesses to create workflows in WhatsApp by accessing the features of WhatsApp Flows using a custom JSON object developed by Meta. To easily create a flow json i wanted to create drag and drop flow builder.
What is Whatsapp Flow JSON drag and drop Builder?
Recently created MVP for the Whatsapp Flow JSON drag and drop Builder
More details can be found in this video
https://www.loom.com/share/0bb995c1712e4eff8f42b539c9ddae2a
Tech stack
vvvebjs editor or craft js for base form structure,
https://www.vvveb.com/vvvebjs/editor.html
https://craft.js.org/
javascript, jquery, php
whatsapp flow api - https://developers.facebook.com/docs/whatsapp/flows/reference/flowsapi
The process of building Whatsapp Flow JSON drag and drop Builder
- create form structure with the input field components (dropdown, radio, checkbox) etc.
- convert html to json
- post json to whatsapp api
- render the whatsapp flow preview in iframe
Challenges I faced
converting and parsing the html to whatsapp flow based json strucutre.
Key learnings
Multiple screen flow can be developed using the form builder editor.
This react js based whatsapp flow json builder is also can be developed using craft js.craft js helps us to create the form (dropdowns/checkbox/radio options etc,,) stricture using the react js tech stack.
Final thoughts and next steps
Next i planned to add an option to import the whatsapp flow json into the editor to load the existing available whatsapp flow jsons.
