Dev Program - Quick Start

TABLE OF CONTENTS

• Preface
• Step 1: Create an Application
• Step 2: Install the Application
• Step 3: Test the Application
• Step 4: Publish your App
• What's next
• How to Use the Auth Block
• Setting up Global Variables within Auth Block
• How to Use Payload
• How to Use Sources
  • enum:static
  • enum:rpc
• How To Use Guidance
• How To Make Fields Optional
• How to Use Triggers
• How to Use System Fields
• Summary

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:

• authenticating and making calls with Postman
• JSON definition by W3Schools
• JSON path finder

Let's review how the ManyChat Application works. Application consists of name, description, and JSON.

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

JSON is a core concept for ManyChat Applications as it specifies your integration's details. Then ManyChat observes 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 of how ManyChat identifies Action Title and Description:

Let's dive deeper into the details and go through how to develop your own Application.

Below you can find a step-by-step process revealing the app creation process (with open-source examples and use cases). The technical specification is available here.

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:

• https://csrng.net/documentation/csrng-lite/ will be used as an API
• We expect that the end-user will specify the range using bot fields

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):

    
    

  • 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.

If your app is public, you can list it in ManyChat App Store. It's optional, for more details please contact devprogram@manychat.com

What's next

We've gone through 4 steps to understand the basic concepts behind creating simple apps. These concepts are pretty the same, no matter what you build: random number generators, data-syncing apps for your CRM. As a next step I would recommend discovering our advanced "how-to" articles below. They will introduce you to creating authorization inside the app, replacing hardcoded values with static and dynamic data sources, adding guidance sections into your app. All these capabilities make your app more functional and user-friendly and therefore more competitive within the ManyChat ecosystem.

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 (we will Taste Dive as an example):

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

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:

Setting up Global Variables within Auth Block

The Auth Block also can be used to set up global variables like domain names, base URLs, etc.

You may include as many params objects as you need. All data entered by your users will be saved and available for re-use in actions.

Here is an example for ActiveCampaign API:

"params": 
  [
    {
      "name": "base",
      "title": "Please enter your Active Campaign base URL"
    },
    {
      "name": "token",
      "title": "Please enter your Active Campaign token"
    }
  ]

Then your action request URL may come as https://[[base]]/api/3/

This will save time to your users: no need for an additional action form, reusable data can be asked once.

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 contact values associated with custom fields.

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

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:

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:  

Here is an example of an implemented code:

How To Use Guidance

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

This is example of a 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:

• contact creates an order or pays for something outside of ManyChat
• contact 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"
    }
  ]

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

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

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.

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