Making Bots With Typeform

ata collection in developing countries is always challenging. How does one reach out to a large and unfamiliar demographic through the right channels with the right incentives to get enough responses? More importantly, how can an international NGO equip staff in their field offices, who have the social expertise but not the technical capacity, with the right technology to conduct such surveys?


A bot as a tool for non-geek users

While I was a teaching assistant at Codeworks, I had the opportunity to explore these questions and turn the resulting idea into an MVP, Typeform to Facebook Messenger Server, with direction from one of their lead instructors, Nandan Rao.

The Typeform questions embedded into Facebook Messenger

The idea is simple. Give non-developers the power to create their own bots using Typeform and let the software take care of the rest. With Typeform, a field worker can easily create a form with all the questions she'd like to ask in a simple, intuitive way. She can then plug the typeform into our server, tell us where her Facebook bot lives and voilá! Her Facebook bot is set up to ask questions to anyone who visits her page on Facebook.


Translating Typeform’s API for Facebook Messenger

Typeform has a simple, elegant API, which means I could get to the meat of the problem pretty quickly — translating Typeform questions into responses for the Facebook bot to post to my users. The forms had more question types than could be directly translated to the Facebook Messenger Platform. It was tricky, trying to translate the richness of the Typeform form experience to Facebook chat. This was in no part a failing of the Messenger Platform of course, Facebook Messenger is after all meant mainly for interaction via chat and not forms.

Typeform can encode 21 different types of questions. Users can select from drop downs, give ratings, provide feedback using an opinion scale, make a choice based on a picture — it goes on. Facebook, meanwhile, has three primary ways to interact with the user: with chat, buttons or quick replies, which allows the user to send quick yes/no answers or provide the bot with things like their location and email address.

Multiple choice in Typeform and in Facebook Messenger

Some question types could be converted in an obvious way, for example, a Typeform yes-no question type could be translated directly to a quick reply, while a dropdown became a row of buttons stacked on top of each other. Others were less straightforward. Star ratings and opinion scales ended up boiling down to the same thing due to screen real estate on Facebook Messenger — while there was no straightforward way to standardise a question asking for date input without throwing up a webview.

Nevertheless, all the question types, from multiple choice questions to questions that asked for personal details and long form answers, eventually found a counterpart representation on Facebook Messenger.


Improvements for a more dynamic experience

The MVP does not yet have Typeform's coolest feature represented — logic jumps. One of their featured typeform examples is a ‘Choose Your Own Adventure’ template. Depending on the choices you make, the form implements a decision graph that sends the user down different paths.

Me in the zone ©Codeworks

I can imagine that implementing the logic jumps along with NLP technology would create a chatbot that could spark the curiosity of anyone interacting with it and make the experience a very rich and interesting one.

There's still a lot to be done to make the project really non-developer friendly, but in the meantime, if you want to develop your own Typeform to Facebook Messenger interface, I've also written the library Typeform to Facebook Messenger to translate the questions from one form to another, and it's on NPM.

I hope this project will inspire others to build apps that can bring the power and fun of chatbots to anyone who needs one. If you want to learn more about Codeworks, a great Javascript bootcamp in Europe that enabled me to develop this project. You can read about them here and visit their website.

🚀 Interested in joining Codeworks? Click here!

🎵 Sweet dreams are made by geeks, who are we to ditch a PR? We travel to events and assorted meetups. Everybody is looking for swag.

Typeform's Engineering Blog

Engineer-provoking. A little witty. Definitely nerdy. Sometimes revelational. In code -and humans- we trust. → https://developer.typeform.com/

Isabella Chen

Written by

Software Engineer | Codeworks | Plain Concepts

Typeform's Engineering Blog

Engineer-provoking. A little witty. Definitely nerdy. Sometimes revelational. In code -and humans- we trust. → https://developer.typeform.com/