ManyChat
Submit a ticket

Dev Program - Quick Start

Preface

ManyChat Applications is a way to connect ManyChat and 3rd party tools.

It requires understanding of:

  • API authentication
  • API calls
  • JSON

If you have dev experience, this article and provided examples may be used as a comprehensive guide for building your first ManyChat Application.

For customers without dev experience, ManyChat currently doesn't provide any educational support, but you may find the following resources useful:


Also we're welcome you in the ManyChat for Developers group.


Let's take on overview look at how ManyChat Application works. Application consists of name, description and JSON.

Application Name and Application Description are self-explanatory, please refer to the image attached: it shows how Application Name imports into the Actions List after installation:


JSON is a core concept for ManyChat Applications, it specifies your integration's details. Then ManyChat introspects this specification to find out what your app is capable of and transforms JSON into native UI elements for end users.

A typical App contains:

  • auth - If a platform you connect ManyChat to requires authorization, set this block up and specify it as "auth": null
  • actions - Each App should contain at least 1 action
  • sources - This is optional. You can set up a source for variables used in your action/actions if needed.

Here is a brief overview how ManyChat identifies Action Title and Description:


Let's dive deeper into the details and go through 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 these pre-requisites:

Follow these steps to create an app:

  • Go to Applications and click '+New Application' button
  • Complete these fields:
    • Application Name: Random Number App

    • Application Description: Best Random Number Generation App

    • Application JSON (refer to the Glitch Project, if you want to try this App — use app_for_copy.json, as it doesn't contain comments, the current App JSON field only accepts JSON without comments): 

      remix this

    • Click the "Create the Application" button

Here are some examples of how this data is imported by ManyChat:

Forms JSON → Forms UI:


The data captured through the form is used in request:

Mapping:

Step 2: Install the Application

  • Click the 'Install' button under three-dots menu
  • Choose the account you want to apply this to and and finish the installation.

Step 3: Test the Application

  • Go to Flow builder and select your App in the Actions List
  • Setup the Action 


  • Build a new flow like this example:


  • Preview your flow:

Step 4: Publish your App

After your application is ready, you can get it reviewed and published.

When you click on the 'Publish' button, you start the review process conducted by the ManyChat team to make your app public. We will review the latest version of your app and inspect the App JSON to make a decision to approve or decline your app.

  • If your app is approved for a public version:
    • We will delete the disclaimer from your app page
    • Assign a version number to your app
    • Protect this version from any changes (accidental or intended) that are made to the 'dev' version of your app
  • If your app is declined:
    • We will provide feedback and restart the review process as soon as all necessary changes are implemented and you hit the 'Republish' button.


How to Use the Auth Block

Random Number API doesn't require the API key, but many other APIs do.

For creating a connection with these APIs, you can set up an auth block.

Pre-requisites:

Let's try creating an app that requires an API key and then uses it as a query param:


Here is the full code example: remix this


How to Use Payload

Some API endpoints require payloads.

To make JSON work for these cases, you can add payload {} as shown below. Values for payload can be passed from forms [[]] .

In this case, we created a record in Pipedrive CRM. API endpoint requires payload with name and email. When the end-user configures action, they choose custom fields for name and email. Then ManyChat fires the action adding to payload specific for each subscriber values associated with custom fields.

Here is Glitch link, feel free to use this project as an example:   remix this



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

Each time action is being processed, we will pass the same payload to the specified URL.

How to Use Sources

enum:static

For random-number-app-v1 we used Min and Max field provided by the user through custom fields.

If we want to provide our own values, we can utilize the sources concept.

Refer to the Glitch example and check comments for forms and sources blocks: remix this



Here is how ManyChat operates with this data:

enum:rpc

For similar-to-music-app we used custom field for q parameter.

Using enum:rpc we can provide the list of musicians and bands from this API. Look at this Glitch project to understand how to add enum:rpc source to your App:   remix this


Here is an example of an implemented code:

How to Use System Fields

For easy access to system fields you can specify them using curly braces {{ }}. All data will be captured automatically.

Here is an example app showing how to capture system fields data without creating forms.

remix this



Summary

  1. Explore this documentation and Glitch projects to understand how to make App JSON for different purposes
  2. Click 'Remix to Edit' to make your own app using our examples
  3. Copy and paste JSON into ManyChat Applications
  4. Install your app to get more results with your own integration
  5. Share your app with clients to get kudos