Create Mini-Apps (1.0)

Creating a Mini-App with Flexito offers a streamlined way to enhance your workspace with custom functionalities. Whether you need to automate tasks, integrate with external services, or provide unique user interactions, Mini-Apps can be tailored to meet your specific needs. This guide walks you through the process of building and configuring a Mini-App, using an email verification API as an example. Discover how to set up authentication, define actions, and manage sources to create a seamless user experience.

Example: We'll use TheChecker, an email verification API, to demonstrate how to create and edit a Mini-App.

Follow steps 1 to 6 in the screenshot above to create an app.

On the editing page (left), you can enter a title, description, logo, cover image, and YouTube video ID. This information will be displayed in the mini-app store as shown on the right.

On the right side of the editing page:

You can use sample data at the bottom for guidance. System fields can be included in your JSON code if necessary.

Authentication

This section is for setting up your App's authentication.

Parameters

Name	Data Type	Description
type	enum	Supported value: APIKEY
params	array	Values required from users when installing e.g. API key
request	object	Send requests with parameters (e.g. email, api_key) and map the response to params (e.g. token)
connection	object	List of request headers or parameters

Email Verification Example

Here's an example of authentication using an API key in the query. After users install the App, it will look like this:

The "api key" entered by users will be stored in the "token" variable.

Basic Authentication Example

TIP: Basic access authentication requires the username and password to be joined by a colon and encoded with Base64. Since the JSON code doesn't support this, the system will handle the encoding for you. Simply use "Basic [[sid]]:[[token]]" as the authorization value.

{ "type": "APIKEY", "params": [ { "name": "sid", "title": "Twilio Account SID:" }, { "name": "token", "title": "Twilio Auth Token:" } ], "connection": { "headers": { "Authorization": "Basic [[sid]]:[[token]]" } } }

Other Examples

Example 1: APIKEY Auth with headers

{ "type": "APIKEY", "params": [ { "name": "token", "title": "Enter your API key:" } ], "connection": { "headers": { "Authorization": "Bearer [[token]]" } } }

The "headers" in the "connection" will be included in each request, so there's no need to repeat it.

Example 2: APIKEY Auth with query parameters

{ "type": "APIKEY", "params": [ { "name": "api_key", "title": "Enter your API key:" } ], "connection": { "qs": { "key": "[[api_key]]" } } }

As with headers, the query string will be added to each request.

Example 3: APIKEY Auth with JWT token

{ "type": "APIKEY", "params": [ { "name": "email", "title": "Enter your email:" }, { "name": "api_key", "title": "Enter your API key:" } ], "request": { "url": "", "method": "POST", "body_format": "form", "cache": 3600, //cache this request for 3600 seconds "payload": { "email": "[[email]]", "api_key": "[[api_key]]" }, "mapping": [ { "name": "token", "path": "$.data.token" } ] }, "connection": { "headers": { "Authorization": "Bearer [[token]]" } } }

The email and API key provided by users are sent in a request. The response is mapped to the "token" variable using the JSON path $.data.token. This variable [[token]] is then used in the authorization header, which will be included in each request.

Actions

Actions define the functions or features users can perform with your App. For example, the "Google Translate" App includes two actions: "Detect Language" and "Translating text".

In the coding area, set the default information for the action, including name, title, description, forms, and requests. This ensures the action works correctly within the flow.

At the bottom, click "Get product" for an example of a GET request, and "Update product" for a POST request example. Forms and requests are objects, so you'll need to set several attributes.

Parameters

Name	Data Type	Description
name	string	Identify the action, must be unique
title	string	Action title shown when using the app
description	string	Action description shown when using the app
forms	array	List of form objects for action configuration
requests	array	List of request objects to be performed in succession

Form Object

Name	Data Type	Description
name	string	Field name, used as an identifier and variable inside request
type	enum	Value type, used for validation, supported values: string, text, number and select
title	string	Field title, displayed in UI
default	string	Default value for this field, If specified, the field becomes optional
source	string	Name of the source in Sources block, only for type=select
placeholder	string	the grey prompt shown in the field
description	string	the prompt appears below the field

Lines in Text Variable

TIP: The difference between string and text form types is that a string will remove newlines, while text will preserve them.

Request Object

Name	Data Type	Description
url	string	Request URL
method	enum	HTTP request method, supported values: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
headers	array	List of request headers in key value pair, e.g. `{"Content-Type": "application/json"}`
payload	json	Request body
body_format	enum	Request body format, supported values: json, query, form, multipart, raw
mapping	array	Set of fields for request results mapping into custom fields

Mapping Object

Name	Data Type	Description
name	string	Field name, used as identifier
type	enum	Field type, supported values: text, number, boolean, date, datetime, array
title	array	Field name, displayed in UI
path	string	String in a JSON path format

Email Verification Example

Below is the code for the email verification example and the UI in Action steps.

Code:

TIP: You can omit the "api_key" in the URL because it's already included in the Auth block.

App UI:

Other Examples

Example 1:

{ "url": "", "method": "POST", "headers": { "Content-Type": "application/json" }, "payload": { "q": "[[q]]" }, "mapping": [ { "name": "language", "type": "text", "title": "Detected Language", "path": "$.data.detections.0.0.language" } ] }

Example 2:

{ "url": "", "method": "POST", "body_format": "form", "cache": 3600, "payload": { "email": "[[email]]", "api_key": "[[api_key]]" }, "mapping": [ { "name": "token", "type": "text", "title": "Token", "path": "$.data.token" } ] }

Sources

The Sources block provides users with a list of options for form values. Use the source name in the form parameter within the Actions block to establish the connection.

There are two source formats: static and dynamic. Static sources have fixed options, while dynamic sources change options based on inputs.

Note: The sources block is optional and depends on the form objects in the Actions block.

Parameters

Name	Data Type	Description
name	string	Identify the source
type	enum	Source type, supported values: enum:rpc, enum:static
list	array	List of fixed options shown when using the App. Only for type=enum:static
request	object	Request object when the source is dynamic. Only for type=enum:rpc

Mapping Object in the Request Object

Name	Data Type	Description
type	enum	Field type, supported value: select
path	string	String in a JSON path format, for response data array
value	string	String in a JSON path format based on the `path` results. This is the real value returned when a label is selected
label	string	String in a JSON path format based on the `path` results. Displayed in the drop-down list as label

Examples

Forms in Actions block:

"forms": [ { "name": "static_options", "type": "select", "title": "Static Options", "source": "product_type_list" }, { "name": "dynamic_options", "type": "select", "title": "Dynamic Options", "source": "users_list" } ]

Sources block:

[ { "name": "product_type_list", "type": "enum:static", "list": [ { "value": "food", "label": "Food & Drink" }, { "value": "toy", "label": "Toys" }, { "value": "phone", "label": "Mobile Phone" } ] }, { "name": "users_list", "type": "enum:rpc", "request": { "url": "", "method": "GET", "headers": { "Content-Type": "application/json" }, "mapping": [ { "type": "select", "path": "$", "value": "$.id", "label": "$.username" } ] } } ]

TIP: The request object in dynamic sources is explained in the Action block. Check the parameters details () for more information.

App UI:

Triggers

By configuring triggers, users can utilise them from the automation section just like any other built-in triggers shown in the screenshot above.

Please ensure the trigger name is:

in lowercase
unique within the trigger list
without spaces, using underscores to separate words

Context is where you list all pre-set variables when data is received.

After setting up the trigger, configure the "API Token Requests" and select the API in "API Scopes" as detailed below.

To call this trigger, refer to the API for mini-app trigger ().

API Scopes

In "API Scopes", select all the APIs your mini-app needs to access. Check the "API Documentation" via the link at the top.

For instance, if your app needs to view users' tag lists in their flow, select "View flow tags". Additionally, if your app requires triggers, ensure you select the "App Trigger" as shown in the screenshot.

API Token Requests

In "API Token Requests", click the "Requests" sample data at the bottom and edit the URL to your subscription and unsubscription endpoint. Check the available system fields at the bottom and include the necessary information in the payload. For example, include "app_token" if you need to access users' flow via API (if any API is selected in the API Scopes block).

Save & Test

Finally, click "Save" to complete the creation process. Congratulations! You've successfully created a Mini-App. 💯💯

If you're using the app in your own workspace, there's no need to publish it. You can test and use it in any bot across any channel in your workspace.

To share the app with other workspaces, publish it in the Flexito OmniAI mini-app store.