Tripetto editor and collector side-by-side

Add some Kanye genius to your survey

How to integrate an API in your survey with Tripetto

Martin van de Hoef
Apr 16 · 4 min read

Extend your survey with custom question types

When designing a survey you usually have a number of basic question types to choose from like Number, Dropdown or Star Rating. Some vendors make more complex question types available like Matrix or Payment.

With Tripetto you can build your own question types. This brings endless opportunities to enrich your survey and collect more user data. In this article I’ll demonstrate how easy it is to create a question type that connects to an external API. This example isn’t a question actually, but it shows a random quote from Kanye West any where you need his genius.

Kanye West quote from https://api.kanye.rest

Concept

Tripetto distinguishes itself with the way it visually presents the flow of a survey in the Editor. When building a custom block (Tripetto uses blocks as a synonym for question types) you have to define how your custom block exposes itself in the editor and which properties you can edit.

Another part of the custom block is how it represents itself in the Collector. The collector is where your respondents file your survey. Tripetto gives you absolute freedom how to display your survey, but there are some examples to give you a head start.

This example is based on the Conversational UX demo with React.

Editor

To create a custom block in the editor you have to implement the NodeBlock abstract class, prefixed with the @tripetto decorator to supply (meta) information about the block.

import { NodeBlock, Slots, slots, tripetto } from "tripetto";
import * as ICON from "./kanye.svg";
@tripetto({
type: "node",
identifier: "kanye",
label: "Kanye Quote",
icon: ICON
})
export class Kanye extends NodeBlock {
@slots
defineSlot(): void {
this.slots.static({
type: Slots.String,
reference: "kanye-quote",
label: "Kanye quote"
});
}
@editor
defineEditor(): void {
this.editor.name(false, false, "Name");
this.editor.visibility();
}
}

Slots are a fundamental part of a custom block, because they define how response data is stored. In this example I’ve chosen for a single static slot of type Slots.String where I can store the random quote that was presented to the respondent.

Properties of the Kanye block in the Tripetto editor

Collector

The collector is where the real API magic happens! In the editor we’ve described the way our custom block can be managed. In the collector we’ll describe how it looks and how it works. Since this example is based on React and Bootstrap, this is where these frameworks come together with Tripetto.

import * as React from "react";
import * as Tripetto from "tripetto-collector";
import * as Superagent from "superagent";
import { IBlockRenderer } from "collector/helpers/interfaces/renderer";
import { IBlockHelper } from "collector/helpers/interfaces/helper";
import "./kanye.scss";
const DEFAULT_QUOTE = "I feel like I'm too busy writing history to read it.";@Tripetto.block({
type: "node",
identifier: "kanye"
})
export class KanyeBlock extends Tripetto.NodeBlock implements IBlockRenderer {
readonly quoteSlot = Tripetto.assert(this.valueOf<string>("kanye-quote"));
constructor(node: Tripetto.Node, context: Tripetto.Context) {
super(node, context);
Superagent
.get("https://api.kanye.rest")
.then((response: Superagent.Response) => {
this.quoteSlot.value = response.body.quote || DEFAULT_QUOTE;
});
}
render(h: IBlockHelper): React.ReactNode {
return (
<div tabIndex={h.tabIndex} className="kanye">
<blockquote>
<p className="quotation">
{this.quoteSlot.value || "..."}</p>
<footer>
— Kanye West</footer>
</blockquote>
<div className={h.isActive ? "active" : ""}>
<button className="btn btn-lg btn-primary" onClick={() => h.next()}>
Continue
<i className="fas fa-level-down-alt fa-fw fa-rotate-90 ml-2" />
</button>
</div>
</div>
);
}
}

I’ve used Superagent to retrieve the quote from the API. React is used for updating the quote inside the paragraph tag. You can see that the slot is updated with the quote as soon it is retrieved. This way the quote is added to the response data and therefore stored when the respondent completes the survey. Add some Bootstrap styling and this results in a beautiful quote from Kanye West inside your survey 🕶️.

Kanye West quote in action in Tripetto collector

Try it yourself

You can experience the Kanye West block on GitLab Pages.

You can run this example on your local machine by downloading the source code from https://gitlab.com/tripetto/lab/kanye-west. Run npm install and npm test from your command prompt and you’re up and running on http://localhost:9000.

Final thoughts

The Kanye West quote block is obviously meant for demo purposes (unless you are a real Kanye West fan and you want to share his wisdom with your target audience 😎). Imagine what you can do with custom blocks in your survey or even in your application. Tripetto can be fully integrated in your own software and its blocks are fully extendable as seen in this example.

Let me know what custom blocks you expect to create for your surveys.

Enjoy Tripetto!

(And very special thanks to @ajzbc for his Kanye Rest API!)

Tripetto

Tripetto is for making crispy conversational exchanges with your audience. Shifting forms to vivid interactions.

Martin van de Hoef

Written by

Building @tripetto

Tripetto

Tripetto

Tripetto is for making crispy conversational exchanges with your audience. Shifting forms to vivid interactions.