ManyChat
Submit a ticket

Dev Program - Quick Start

TABLE OF CONTENTS


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:


For enabling this beta feature please message us your user id at devprogram@manychat.com (your user id is accessible via this link https://manychat.com/test/userid)

Also you're welcome to join the ManyChat for Developers group.


Let's take a 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 Add Guidance

In some cases, the app action setup may require step-by-step guidance. If the action description is not enough to communicate all necessary details, you can add a guidance field into action block.

This is an example of three-step guidance, for line breaks you can use \n (which is optional).

For your app users it will appear like shown below:

How To Make Fields Optional

Sometimes action fields aren't required or can be populated with default values. To make setup easier we allow fields to be preconfigured with a new parameter called default.

You, as an app developer, can specify the default value for a particular field. This will make the field optional. Until your users specify their own value, you will receive the default one every time this action fires.

How the action form looks like:


App users are able to skip this field:

How to Use Triggers

Triggers let you start flows when an event takes place in an external app.

Examples of such events:

  • subscriber creates an order or pays for something outside of ManyChat
  • subscriber gets tagged in your CRM
  • a scheduled event is happening

If you want to send flows when these events happen — triggers are at your disposal.

From a developer's perspective there are a few steps to make triggers work:

  • Specify triggers in App JSON (more details are available here)
"triggers": [
    {
      "name": "trigger_tag_added",
      "title": "Tag added",
      "description": "Tag \"Deal closed\" is added in X CRM"
    }
  ]
  • Send a hook on the following endpoint https://manychat.com/apps/wh adding the authorization header with App Key each time when the event takes place. Payload should be in a following format:
curl -H "Authorization: Bearer <token>" \
-H "Content-type: application/json" \
-X POST \
-d '{"version": 1, "subscriber_id": <sub_id>, "trigger_name": <trigger>}' \
https://manychat.com/apps/wh


How to get an App Key

When a customer installs your app ManyChat notifies them that this app has triggers and prompt to provide app developer with the App Key.

We encourage you to communicate your customers clearly the way you want to obtain the App Key (though the usual way is a special page at your side for configuring external integrations)


Triggers with context

You can enrich your trigger with external context. Let's check the difference:

Simple trigger

Trigger with context

Order created

Order created, order sum is 107 USD

Subscriber gets tagged as "lead"

Subscriber gets tagged as "lead", deal probability is 90%


Here is JSON example how to specify the trigger with an external context.

Within the context you may provide as many variables as you want. All these variables can be used in flow builder for more smart automations.

"triggers": [
  {
    "name": "trigger_tag_added",
    "title": "Tag added",
    "context": [
      {
        "name": "deal_probability",
        "type": "number",
        "title": "Deal Probability"
      }
    ],
    "description": "Tag Deal is added in CRM"
  }
]

Here is the flow with trigger + context. You can use this context as a condition, as a part of content node and make your automations smart, personalised.

curl -H "Authorization: Bearer <token>" \
-H "Accept: application/json" \
-X POST \
-d '{"version": 1, "subscriber_id": <sub_id>, "trigger_name": <trigger>, "context": { deal_probability: 90}}' \
https://manychat.com/apps/wh


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