Mostrar una tarjeta adaptable en Copilot Studio

Artículo
09/27/2024

Nota

Este artículo se aplica únicamente a los chatbots clásicos . Para ampliar los copilotos creados en Copilot Studio, no es necesario utilizar Bot Framework Composer. Todas las funciones descritas en este artículo están disponibles para los copilotos, directamente en Copilot Studio.

Mejore su bot desarrollando diálogos personalizados con Bot Framework Composer y luego agregándolos a su bot de Microsoft Copilot Studio.

En este ejemplo, aprenderá a mostrar una tarjeta adaptable en Microsoft Copilot Studio utilizando Composer.

Importante

La integración de Composer no está disponible para los usuarios que solo tengan la licencia de Teams Microsoft Copilot Studio Debe tener una licencia de prueba o completa de Microsoft Copilot Studio.

Requisitos previos

Crear un nuevo tema

En Microsoft Copilot Studio, cree un nuevo bot denominado Contoso Meal Delivery Service.
Vuelva a la página Temas y cree un nuevo tema llamado Meal delivery options.

Copie y pegue las siguientes frases desencadenadoras:

what meals can I order
what meal options do you have
what dishes do you deliver
entrees available for delivery

En el Lienzo de creación, seleccione el nodo Mensaje predeterminado. Seleccione los tres puntos verticales, luego seleccione Eliminar.
En el nodo Frases desencadenadoras, selecccone Agregar nodo (+) y luego seleccione Formular una pregunta. A continuación, en el nodo Pregunta:
1. Para Formular una pregunta, escriba What city are you in?.
2. En Identificar, seleccione Ciudad.
En Guardar respuesta como, seleccione la variable creada automáticamente. A continuación, en el panel de propiedades de variable:
1. Para Nombre, escriba user_city.
2. Para Uso, seleccione Bot (cualquier tema puede tener acceso a él).
Seleccione Guardar.

Variable de Microsoft Copilot Studio.

Crear una tarjeta adaptable

A continuación, mostrará imágenes de opciones de comida que están disponibles en la ciudad del usuario mediante Composer.

Abra su bot en Composer. Para obtener instrucciones sobre cómo hacerlo, consulte Comenzar a usar Bot Framework Composer.
Vaya a la página Categorías. En su bot, seleccione Más opciones (...) y luego seleccione + Agregar un cuadro de diálogo.
En Nombre, escriba Meals y luego seleccione Aceptar.
Vaya a la página Respuestas del bot. En el explorador de bots, seleccione Comidas y luego seleccione Mostrar código.

En la vista de código, copie y pegue la siguiente respuesta del bot. Luego reemplace las tres direcciones URL de imagen de ejemplo con las suyas propias.

# Chicken()
-Chicken

# Steak()
-Steak

# Tofu()
-Tofu

# SteakImageURL()
-https://www.example.com/steak.jpg

# ChickenImageURL()
-https://www.example.com/chicken.jpg

# TofuImageURL()
-https://www.example.com/tofu.jpg

Pestaña Composer Bot Responses con cadenas.

Copie y pegue el siguiente código en la misma vista de código para agregar una tarjeta adaptable que muestre tres imágenes.

# adaptivecardjson_meals(location)
- ```
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.1",
    "body": [
            {
            "type": "TextBlock",
            "text": "Meal delivery options for ${location}:",
            "size": "Medium",
            "weight": "Bolder"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${SteakImageURL()}",
                            "size": "Stretch",
                            "spacing": "Medium",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${ChickenImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${TofuImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Steak()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"                            
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Chicken()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Tofu()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}
```

Pestaña Respuestas de bot de Composer - Tarjeta adaptable JSON.

Copie y pegue el siguiente código en la misma vista de código para agregar una actividad que mostrará la tarjeta adaptable.
```
# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]
```

Mostrar la tarjeta adaptable

Vaya a la página Categorías. En el explorador de bots, seleccione el cuadro de diálogo Comidas y luego seleccione el disparador BeginDialog.
En el lienzo de creación de , seleccione Agregar (+) y luego seleccione Enviar una respuesta.
Seleccione el nuevo nodo Enviar una respuesta para abrir el panel de propiedades. Bajo Respuestas de bot, seleccione Mostrar código para cambiar al editor de código.

Advertencia

Al agregar la siguiente expresión en el siguiente paso al editor de respuesta en lugar de al editor de código, el bot responderá con JSON sin formato en lugar de una tarjeta adaptable.
Copie el siguiente la siguiente expresión en el editor de código.
```
- ${AdaptiveCardMeals(virtualagent.user_city)}
```
El acceso a las variables globales de Microsoft Copilot Studio se realiza en Composer usando el ámbito virtualagent. Este ámbito no aparecerá en el menú de referencia de propiedades de Composer, pero puede acceder a él ingresando una expresión directamente.

En este ejemplo, ${virtualagent.user_city} se refiere a la variable global user_city que fue creada en el bot de Microsoft Copilot Studio.

Publicar el contenido

Publica tu contenido de Composer para que esté disponible en tu Microsoft Copilot Studio bot.

Importante

Si selecciona Publicar en Composer, los cambios estarán disponibles para pruebas, pero no se publica automáticamente su bot.

Publica tu bot en Microsoft Copilot Studio para actualizar tu bot en todos los canales a los que está conectado.
Vaya a la página Temas de Microsoft Copilot Studio para ver su nuevo tema Comidas.
Abra el tema Opciones de entrega de comidas.
En el nodo Pregunta, seleccione Agregar nodo (+). Seleccione Redirigir a otro tema y luego elija Comidas.
Seleccione Guardar para guardar los cambios.

Probar su bot

Para probar sus cambios en Microsoft Copilot Studio, abra el Panel del bot de prueba y asegúreese de que Realizar seguimiento de un tema a otro está activado. Introduzca el mensaje What meals do you deliver? para iniciar su conversación.

Su bot desencadenará el tema Opciones de entrega de comidas, que pregunta al usuario por su ciudad actual. Luego, el bot se redirigirá al cuadro de diálogo de Composer Comidas para mostrar una tarjeta adaptable.

Prueba de ejemplo 1 de Microsoft Copilot Studio.

Siguiente paso

Mostrar una lista de opciones de selección múltiple en Copilot Studio.

Compartir a través de