MBTI Test plugin

Hey guys! I have a strong desire to start building plugins. Watched a couple of youtube videos already. But i am still super newbie to this topic. My current idea is to build MBTI test plugin for my app so my users will be able to get MBTI result without leaving the app + save result to their profile. I found this code for plugin with HTML , CSS and JS code already written.

Can you guys give me some tips where and how to start moving twards my goal?

P.S. It is possible to create this with bubble database itself. But I just want to save some time for me and reuse that is already there. Plus share my craft with others (MBTI tests can be useful in different scenarios)

Building a plugin starts with knowing how you’d want the user (Bubble developer) to be able to use it and also how you want to let them design their app’s users experience.

That translates to whether you want it to be operate client-side or server-side
what kinds of inputs and outputs you want a bubble developer to be able to make use of.

What I mean is this:

One way the plugin could function is by exposing a list of questions and a single action that takes in a list of all the answers and outputs a resulting MBTI type.

So how do you visualize someone using this plugin?

1 Like

Thanks for your detailed explanation. What I was thinking about is to take code from my example from codepen and give users the possibility to embed this code (survey to their page), set width/height + calculate the result and save MBTI type to a field in Bubble database

I don’t know if a plugin is necessary for this. You can create this using bubble interface.

1 Like

You could create an element on the plugin that displays this HTML and processes the answers, returning the result on the plugin element’s state.

A couple of things to keep in mind:

  • you’ll have to generate this html via JS in the element’s preview section on the plugin editor
function(instance, properties) {

let box = $(ALL YOUR HTML HERE);

  • You could then insert the JS in the initialize section of the plugin editor

There are some nuances to converting a codepen example to a plugin, because of Bubble’s plugin wrappers. Maybe a crash course like this helps: Designing and Building Bubble Plugins in 2022 - The COMPLETE A-Z Tutorial - YouTube

1 Like

Wow! Thank you for your first and second answer. Very detailed and complete. Appreciate it!

Hey! @moabe.leite I know, I was thinking that with plugin I can save some time and also keep my database cleaner. Also with plugin I can share this technology with other pople.

Did you ever build this? Because it’s exactly what I’m looking for.