Tutoriel : Rendre une réponse personnalisée sous forme de carrousel de contenu

Ce tutoriel montre comment vous pouvez utiliser des réponses personnalisées pour restituer des informations sous la forme d'un carrousel de contenu.

Pour obtenir une version complète et fonctionnelle de l'exemple présenté dans ce tutoriel, consultez la section « Carrousel de contenu pour le chat Web avec assistant IA ».

Un _carrousel de contenu_ (ou _slider_) est un type d'élément interactif qui présente différentes options sous la forme d'une série de diapositives défilantes.

L'assistant IA ne dispose pas d'un type de réponse intégré pour les carrousels de contenu. Vous pouvez plutôt utiliser le type user_defined de réponse pour envoyer une réponse personnalisée contenant les informations que vous souhaitez afficher, puis étendre le chat en ligne afin d'afficher le carrousel de contenu à l'aide des bibliothèques standard d' JavaScript.

Cet exemple montre comment utiliser la bibliothèque Swiper pour afficher une réponse personnalisée sous la forme d'un carrousel de contenu.

1. Dans l'étape de création d'un carrousel de contenu, utilisez l'éditeur JSON pour définir une réponse personnalisée " user_defined, qui peut contenir toutes les données que vous souhaitez inclure. Dans la réponse, spécifiez les données nécessaires pour remplir le carrousel de contenu. Dans cet exemple, nous envoyons des informations sur différents types de cartes de crédit, que nous affichons dans une réponse personnalisée :

    {
      "generic": [
        {
          "user_defined": {
            "carousel_data": [
              {
                "alt": "everyday card",
                "url": "lendyr-everyday-card.jpg",
                "title": "The Everyday Card",
                "description": "$300 bonus plus 5% gas station cash back offer. Earn 2% cash back on all other purchases."
              },
              {
                "alt": "preferred card",
                "url": "lendyr-preferred-card.jpg",
                "title": "The Preferred Card",
                "description": "$300 bonus plus 5% gas station cash back offer. Earn 5% cash back on all other purchases."
              },
              {
                "alt": "topaz card",
                "url": "lendyr-topaz-card.jpg",
                "title": "The Topaz Card",
                "description": "$90 Annual fee. Earn 120,000 bonus points. Earn additional points on every purchase."
              }
            ],
            "user_defined_type": "carousel"
          },
          "response_type": "user_defined"
        }
      ]
    }

Dans cet exemple, nous incluons les données du carrousel dans la réponse " user_defined En fonction de la conception de votre assistant, une autre option consisterait à stocker les données dans des variables de compétences accessibles par chat Web à partir de l'objet " context.

1. Créez un gestionnaire pour customResponse l'événement. Ce gestionnaire rend le carrousel de contenu en utilisant les styles définis par la bibliothèque Swiper. (Vous pouvez consulter les définitions de ces styles dans l 'exemple complet.)

Cette fonction s'appuie également sur une fonction d'aide (createSlides()), que nous créerons à l'étape suivante. Le code complet de cette fonction initialise également la bibliothèque Swiper. Pour plus d'informations, consultez l 'exemple complet.

    function carouselCustomResponseHandler(event, instance) {
      const { element, message } = event.data;

      element.innerHTML = `
        <div class="Carousel">
          <div class="swiper">
            <div class="swiper-wrapper"></div>
          </div>
          <div class="Carousel__Navigation" >
            <button type="button" class="Carousel__NavigationButton Carousel__NavigationPrevious bx--btn bx--btn--ghost">
              <svg fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M20 24L10 16 20 8z"></path></svg>
            </button>
            <div class="Carousel__BulletContainer"></div>
            <button type="button" class="Carousel__NavigationButton Carousel__NavigationNext bx--btn bx--btn--ghost">
              <svg fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 8L22 16 12 24z"></path></svg>
            </button>
          </div>
        </div>`;

      // Once we have the main HTML, create each of the individual slides that will appear in the carousel.
      const slidesContainer = element.querySelector('.swiper-wrapper');
      createSlides(slidesContainer, message, instance);

    ...

    }

1. Créez la fonction d'aide " createSlides() qui rend chaque diapositive dans le carrousel de contenu. Cette fonction récupère les valeurs de la réponse personnalisée (alt, " url, " title et " description) et les utilise pour remplir le code HTML de la diapositive. (Pour la fonction complète, voir l 'exemple complet.)

    carouselData.forEach((cardData) => {
      const { url, title, description, alt } = cardData;
      const cardElement = document.createElement('div');
      cardElement.classList.add('swiper-slide');

      cardElement.innerHTML = `
        <div class="bx--tile Carousel__Card">
          <img class="Carousel__CardImage" src="${url}" alt="${alt}" />
          <div class="Carousel__CardText">
            <div class="Carousel__CardTitle">${title}</div>
            <div class="Carousel__CardDescription">${description}</div>
          </div>
          <!-- Here you would use a link to your own page that shows more details about this card. -->
          <a href="https://www.ibm.com" class="Carousel__CardButton bx--btn bx--btn--primary" target="_blank">
            View more details
          </a>
          <!-- This button will send a message to the assisstant and web chat will respond with more info. -->
          <button type="button" class="Carousel__CardButton Carousel__CardButtonMessage bx--btn bx--btn--primary">
            Tell me more about this
          </button>
        </div>
      `;

      ...

      });

1. Dans votre onLoad gestionnaire d'événements, utilisez la méthode on() d'instance pour vous abonner à customResponse l'événement, en enregistrant la carouselCustomResponseHandler() fonction comme rappel.

      instance.on({
        type: 'customResponse',
        handler: (event, instance) => {
          if (event.data.message.user_defined && event.data.message.user_defined.user_defined_type === 'carousel') {
            carouselCustomResponseHandler(event, instance);
          }
        },
      });

Dans cet exemple, nous vérifions la propriété " user_defined_type de la réponse personnalisée et n'appelons la fonction " carouselCustomResponseHandler() que si le type spécifié est " carousel. Cette vérification facultative montre comment vous pouvez utiliser une propriété personnalisée pour définir plusieurs réponses personnalisées différentes (chacune ayant une valeur différente pour " user_defined_type).

Pour obtenir le code complet et fonctionnel, consultez l'exemple de carrousel de contenu pour le chat web avec assistant IA.