[Development Tools] Development Plan-Quick Start

Introduction #

The ManyChat application is a way to connect ManyChat with third-party tools.

It requires understanding the following:

API authentication
API calls
JSON format

If you have development experience, this article and the provided examples can serve as a comprehensive guide to building your first ManyChat application.

For customers without development experience, ManyChat currently does not provide any educational support, but you may find the following resources useful:

Let’s outline how the ManyChat Application works. The application consists of a name, description, and JSON.

The application name and application description are self-explanatory; please refer to the attached image: it shows how the application name is imported into the action list after installation:

JSON is the core concept of the ManyChat application, specifying the details of the integration. ManyChat then introspects this specification to determine the capabilities of your application and converts the JSON into native UI elements for the end user.

A typical application includes:

auth - If the platform you are connecting ManyChat to requires authorization, set this block and specify it as "auth": null
actions - Each application should contain at least 1 action
sources-This is optional. You can set the source for the variables used in the action as needed.

This is a brief overview of how ManyChat identifies action titles and descriptions:

Let's dive deeper into the details and learn step by step how to develop your own application.

Step 1: Create an application #

Let's create a simple example application that generates a random number within a given range.

Check the following prerequisites:

https://csrng.net/documentation/csrng-lite/To be used as an API
We want the end user to specify the range using the roamer field

Please follow the steps below to create the application:

Go toApplications, and then click the “+ New Application” button
Fill in the following fields:
- Application Name:Random Number Application
- Application Description:Best Random Number Generation Application
- Application JSON (If you want to try the application, refer to the Glitch project - use app_for_copy.json, as it does not contain comments; the current application JSON field only acceptswithoutComment JSON):
- Click the “Create Application” button

Here are some examples of how ManyChat imports this data:

Form JSON → Form User Interface:

Data captured through the form is used for requests:

Correspondence:

Step 2: Install the application #

Click the “Install” button under the three-dot menu
Select the account you want to apply this to and complete the installation.

Step 3: Test the application #

Go to the “Flow” builder and select your application from the “Actions” list
Set up the action

Create a new flow like the example below:

Preview your flow:

Step 4: Share the application with customers #

Once the application is ready, you can get a link to share it.

Go to the application
Click the three-dot menu
Click the Copy Link button

The link has been copied to the clipboard and can be shared.

Carefully share the following link:

Anyone with this link can install your app. This link can be used an unlimited number of times. The link cannot be revoked. Once you generate and share these links, you can install your app.
Everyone who has installed your app will immediately receive app updates. Currently, we only support one version - ‘dev’. Therefore, when you are sure the changes are compatible and will not disrupt the process, please apply the changes to the app JSON.

As we implement version control for more secure updates, we recommend creating two applications:

Internal - For testing updates, do not share the link to this application.
External - To apply updates after testing, please share the link to this application.

How to use the authentication block #

The random number API does not require an API key, but many other APIs do.

To create connections using these APIs, you can set up aauthblock.

Prerequisites:

Create an account here: https://tastedive.com/account/api_access
View the API documentation here: https://tastedive.com/read/api

Let's try to create an application that requires an API key and then use it as a query parameter:

Here is the complete code example:

How to use payload #

Some API endpoints require a payload.

To make JSON valid in these cases, you can addpayload {}as shown below. The value of the payload can be passedforms [[]].

In this case, we created a record in Pipedrive CRM. The API endpoint requires a payload with a name and email. When the end user configures the action, they select custom fields for the name and email. Then, ManyChat triggers the action to add a payload specific to each subscriber value associated with the custom fields.

This is the Glitch link, feel free to use this item as an example:

In some cases, there is no need to pass dynamic values for the payload. So it looks like this:

Each time we process the action, we pass the same payload to the specified URL.

How to use the source #

Enumeration: static #

Becauserandom-number-app-v1We used the “minimum” and “maximum” fields provided by the user through the custom fields.

If we want to provide our own value, we can leverage thissourcesconcept.

Please refer to the glitch example and checkformswithsourcesComments on the block:

This is how ManyChat processes this data:

Enumeration: rpc #

Becausesimilar-to-music-appWe use custom fields asqparameters.

useenum:rpcWe can provide a list of musicians and bands in the API. Check out this Glitch project to see how to addenum:rpcsources to your App:

Here is an implemented code example:

Summary #

Browse this document and the Glitch project to learn how to use App JSON for different purposes
Click “Remix to Edit” to create your own app using our example
Copy the JSON and paste it into the ManyChat application
Install your application to achieve more results through your own integration
Share your app with customers to earn recognition