Actualización

Programa de desarrollo y programación - Inicio rápido

TABLA DE CONTENIDOS


Introducción

Aplicaciones Manychat es una manera de conectar Manychat y herramientas de terceros.

Requiere comprensión de:

  • Autenticación de API
  • Llamadas de API
  • JSON

Si tienes experiencia en el desarrollo, este artículo y ejemplos proporcionados pueden ser utilizados como una guía completa para construir tu primera aplicación Manychat.

Para clientes sin experiencia en el desarrollo, Manychat actualmente no proporciona ningún soporte educativo, pero puede que te sean útiles los siguientes recursos:


Vamos a revisar cómo funciona la aplicación Manychat. La aplicación consiste en nombre, descripción y JSON.

El nombre de la aplicación y la descripción de la aplicación son autoexplicativos - por favor, consulta la imagen adjunta de abajo. Esto muestra cómo el nombre de la aplicación importa a la Lista de acciones después de la instalación:

EmSzzi6ukoCdT_ZRdEHMjrCb5TMhzdFCjQ.png?1686564905

JSON es un concepto básico para las aplicaciones Manychat, ya que especifica los detalles de tu integración. Entonces, Manychat observa esta especificación para averiguar de qué es capaz tu aplicación y transforma JSON en elementos nativos de interfaz de usuario para usuarios finales.

Una aplicación típica contiene:

  • autenticación - Si una plataforma a la que conectas Manychat requiere autorización, configura este bloque y especifícalo como "auth": null
  • acciones - Cada aplicación debe contener al menos 1 acción
  • fuentes - Esto es opcional. Puedes configurar una fuente para variables usadas en tu acción/acciones si es necesario.

Esta es una breve visión general de cómo Manychat identifica el título y la descripción de la acción:

p6qPUuLyZSlFsnESa-cv53aSe6rAiDS7xg.png?1686564907

Vamos a profundizar en los detalles y veamos cómo desarrollar tu propia aplicación.

A continuación, puedes encontrar un proceso paso a paso que revela el proceso de creación de aplicaciones (con ejemplos de código abierto y casos de uso). La especificación técnica está disponible aquí.

Paso 1: Crear una aplicación

Vamos a crear una simple aplicación de ejemplo que genere un número aleatorio dentro de un rango determinado.

Revisa estos requisitos previos:

Sigue estos pasos para crear una aplicación:

  • Ve a Aplicaciones y haz clic en el botón "+Nueva aplicación"
  • Completa estos campos:
    • Nombre de la aplicación: Aplicación de números aleatorios
    • Descripción de la aplicación: La mejor aplicación de generación de números aleatorios
    • Aplicación JSON (consulta el Proyecto Glitch, si deseas probar esta aplicación: utiliza app_for_copy.json, ya que no contiene comentarios, el campo JSON de la aplicación actual solo acepta JSON sin comentarios):

      remix this
       

    • Haz clic en el botón "Crear la aplicación"

Aquí hay algunos ejemplos de cómo estos datos son importados por Manychat:

Formularios JSON → Formularios UI:

AJxMSPzuRSnQnMcCGyIShhZFyS4cK7KGww.png?1686564909

Los datos capturados a través del formulario se utilizan en la solicitud: od139VPHfhBVyn9lFOBMZFbnrYW1XmnlUg.png?1686564911

Mapeo:

8-1.png

Paso 2: Instalar la aplicación

  • Haz clic en el botón "Instalar" en el menú de tres puntos
  • Elige la cuenta a la que deseas aplicar esto y finaliza la instalación.

Paso 3: Probar la aplicación

  • Ve a Constructor de flujos y selecciona tu aplicación en la Lista de acciones
  • Configura la acción

b52GH6BRrgIN2ZnQueRcKCuVFCkmfF3S1Q.png?1686564914

  • Construye un nuevo flujo como este ejemplo:

20qj60V-a_yqPIjAGVzjYUldwCR_RBVtZg.png?1686564916

  • Vista previa de tu flujo:

    2c8pl4bN6rEuyXmtrIFV0XDqdZ4cDRZtvA.png?1686564917

Paso 4: Publicar tu aplicación

Después de que tu aplicación esté lista, puedes puede hacer que la revisen y la publiquen.

Cuando haces clic en el botón "Publicar", inicias el proceso de revisión dirigido por el equipo de Manychat para hacer pública tu aplicación. Revisaremos la última versión de tu aplicación e inspeccionaremos la App JSON para tomar la decisión de aprobar o rechazar tu aplicación.

  • Si tu aplicación es aprobada para una versión pública:
    • Eliminaremos el descargo de responsabilidad de la página de tu aplicación
    • Asigna un número de versión a tu aplicación
    • Protege esta versión de cualquier cambio (accidental o intencionado) que se haga a la versión "dev" de tu aplicación
  • Si tu aplicación es rechazada:
    • Proporcionaremos retroalimentación y reiniciaremos el proceso de revisión tan pronto como se implementen todos los cambios necesarios y pulses el botón "Volver a publicar".

Si tu aplicación es pública, puedes mostrarla en Manychat App Store. Es opcional, para obtener más detalles, ponte en contacto con devprogram@manychat.com

Lo que continúa

Hemos revisado 4 pasos para entender los conceptos básicos detrás de la creación de aplicaciones simples. Estos conceptos son bastante iguales, no importa lo que se construya: generadores de números aleatorios, aplicaciones de sincronización de datos para tu CRM. Como siguiente paso, recomendaría descubrir nuestros avanzados artículos de "guía básica" de abajo. Te presentarán la creación de autorización dentro de la aplicación, reemplazando los valores codificados por fuentes de datos estáticas y dinámicas, añadiendo secciones de orientación a tu aplicación. Todas estas capacidades hacen que tu aplicación sea más funcional y fácil de usar, y por lo tanto, es más competitiva dentro del ecosistema de Manychat.

Cómo utilizar el bloque de autenticación

La API de números aleatorios no requiere la clave de API, pero muchas otras API sí.

Para crear una conexión con estas API, puedes configurar un bloque de autenticación.

Requisitos previos (probaremos con Taste Dive como ejemplo):

Intentemos crear una aplicación que requiera una clave de API y luego la utilice como parámetro de consulta:

TXl279HGIi9DMFhCSoZlkRcvkBf0mZ_vAQ.png?1686564917

Aquí está el ejemplo de código completo: remezcla esto
 

Configurar variables globales en el bloque de autenticación

El bloque de autenticación también se puede utilizar para configurar variables globales como nombres de dominio, URLs base, etc.

Puedes incluir tantos objetos de parámetros como necesites. Todos los datos introducidos por sus usuarios se guardarán y estarán disponibles para su reutilización en acciones.

Este es un ejemplo para la API de ActiveCampaign:

"params": 
  [
    {
      "name": "base",
      "title": "Por favor, introduce la URL de base de Active Campaign"
    },
    {
      "name": "token",
      "title": "Por favor, introduce tu token de Active Campaign"
    }
  ]

Entonces, tu URL de solicitud de acción puede venir como https://[[base]]/api/3/

Esto ahorrará tiempo a tus usuarios: no es necesario un formulario de acción adicional, se pueden solicitar datos reutilizables una vez.

Cómo utilizar la carga útil

Algunos API endpoints requieren payloads.

Para hacer que JSON funcione para estos casos, puedes añadir carga útil {} como se muestra abajo. Los valores para la carga útil se pueden pasar desde formularios [[]].

En este caso, hemos creado un registro en Pipedrive CRM. El API endpoint requiere carga útil con nombre y correo electrónico. Cuando el usuario final configura la acción, elige campos personalizados para nombre y correo electrónico. Luego Manychat lanza la acción añadiendo a la carga útil específica para cada valor de contacto asociado con campos personalizados.

Eb98qvUf3juq-puqXcWs1pW1b39ksFRSVA.png?1686564919

Aquí está el enlace de Glitch, no dudes en utilizar este proyecto como ejemplo: remezcla esto

En algunos casos, no hay necesidad de pasar valores dinámicos para la carga útil. Así es cómo puede verse:

c1c3szQk0BXPJPrt3NLtAxYixJ4PLG3YTA.png?1686564920

Cada vez que se procesa la acción, pasaremos la misma carga útil a la URL especificada.

Cómo utilizar las fuentes

enum:static

Para random-number-app-v1 usamos el campo Min y Max proporcionado por el usuario a través de campos personalizados.

Si deseamos proporcionar nuestros propios valores, podemos utilizar el concepto de fuentes.

Consulta el ejemplo de Glitch y comprueba los comentarios de los bloques de formularios y de fuentes: remezcla esto

Así es cómo funciona Manychat con estos datos:

8-2.png

enum:rpc

Para similar-to-music-app, usamos campo personalizado para parámetro q.

Utilizando enum:rpc, podemos proporcionar la lista de músicos y bandas de esta API. Mira este proyecto de Glitch para entender cómo añadir la fuente enum:rpc a tu aplicación: remezcla esto

Este es un ejemplo de un código implementado:

8-3.png

Cómo utilizar la guía

En algunos casos, la configuración de la acción de la aplicación puede requerir una guía paso a paso. Si la descripción de la acción no es suficiente para comunicar todos los detalles necesarios, puedes añadir el campo guía en el bloque de acción.

Este es el ejemplo de una guía de tres pasos, para saltos de línea puedes usar \n (que es opcional)

G424eUytTIJPFFQKMj4e90T-8tleHTVQpw.gif?1686564925

Para los usuarios de tu aplicación, aparecerá como se muestra a continuación:

slack-app-action.png

Cómo hacer que los campos sean opcionales

A veces, los campos de acción no son obligatorios o pueden ser rellenados con valores predeterminados. Para facilitar la configuración, permitimos que los campos se preconfiguren con un nuevo parámetro llamado predeterminado.I3DIF5zeN6YlK-Uc3Qpvhoog_8RmNVSOTA.gif?1686564926

Tú, como desarrollador de aplicaciones, puedes especificar el valor predeterminado para un campo en particular. Esto hará que el campo sea opcional. Hasta que tus usuarios especifiquen su propio valor, recibirás el valor predeterminado cada vez que esta acción se dispare.

Cómo se ve el formulario de acción:

w5Vdsv6CTjeyuUeeuu5RYFHocSNipUOz9w.png?1686564927

Los usuarios de la aplicación pueden omitir este campo:

8.gif

Cómo utilizar los disparadores

Los Disparadores te permiten iniciar flujos cuando un evento tiene lugar en una aplicación externa.

Ejemplos de dichos eventos:

  • el contacto crea un pedido o paga por algo fuera de Manychat
  • el contacto está etiquetado en tu CRM
  • un evento programado está ocurriendo

Si deseas enviar flujos cuando estos eventos ocurren — los disparadores están a tu disposición.

Desde la perspectiva de un desarrollador, hay algunos pasos para hacer que los disparadores funcionen:

  • Especificar los disparadores en App JSON (más detalles están disponibles aquí)
"triggers": [
    {
      "name": "trigger_tag_added",
      "title": "Tag added",
      "description": "Tag \"Deal closed\" is added in X CRM"
    }
  ]
  • Envía un hook en el siguiente endpoint https://https://manychat.com/apps/wh añadiendo el encabezado de autorización con la clave de aplicación cada vez que se produce el evento. Las cargas útiles deben tener el siguiente formato:
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

Cómo obtener una clave de aplicación

Cuando un cliente instala tu aplicación, Manychat les notifica que esta aplicación tiene disparadores y les pide que proporcionen al desarrollador la clave de la aplicación.

Te animamos a comunicarte claramente con tus clientes de la forma en que deseas obtener la clave de aplicación (aunque la forma habitual es una página especial en tu sitio web para configurar integraciones externas)

8l9b4djofsKZx973b3ggUD4h80kovatpmQ.png?1686564929

Disparadores con contexto

Puedes enriquecer tu disparador con contexto externo. Vamos a verificar la diferencia:

Disparador simple Disparador con contexto
Pedido creado Pedido creado, el importe del pedido es de 107 USD
El contacto aparece etiquetado como "lead" El contacto aparece etiquetado como "lead", la probabilidad de la oferta es del 90%

 

Este es el ejemplo JSON de cómo especificar el disparador con un contexto externo.

Dentro del contexto puedes proporcionar tantas variables como desees. Todas estas variables se pueden usar en el constructor de flujos para más automatizaciones inteligentes.

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

Aquí está el flujo con el disparador + contexto. Puedes utilizar este contexto como una condición, como parte del nodo de contenido y hacer que tus automatizaciones sean inteligentes y personalizadas.

B70lmzk4HJFyW5kis8V1dtDEDFdh84lRFw.png?1686564930

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

 

Cómo utilizar los campos del sistema

Para acceder fácilmente a los campos del sistema, puede especificarlos usando llaves {{ }}. Todos los datos serán capturados automáticamente.

Aquí está una aplicación de ejemplo que muestra cómo capturar datos de campos del sistema sin crear formularios.

8-5.png

8-6.png

Resumen

  1. Explora esta documentación y los proyectos de Glitch para entender cómo hacer App JSON para diferentes propósitos
  2. Haz clic en "Remezclar para editar' para crear tu propia aplicación usando nuestros ejemplos
  3. Copia y pega JSON en aplicaciones Manychat
  4. Instala tu aplicación para obtener más resultados con tu propia integración
  5. Comparte tu aplicación con clientes para que obtenga prestigio

¿Fue útil este artículo?