Publicar un agente en WhatsApp

Después de publicar tu agente, puedes ponerlo a disposición de tus usuarios de WhatsApp. Tus usuarios de WhatsApp no pueden interactuar con el agente hasta que lo publiques.

Nota:

Configura tu agente para usar WhatsApp

Importante

Asegúrese de que se cumplen todos los requisitos previos antes de comenzar este procedimiento.

  1. Configura la autenticación de tu agente en No autenticación o en Autenticar manualmente.

  2. Publica tu agente. Consulte Publicar el contenido más reciente.

  3. Vaya a la página Canales del agente.

  4. Seleccione WhatsApp. Aparecerá el panel de configuración.

  5. En la primera página del panel de configuración, seleccione Continuar.

  6. Seleccione la suscripción Azure y el recurso de Azure Communication Services (ACS) y, después, seleccione Continue.

  7. Selecciona el número de teléfono al que quieres que se conecte tu agente y luego selecciona Desplegar.

    Nota:

    Después de seleccionar Deploy, Copilot Studio puede tardar un momento antes de mostrar un código QR.

  8. Usa tu dispositivo de WhatsApp para escanear el código QR y empieza a chatear con el agente por WhatsApp. Como alternativa, seleccione Descargar para descargar la imagen de código QR. Cualquier persona con este código QR que cumpla todos los criterios de autenticación puede chatear con el agente a través de WhatsApp.

Usar las tarjetas adaptables admitidas en los temas de su agente

Al igual que con todos los agentes de Copilot Studio, los agentes implementados en WhatsApp usan temas para definir cómo progresa una conversación del agente. Las tarjetas adaptables permiten escribir fragmentos de código de interfaz de usuario independientes de la plataforma en JSON que se interpretan en la interfaz de usuario nativa cuando se entregan a aplicaciones específicas. Los agentes de WhatsApp soportan los siguientes tres tipos de tarjetas adaptativas:

  • Tarjeta adaptable de acciones interactivas ("type": "Action.Submit")

    Captura de pantalla de WhatsApp en un dispositivo móvil que muestra la apariencia de la tarjeta adaptable de acciones interactivas.

  • Tarjeta adaptable de elección ("type": "Input.ChoiceSet")

    Captura de pantalla de WhatsApp en un dispositivo móvil que muestra la apariencia de la tarjeta adaptable Choice.

  • Tarjeta adaptable de dirección URL abierta ("type": "Action.OpenUrl")

    Captura de pantalla de WhatsApp en un dispositivo móvil que muestra el aspecto de la tarjeta adaptable de Open URL.

Como creador, si quieres desplegar un agente en un canal de WhatsApp, debes restringir el uso de tarjetas adaptativas a este subconjunto de tipos de tarjetas. Para obtener más información sobre el uso de tarjetas adaptables en Copilot Studio, consulte Uso de tarjetas adaptables en Copilot Studio.

Ejemplo: Tarjeta adaptable de acciones interactivas

Use la tarjeta adaptable Acciones interactivas para permitir que los usuarios finales seleccionen una de las tres opciones en forma de botones. Este método de selección de varias opciones es más rápido para el usuario final, con menos pasos, que el método alternativo de selección de una lista de opciones (el método de tarjeta adaptable Choice). Sin embargo, la tarjeta adaptable de acciones interactivas no se puede usar para más de tres botones. Los fabricantes pueden invocar esta tarjeta adaptativa usando la funcionalidad Preguntar con la Tarjeta Adaptativa .

  1. Vaya al tema deseado y agregue un nodo tarjeta adaptable.

  2. En el editor de carga útil de tarjeta del diseñador de tarjetas adaptables, copie y pegue el siguiente código JSON:

    {
"type": "AdaptiveCard",
"$schema": "https://adaptivecards.microsoft.com/schemas/adaptive-card.json",
"version": "1.5",
"body": [
  {
    "type": "TextBlock",
    "text": "Do you want to go to a weather web site for a specific country?",
    "wrap": true
  },
  {
    "type": "ActionSet",
    "actions": [
      {
        "type": "Action.Submit",
        "title": "Yes",
        "id": "yesButtonId"
      },
      {
        "type": "Action.Submit",
        "title": "No",
        "id": "noButtonId"
      }
    ]
 }
]
}

  3. En el JSON, en la sección con una clave type que tiene el valor ActionSet, en "actions":, asegúrese de que haya el número correcto de acciones.

    Por ejemplo, si necesita tres botones, en "actions":, debe haber tres conjuntos de acciones, con cada conjunto compuesto por una tecla type, title y id.

  4. Haga los cambios siguientes al JSON:

    Cambio A
    Valor de "text": (en "type": "TextBlock") El texto deseado que pide a los usuarios finales que elijan entre los botones
    Valor de "title": (bajo la clave primera "type": "Action.Submit") Texto deseado en el primer botón
    Valor de "id": (bajo la clave primera "type": "Action.Submit") Identificador deseado para el primer botón
    Valor de "title": (con la segunda clave "type": "Action.Submit") Texto deseado en el segundo botón
    Valor de "id": (con la segunda clave "type": "Action.Submit") Identificador deseado para el segundo botón

  5. Seleccione Guardar en el diseñador de tarjetas adaptables y, a continuación, seleccione Cerrar.

    El lienzo de creación de este tema podría ser similar a la siguiente captura de pantalla:

    Captura de pantalla del lienzo de creación que muestra el flujo de conversación que permite a los usuarios seleccionar uno de hasta tres botones.

  6. Guarde el tema.

  7. Una vez finalizados todos los cambios en el agente, publique el agente de nuevo.

Ejemplo: Opción de tarjeta adaptable

Use la tarjeta adaptable Choice para permitir que los usuarios finales seleccionen una opción de hasta 10 que se presentan como una lista. Esta tarjeta adaptable usa un bloque de texto que el usuario final de WhatsApp debe seleccionar y, a continuación, mostrar el conjunto de opciones elegido. Después, el usuario final debe seleccionar una de las opciones y, a continuación, seleccionar Enviar. Los creadores pueden invocar esta tarjeta adaptable con la funcionalidad Preguntar con tarjeta adaptable .

  1. En el lienzo de creación del tema al que quieres añadir esta tarjeta adaptativa, selecciona el icono de Añadir nodo en la ubicación deseada y luego selecciona Preguntar con tarjeta adaptativa.

  2. Seleccione el nuevo nodo de la Tarjeta adaptativa para enfocarlo. Selecciona el icono Más del nodo y selecciona Propiedades.

  3. En el panel Propiedades del nodo de tarjeta adaptable , seleccione Editar tarjeta adaptable.

  4. En el editor de carga útil de tarjeta del diseñador de tarjetas adaptables, copie y pegue el siguiente código JSON:

    {
"type": "AdaptiveCard",
"$schema": "https://adaptivecards.microsoft.com/schemas/adaptive-card.json",
"version": "1.5",
"body": [
  {
    "type": "TextBlock",
    "text": "Pick a country:",
    "wrap": true
  },
  {
    "type": "Input.ChoiceSet",
    "choices": [
      {
        "title": "Falkland Islands",
        "value": "Falkland Islands"
      },
      {
        "title": "Singapore",
        "value": "Singapore"
      },
      {
        "title": "Norway",
        "value": "Norway"
      },
      {
        "title": "South Africa",
        "value": "South Africa"
      }
    ],
    "placeholder": "Select Country",
    "id": "countryChoice"
  },
  {
    "type": "ActionSet",
    "actions": [
      {
        "type": "Action.Submit",
        "title": "Submit Response",
        "id": "submitResponseId"
      }
    ]
  }
]
}

  5. En el JSON, en la sección con una type clave cuyo valor es Input.ChoiceSet, debajo de "choices":, asegúrese de tener el número correcto de opciones.

    Por ejemplo, si necesita siete (7) opciones seleccionables presentadas en una lista, en "choices":, debe haber siete conjuntos de opciones, con cada conjunto formado por una title clave y value .

  6. Haga los cambios siguientes al JSON:

    Cambio A
    Valor de "text": (en "type": "TextBlock") El texto deseado que solicita a los usuarios finales que muestren una lista de opciones
    Valor de "title": (para cada opción bajo la clave "type": "Input.ChoiceSet") Texto deseado que describe o denomina la opción enumerada
    Valor de "value": (para cada opción bajo la clave "type": "Input.ChoiceSet") Valor asignado a Input.ChoiceSet.value, que se usa para su posterior procesamiento
    Valor de "id": (en "type": "Input.ChoiceSet") Valor de identificador de la variable de conjunto de opciones (denominada countryChoice, en el ejemplo). Este valor ID toma el valor registrado value que indica la elección del usuario de la lista. Nota: Este valor debe estar en formato formal camelCase .

  7. Seleccione Guardar en el diseñador de tarjetas adaptables y, a continuación, seleccione Cerrar.

    El lienzo de creación de este tema podría ser similar a la siguiente captura de pantalla:

    Captura de pantalla del lienzo de creación que muestra el flujo de conversación que permite a los usuarios elegir entre una lista de opciones.

  8. Seleccione Guardar en el lienzo de creación para confirmar los cambios de la tarjeta adaptable en el tema.

  9. Cuando termines todos los cambios en el agente, vuelve a publicarlo.

Ejemplo: Tarjeta adaptable para abrir URL

Use la tarjeta adaptable Open URL para enviar un usuario final a un sitio web. A diferencia de las otras dos tarjetas adaptables, la tarjeta adaptable Open URL no se puede invocar mediante la funcionalidad Ask con tarjeta adaptable en Copilot Studio. En su lugar, debes adjuntar esta tarjeta adaptativa a un mensaje creado usando la función Enviar un mensaje .

  1. En el lienzo de creación del tema donde quieres añadir esta tarjeta adaptativa, selecciona el icono de Añadir nodo en la ubicación deseada y luego selecciona Enviar un mensaje.

  2. En el nuevo nodo Mensaje, seleccione Agregar>tarjeta adaptable.

  3. Selecciona la nueva área de Medios del nodo de mensaje. Luego, selecciona el icono Más del nodo y selecciona Propiedades.

    Nota:

    Vuelva a seleccionar el nuevo área Multimedia del nodo de mensaje si el botón Editar tarjeta adaptable no aparece en el panel propiedades de tarjeta adaptable .

  4. En el panel Propiedades de la tarjeta adaptable , seleccione Editar tarjeta adaptable.

  5. En el editor de carga útil de tarjeta del diseñador de tarjetas adaptables, copie y pegue el siguiente código JSON:

    {
"type": "AdaptiveCard",
"$schema": "https://adaptivecards.microsoft.com/schemas/adaptive-card.json",
"version": "1.5",
"body": [
  {
    "type": "TextBlock",
     "text": "Click 'Ok' for weather information for Singapore.",
     "wrap": true
  },
  {
    "type": "ActionSet",
    "actions": [
       {
         "type": "Action.OpenUrl",
         "title": "Ok",
         "url": "https://www.msn.com/en-za/weather/forecast/in-Singapore"
       }
    ]
  }
]
}

  6. Haga los cambios siguientes al JSON:

    Cambio A
    Valor de "text": (en "type": "TextBlock") El texto deseado que solicita a los usuarios finales que abran el sitio web
    Valor de "title": (en la clave "type": "ActionSet") Texto seleccionable deseado que abre el sitio web en un explorador cuando se selecciona
    Valor de "url": (en la clave "type": "ActionSet") Valor deseado del localizador uniforme de recursos (URL) del sitio web.

  7. Seleccione Guardar en el diseñador de tarjetas adaptables y, a continuación, seleccione Cerrar.

    El lienzo de creación de este tema podría ser similar a la siguiente captura de pantalla:

    Captura de pantalla del lienzo de creación que muestra el flujo de conversación que envía al usuario a un sitio web.

  8. Seleccione Guardar en el lienzo de creación para confirmar los cambios de la tarjeta adaptable en el tema.

  9. Cuando termines todos los cambios en el agente, vuelve a publicarlo.

Configura la autenticación de usuarios usando números de teléfono en WhatsApp

Cuando publicas un agente en WhatsApp, puedes elegir si autenticar a los usuarios. Si decides no autenticar a los usuarios, no necesitas tomar ninguna medida adicional.

Si decides autenticar usuarios, tienes las siguientes opciones:

  • Autenticación manual (consulte Autenticación manual)

  • Autenticarse usando un número de teléfono como ID de WhatsApp reconocido (ver Ejemplo: Autenticarse con un número de teléfono)

  • Autentíquese manualmente y mediante el reconocimiento de números de teléfono. Autentica usando ambos métodos para mayor seguridad.

    Importante

    El canal de WhatsApp no soporta autenticación con Microsoft.

Ejemplo: Autenticación con un número de teléfono

WhatsApp usa números de teléfono como identificadores (identificadores). Cuando un creador selecciona la autenticación de números de teléfono, una API de back-end comprueba que el número de teléfono WhatsApp del usuario se encuentra en la lista de números autorizados de la base de datos. Configure un desencadenador en Copilot Studio para enviar una solicitud HTTP a la API, definir el esquema de respuesta y establecer condiciones para controlar el flujo de conversación en función del estado de registro del usuario.

Nota:

Asegúrese de que el servidor back-end proporciona una API para validar si un número de teléfono determinado está registrado en la base de datos.

En este ejemplo, el servidor proporciona la siguiente API:

URI:/exists/_{phoneNumber}_

Respuesta:

  {
      phone: string
      exists: boolean 
  }

  1. Vaya a la página Temas de su agente.

  2. Seleccione Agregar un tema>Desde en blanco.

  3. Seleccione el icono Cambiar desencadenador del nodo Desencadenador y, a continuación, seleccione Se recibe un mensaje.

    Captura de pantalla del lienzo de creación que apunta al icono Cambiar desencadenador.

  4. Seleccione el icono Agregar nodo en el nodo desencadenador y seleccione Administración de variables>Establecer un valor de variable.

  5. En el nodo Establecer valor de variable , seleccione el campo Establecer variable .

  6. En la ventana Seleccionar una variable , seleccione Crear nuevo.

  7. En el nodo Establecer valor de variable , seleccione el nombre de la variable en el campo Establecer variable y, a continuación, cambie el nombre de la variable en el panel Propiedades de la variable.

  8. En el nodo Establecer valor de variable , en el campo Para valor , seleccione los tres puntos (...).

  9. En la ventana Escribir fórmula , seleccione la pestaña Fórmula .

  10. Copie la fórmula siguiente en el campo fórmula, sustituya <<BaseUri>> por el identificador uniforme de recursos (URI) de la API y, a continuación, seleccione Insertar.

    <BaseUri>/exists/"&System.Activity.From.Id

    Captura de pantalla de la ventana Escribir fórmula en la que se muestra la asignación del valor de URI a una variable.

  11. Seleccione el icono Agregar nodo en Establecer valor de variable y seleccione Avanzado>Enviar solicitud HTTP.

  12. Seleccione Registrar en Tipo de datos de respuesta.

  13. Seleccione Editar esquema y proporcione el esquema de respuesta.

    kind: Record
properties:
  exists: Boolean
  phone: String

  14. Para Guardar respuesta como, cree una variable denominada apiResponse.

  15. Seleccione el icono Agregar nodo en el nodo Solicitud HTTP y seleccione Agregar una condición.

  16. En el nodo Condición , seleccione Seleccionar una variable>apiResponse.exists.

  17. En el segundo campo de entrada, seleccione Is equal to (Es igual a).

  18. En Entrar o Seleccione un valor, escriba true.

  19. Seleccione el icono Agregar nodo en el nodo Todas las demás condiciones y seleccione Enviar un mensaje.

  20. Escriba un mensaje para mostrarlo a los usuarios no registrados.

    Nota:

    Puede personalizar el mensaje enviado a usuarios no registrados. En este ejemplo, el mensaje es Sorry, you are not registered.

  21. Seleccione el icono Agregar nodo debajo del nodo Mensaje y seleccione Gestión de temas>Finalizar todos los temas.

  22. Seleccione el icono Agregar nodo en el nodo Finalizar todos los temas y seleccione Gestión de temas>Finalizar conversación.

    Captura de pantalla del lienzo de edición del tema de autenticación de teléfono que muestra los nodos de condición que verifican el registro del número de teléfono.

  23. Seleccione Guardar en el lienzo de creación para confirmar los cambios en el tema.

  24. Cuando termines todos los cambios en el agente, vuelve a publicarlo.

    Después de publicar el cambio, el sistema comprueba el número de teléfono vinculado al dispositivo WhatsApp del usuario. Si el número no está en la base de datos, el sistema muestra el mensaje que configuró como mensaje no registrado.

    Captura de pantalla de WhatsApp en un dispositivo móvil que muestra el rechazo del usuario final de WhatsApp no registrado.

Desconectar a un agente de un número de teléfono

Para desconectar el agente del número de teléfono configurado para el canal whatsApp, abra el panel de configuración y seleccione Desconectar.

Limitaciones

El canal de WhatsApp no permite subir ni descargar archivos.

  • Last updated on