What is Tripetto
The goal of this topic is to understand what Tripetto is, how it works, what advantages it provides, and what you might expect as you start to use it in your web app or website.
Tripetto is an integral and unique solution for creating and running forms and surveys. Its operation consists of three core pillars:
- 🏗️ Visual form builder to create forms (form designer);
- 🏃 Runners to run those forms (and collect responses);
- 🧱 Blocks (question types) for use in the forms.
The unique thing about Tripetto is that those pillars are available as solely client-side components. They run in the context of the user's browser and do not rely on a specific back-end. That allows using it in any client-side environment that supports JavaScript.
It also means you have complete freedom in how you want to handle the data that Tripetto consumes or generates. You can use any back-end you like. And to make it easy, Tripetto stores its data in convenient JavaScript objects (JSON) that convert to JSON strings easily. There are three main types of JavaScript objects used by Tripetto:
- Form definition: Contains all the data that defines a form (generated by the builder);
- Form response: Contains all the collected data for a single completed form by a respondent (generated by the runner);
- Paused form state: Contains all the data to resume a paused respondent's form session (generated by the runner and only used when you want to support pausing and resuming forms).
Have a look at the overview page to get a bird's eye view of all the core components of Tripetto and the JSON data types used to exchange data between them.
🏗️ Building forms
There are several options for how you can use Tripetto's visual form builder to create forms. You can, of course, integrate it completely into your own project, but that is certainly not a requirement and often not necessary. So which option works best for you depends a lot on your needs. In any case, you can consider the following options:
🖥️ Studio web app
If you only need to run a form, there is no need to integrate the builder at all. You probably want to use the builder to create a form so you can use it in a runner. In that case, you could use the Tripetto Studio web app to do so. This open-source application is actually built with the SDK and is a free online service (SaaS) that allows you to create forms, save them and export their form definitions for use in the runner. It can even generate the runner code for you so you can copy-paste it.
⌨️ CLI tool
Another option is to use the builder as a CLI tool. That allows you to run the builder locally. It is a great option for developers who want to use Tripetto to create static forms inside a project. By using the CLI tool, the form definition is saved locally. Useful if the form needs to be part of a code repository.
👩💻 Integration
But the best thing about the builder is that you can completely integrate it into your own web app or website. And since the builder is a pure client-side component, you can do so without becoming dependent on any external service not owned by you. The whole thing runs inside the context of your project, giving you full control. Of course, there are some things to tackle. But we got you covered with hands-on instructions and documentation to empower your project using:
🌎 WordPress plugin
If you happen to have a WordPress website, you can also use the Tripetto WordPress plugin. It can do the same as the Studio described above, but then all from inside your own WordPress environment (on-premise). This open-source plugin is entirely built with the SDK. And, it has some nice user reviews as well 🤩
🏃 Running forms
If you managed to create a form with the builder, you now want to run it. Therefore you need a runner. It turns a form definition (the output of the builder) into a fully working form. So the runner does the actual rendering of the form.
🎭 Stock runners
The easiest way to do this is by using one of the available stock runners. These (open-source) runners are built and maintained by the Tripetto team. Currently, there are three stock runners to choose from (autoscroll, chat or classic). Each stock runner has its own visual appearance and user experience. And they are interchangeable. So you can start with one and switch easily later on. Or you could even present the same form using different runners depending on what looks and feels best for the occasion. Implementing a runner is easy, and there are hands-on instructions available for:
We often refer to the stock runners as form faces in our marketing materials. This is just another name for the same thing 😎
👩💻 Custom runner
If you don't want to use one of the stock runners, you build your own runner using the Tripetto Runner library. Of course, that involves coding, and we consider it an advanced use case for experienced developers. You can find the documentation for this here.
🧱 Blocks
When you have built and run your first form, you might want to extend Tripetto with more question types. In the Tripetto world, question types are called blocks. And you can build them yourself with the SDK. The sky is the limit here because you can build whatever you want. There are three types of blocks:
- Visual blocks
- Headless blocks (also called action blocks)
- Condition blocks
Visual blocks are - as the name suggests - blocks that the user can see and interact with (for example, a text input field). A block is not limited to a single input field. It could also define a set of multiple-input fields (for example, an address input block).
Headless blocks, on the other hand, are a special kind of blocks that can perform actions. Headless blocks are invisible and never render to the UI. For example, the calculator stock block is a headless block that can perform advanced calculations inside a form. But you could also develop a headless block to communicate with external services such as APIs.
The last type of blocks are condition blocks. These are also invisible blocks that do not appear in the UI of a runner. Instead, they contain logic and are used to define branching conditions.
All types of blocks need two parts to let them work properly:
- 🏗️ The builder part;
- 🏃 The runner part.
The builder part instructs the builder how to manage the block. It defines the configurable properties and settings for the block, which can then be managed with the visual builder.
The runner part, on the other hand, contains the rendering or logic of the block inside the runner (the thing that runs the form). It defines the UI for the block and makes the block visible in the runner. For headless blocks, the runner part contains the actions to perform. For condition blocks, the runner part contains the logic for validating the condition.
It is good to remember that these two parts of a block do not necessarily have to live within the same codebase. They can completely be separated. We tend to do that with the stock blocks we develop. We often publish the builder part of the blocks as npm package but keep the visual runner part inside the runner repositories. This makes sense since the look and feel of each block in the runner greatly depends on the type of runner.
💯 Advantages
With Tripetto, you can include powerful but visually appealing forms and surveys in your web app or website. Forms can contain complex logic, operations, and calculations that can be challenging to build all by yourself. Integrating form runners is easy and can be achieved with minimal code. The best part is that the forms don't depend on any external service to operate. They run within the context of your project. If you want to become the next SurveyMonkey or the likes, you can integrate the builder into the heart of your next unicorn project. That is what truly sets Tripetto apart.
👩💻 How to start with the SDK
Since you're reading this, you've already come to the right place! To start with the SDK, continue reading the documentation. Decide for yourself what you need and want to achieve, and dive into the appropriate chapters to learn how to use and implement Tripetto. Please let us know if you run into issues or need help. Our support form is the easiest way to contact us. We're here to help. We hope you enjoy working with the SDK just like we enjoy building Tripetto!
🚀 Quickstart
🏗️ Form builder
Integrate Tripetto's form builder and equip your web app with powerful form-building capabilities. The builder generates a ready-to-use JSON form definition that can be supplied to a runner (which turns it into a usable form).
If you don't need a builder integration in your application, you can also use the Tripetto Studio or the CLI tool to create a form and then embed that form using one of the stock runners.
🏃 Form runner
Embed a Tripetto form in your website or application and start collecting responses. Simply add a runner and supply it with a JSON form definition generated by the builder.