{"id":935,"date":"2021-06-24T01:43:21","date_gmt":"2021-06-23T17:43:21","guid":{"rendered":"https:\/\/manychat.com.hk\/?post_type=docs&#038;p=935"},"modified":"2021-06-24T01:43:21","modified_gmt":"2021-06-23T17:43:21","password":"","slug":"%e3%80%90%e9%96%8b%e7%99%bc%e5%b7%a5%e5%85%b7%e3%80%91%e9%96%8b%e7%99%bc%e8%a8%88%e5%8a%83-%e5%bf%ab%e9%80%9f%e5%85%a5%e9%96%80","status":"publish","type":"docs","link":"https:\/\/manychat.com.hk\/en\/docs\/%e3%80%90%e9%96%8b%e7%99%bc%e5%b7%a5%e5%85%b7%e3%80%91%e9%96%8b%e7%99%bc%e8%a8%88%e5%8a%83-%e5%bf%ab%e9%80%9f%e5%85%a5%e9%96%80\/","title":{"rendered":"[Development Tools] Development Plan-Quick Start"},"content":{"rendered":"<h2><span>Introduction<\/span><\/h2>\n<p><span>The ManyChat application is a way to connect ManyChat with third-party tools.<\/span><\/p>\n<p><span>It requires understanding the following:<\/span><\/p>\n<ul>\n<li><span>API authentication<\/span><\/li>\n<li><span>API calls<\/span><\/li>\n<li><span>JSON format<\/span><\/li>\n<\/ul>\n<p><span>If you have development experience, this article and the provided examples can serve as a comprehensive guide to building your first ManyChat application.<\/span><\/p>\n<p><span>For customers without development experience, ManyChat currently does not provide any educational support, but you may find the following resources useful:<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/learning.postman.com\/docs\/postman\/sending-api-requests\/requests\/\"><span>Authenticating and calling with the postman<\/span><\/a><\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/js\/js_json_intro.asp\"><span>JSON definition from W3Schools<\/span><\/a><\/li>\n<li><a href=\"http:\/\/jsonpathfinder.com\/\"><span>JSON path finder<\/span><\/a><\/li>\n<\/ul>\n<hr \/>\n<p><span>Let\u2019s outline how the ManyChat Application works. The application consists of a name, description, and JSON.<\/span><\/p>\n<p><span>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:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740330\/original\/W4qR8GBPM8pYoh3ppTHcUHL7z8MjKXwAzg.png?1590656324\" data-attachment=\"[object Object]\" data-id=\"36065740330\" \/><\/p>\n<p><span>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.<\/span><\/p>\n<p><span>A typical application includes:<\/span><\/p>\n<ul>\n<li><code>auth<\/code><span>\u00a0- If the platform you are connecting ManyChat to requires authorization, set this block and specify it as\u00a0<\/span><code>\"auth\": null<\/code><\/li>\n<li><code>actions<\/code><span>\u00a0- Each application should contain at least 1 action<\/span><\/li>\n<li><code>sources<\/code><span>-This is optional. You can set the source for the variables used in the action as needed.<\/span><\/li>\n<\/ul>\n<p><span>This is a brief overview of how ManyChat identifies action titles and descriptions:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740443\/original\/K_Zz5zLOlkSr4WYqPN8m43nB4GY3tV9-Wg.png?1590656377\" data-attachment=\"[object Object]\" data-id=\"36065740443\" \/><\/p>\n<p><span>Let's dive deeper into the details and learn step by step how to develop your own application.<\/span><\/p>\n<h2><span>Step 1: Create an application<\/span><\/h2>\n<p><span>Let's create a simple example application that generates a random number within a given range.<\/span><\/p>\n<p><span>Check the following prerequisites:<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/csrng.net\/documentation\/csrng-lite\/\"><span>https:\/\/csrng.net\/documentation\/csrng-lite\/<\/span><\/a><span>To be used as an API<\/span><\/li>\n<li><span>We want the end user to specify the range using the roamer field<\/span><\/li>\n<\/ul>\n<p><span>Please follow the steps below to create the application:<\/span><\/p>\n<ul>\n<li><span>Go to<\/span><a href=\"https:\/\/manychat.com\/profile\/dashboard#applications\"><span>Applications<\/span><\/a><span>, and then click the \u201c+ New Application\u201d button<\/span><\/li>\n<li><span>Fill in the following fields:<\/span>\n<ul>\n<li><span>Application Name:<\/span><em><span>Random Number Application<\/span><\/em><\/li>\n<li><span>Application Description:<\/span><em><span>Best Random Number Generation Application<\/span><\/em><\/li>\n<li><span>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 accepts<\/span><strong><span>without<\/span><\/strong><span>Comment JSON):\u00a0<\/span>\n<p><a href=\"https:\/\/glitch.com\/edit\/?utm_content=project_random-number-app-v1&amp;utm_source=remix_this&amp;utm_medium=button&amp;utm_campaign=glitchButton#!\/remix\/random-number-app-v1\"><img decoding=\"async\" class=\"fr-fic fr-dii\" src=\"https:\/\/cdn.glitch.com\/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726\" alt=\"Remix\" height=\"33\" \/><\/a><\/li>\n<li><span>Click the \u201cCreate Application\u201d button<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span>Here are some examples of how ManyChat imports this data:<\/span><\/p>\n<p><span>Form JSON \u2192 Form User Interface:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740691\/original\/ZIjIk7z9O0lqEvELJlOo_ma9IN0qRvVrWw.png?1590656518\" data-attachment=\"[object Object]\" data-id=\"36065740691\" \/><\/p>\n<p><span>Data captured through the form is used for requests:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740720\/original\/hS2rXh8Wr_i6H3E2r3OML5qSoTNKi-wv4A.png?1590656536\" data-attachment=\"[object Object]\" data-id=\"36065740720\" \/><\/p>\n<p><span>Correspondence:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740751\/original\/GoJiFxzJwbbQL6kH8GzJp9j1oiTPwHgDUA.png?1590656555\" data-attachment=\"[object Object]\" data-id=\"36065740751\" \/><\/p>\n<h2><span>Step 2: Install the application<\/span><\/h2>\n<ul>\n<li><span>Click the \u201cInstall\u201d button under the three-dot menu<\/span><\/li>\n<li><span>Select the account you want to apply this to and complete the installation.<\/span><\/li>\n<\/ul>\n<h2><span>Step 3: Test the application<\/span><\/h2>\n<ul>\n<li><span>Go to the \u201cFlow\u201d builder and select your application from the \u201cActions\u201d list<\/span><\/li>\n<li><span>Set up the action\u00a0<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740912\/original\/zkZY-Koi8L-gmwH6eNWlwHsRPoJuPBJgYg.png?1590656611\" data-attachment=\"[object Object]\" data-id=\"36065740912\" \/><\/p>\n<ul>\n<li><span>Create a new flow like the example below:<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740924\/original\/rV5vA3ZzSIBzNIiT-yESq1qYf2oAfkWNrw.png?1590656625\" data-attachment=\"[object Object]\" data-id=\"36065740924\" \/><\/p>\n<ul>\n<li><span>Preview your flow:<\/span>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740952\/original\/4w97TH69i1q-0hlb3pwuD2QxMQ-Ggrsm9g.png?1590656639\" data-attachment=\"[object Object]\" data-id=\"36065740952\" \/><\/li>\n<\/ul>\n<h2><span>Step 4: Share the application with customers<\/span><\/h2>\n<p><span>Once the application is ready, you can get a link to share it.<\/span><\/p>\n<ul>\n<li><span>Go to the application<\/span><\/li>\n<li><span>Click the three-dot menu<\/span><\/li>\n<li><span>Click the Copy Link button<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740969\/original\/6sQ_2JSm87nqV6xPozwvdHH2kptnQSTrYg.png?1590656666\" data-attachment=\"[object Object]\" data-id=\"36065740969\" \/><\/p>\n<p><span>The link has been copied to the clipboard and can be shared.<\/span><\/p>\n<p><span>Carefully share the following link:<\/span><\/p>\n<ol>\n<li><span>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.<\/span><\/li>\n<li><span>Everyone who has installed your app will immediately receive app updates. Currently, we only support one version - \u2018dev\u2019. Therefore, when you are sure the changes are compatible and will not disrupt the process, please apply the changes to the app JSON.<\/span><\/li>\n<\/ol>\n<p><span>As we implement version control for more secure updates, we recommend creating two applications:<\/span><\/p>\n<ul>\n<li><span>Internal - For testing updates, do not share the link to this application.<\/span><\/li>\n<li><span>External - To apply updates after testing, please share the link to this application.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065740995\/original\/_ncU_crcosJ3JXBNSKhWC46_FMO5E0VVyw.png?1590656681\" data-attachment=\"[object Object]\" data-id=\"36065740995\" \/><\/p>\n<h2><span>How to use the authentication block<\/span><\/h2>\n<p><span>The random number API does not require an API key, but many other APIs do.<\/span><\/p>\n<p><span>To create connections using these APIs, you can set up a<\/span><code>auth<\/code><span>block.<\/span><\/p>\n<p><span>Prerequisites:<\/span><\/p>\n<ul>\n<li><span>Create an account here:\u00a0<\/span><a href=\"https:\/\/tastedive.com\/account\/api_access\"><span>https:\/\/tastedive.com\/account\/api_access<\/span><\/a><\/li>\n<li><span>View the API documentation here: \u00a0\u00a0<\/span><a href=\"https:\/\/tastedive.com\/read\/api\"><span>https:\/\/tastedive.com\/read\/api<\/span><\/a><\/li>\n<\/ul>\n<p><span>Let's try to create an application that requires an API key and then use it as a query parameter:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065741033\/original\/NgkfzKLKl5bZ71Ios3yoT9DIeRF7DKjPHA.png?1590656701\" data-attachment=\"[object Object]\" data-id=\"36065741033\" \/><\/p>\n<p><span>Here is the complete code example:\u00a0<\/span><a href=\"https:\/\/glitch.com\/edit\/?utm_content=project_similar-to-music-app&amp;utm_source=remix_this&amp;utm_medium=button&amp;utm_campaign=glitchButton#!\/remix\/similar-to-music-app\"><img decoding=\"async\" class=\"fr-fic fr-dii\" src=\"https:\/\/cdn.glitch.com\/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726\" alt=\"Remix\" height=\"33\" \/><\/a><\/p>\n<h2><span>How to use payload<\/span><\/h2>\n<p><span>Some API endpoints require a payload.<\/span><\/p>\n<p><span>To make JSON valid in these cases, you can add<\/span><code>payload {}<\/code><span>as shown below. The value of the payload can be passed<\/span><code>forms [[]]<\/code><span>.<\/span><\/p>\n<p><span>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.<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065741133\/original\/V7spBa6-dFpRDB-fCFuaKW_A1xPH9ukz9g.png?1590656781\" data-attachment=\"[object Object]\" data-id=\"36065741133\" \/><\/p>\n<p><span>This is the Glitch link, feel free to use this item as an example: \u00a0\u00a0<\/span><a href=\"https:\/\/glitch.com\/edit\/?utm_content=project_crm-app-with-payload&amp;utm_source=remix_this&amp;utm_medium=button&amp;utm_campaign=glitchButton#!\/remix\/crm-app-with-payload\"><img decoding=\"async\" class=\"fr-fic fr-dii\" src=\"https:\/\/cdn.glitch.com\/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726\" alt=\"Remix\" height=\"33\" \/><\/a><\/p>\n<p><span>In some cases, there is no need to pass dynamic values for the payload. So it looks like this:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065741155\/original\/7HyfBGzZm-HUYVv8oIqo7JUI7z7bzPUxkg.png?1590656793\" data-attachment=\"[object Object]\" data-id=\"36065741155\" \/><\/p>\n<p><span>Each time we process the action, we pass the same payload to the specified URL.<\/span><\/p>\n<h2><span>How to use the source<\/span><\/h2>\n<h3><span>Enumeration: static<\/span><\/h3>\n<p><span>Because<\/span><code>random-number-app-v1<\/code><span>We used the \u201cminimum\u201d and \u201cmaximum\u201d fields provided by the user through the custom fields.<\/span><\/p>\n<p><span>If we want to provide our own value, we can leverage this<\/span><code>sources<\/code><span>concept.<\/span><\/p>\n<p><span>Please refer to the glitch example and check<\/span><code>forms<\/code><span>with<\/span><code>sources<\/code><span>Comments on the block:<\/span><a href=\"https:\/\/glitch.com\/edit\/?utm_content=project_random-number-app-v2&amp;utm_source=remix_this&amp;utm_medium=button&amp;utm_campaign=glitchButton#!\/remix\/random-number-app-v2\"><img decoding=\"async\" class=\"fr-fic fr-dii\" src=\"https:\/\/cdn.glitch.com\/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726\" alt=\"Remix\" height=\"33\" \/><\/a><\/p>\n<p><span>This is how ManyChat processes this data:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065741175\/original\/BUm2vGlfvscSoVKIMyEIdIsvoK3WSaPYpA.png?1590656804\" data-attachment=\"[object Object]\" data-id=\"36065741175\" \/><\/p>\n<h3><span>Enumeration: rpc<\/span><\/h3>\n<p><span>Because<\/span><code>similar-to-music-app<\/code><span>We use custom fields as<\/span><code>q<\/code><span>parameters.<\/span><\/p>\n<p><span>use<\/span><code>enum:rpc<\/code><span>We can provide a list of musicians and bands in the API. Check out this Glitch project to see how to add<\/span><code>enum:rpc<\/code><span>sources to your App:\u00a0\u00a0<\/span><a href=\"https:\/\/glitch.com\/edit\/?utm_content=project_similar-to-music-app-v2&amp;utm_source=remix_this&amp;utm_medium=button&amp;utm_campaign=glitchButton#!\/remix\/similar-to-music-app-v2\"><img decoding=\"async\" class=\"fr-fic fr-dii\" src=\"https:\/\/cdn.glitch.com\/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726\" alt=\"Remix\" height=\"33\" \/><\/a><\/p>\n<p><span>Here is an implemented code example:<\/span><\/p>\n<p><img decoding=\"async\" class=\"fr-fil fr-dib\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/36065741190\/original\/JQAwU7U7B-H-Tmx4J1DDk4FnH0PJEJyV6Q.png?1590656817\" data-attachment=\"[object Object]\" data-id=\"36065741190\" \/><\/p>\n<h2><span>Summary<\/span><\/h2>\n<ol>\n<li><span>Browse this document and the Glitch project to learn how to use App JSON for different purposes<\/span><\/li>\n<li><span>Click \u201cRemix to Edit\u201d to create your own app using our example<\/span><\/li>\n<li><span>Copy the JSON and paste it into the ManyChat application<\/span><\/li>\n<li><span>Install your application to achieve more results through your own integration<\/span><\/li>\n<li><span>Share your app with customers to earn recognition<\/span><\/li>\n<\/ol>","protected":false},"excerpt":{"rendered":"<p>\u524d\u8a00 ManyChat\u61c9\u7528\u7a0b\u5e8f\u662f\u9023\u63a5ManyChat\u548c\u7b2c\u4e09\u65b9\u5de5\u5177\u7684\u4e00\u7a2e\u65b9\u5f0f\u3002 \u5b83\u9700\u8981\u4e86\u89e3\u4ee5\u4e0b\u5167\u5bb9\uff1a API\u8a8d\u8b49 [&hellip;]<\/p>","protected":false},"author":20,"featured_media":0,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"%%post_title%%","_seopress_titles_desc":"","_seopress_robots_index":"","_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_eb_attr":"","_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"footnotes":""},"doc_category":[47],"doc_tag":[],"class_list":["post-935","docs","type-docs","status-publish","hentry","doc_category-manychat-advance"],"year_month":"2026-04","word_count":97,"total_views":"3135","reactions":{"happy":"1","normal":"1","sad":"1"},"author_info":{"name":"Michelle","author_nicename":"michelle","author_url":"https:\/\/manychat.com.hk\/en\/author\/michelle\/"},"doc_category_info":[{"term_name":"ManyChat Advance","term_url":"https:\/\/manychat.com.hk\/en\/docs-category\/manychat-advance\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs\/935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/users\/20"}],"version-history":[{"count":1,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs\/935\/revisions"}],"predecessor-version":[{"id":936,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/docs\/935\/revisions\/936"}],"wp:attachment":[{"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/media?parent=935"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/doc_category?post=935"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/manychat.com.hk\/en\/wp-json\/wp\/v2\/doc_tag?post=935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}