L'un des types de contenus les plus performants et les plus polyvalents de RCS Business Messaging est la carte enrichie. Une carte enrichie vous permet d'envoyer des informations associées dans un seul message, y compris une image ou une vidéo, un titre, une description et quatre suggestions de réponses ou d'actions.
Les cartes enrichies et les carrousels de cartes enrichis sont des fonctionnalités puissantes qui peuvent vous aider à créer des expériences attrayantes pour les utilisateurs. Ils fonctionnent aussi bien que les images statiques comme le bon de réduction ou le produit que vous souhaitez partager. Que se passe-t-il si vous devez envoyer du contenu dynamique en fonction des informations sur l'utilisateur, comme une carte d'embarquement ?
Dans cet article, je vous explique comment créer des images à la volée avec du code HTML et les intégrer dans les cartes enrichies envoyées par votre agent. Voyons d'abord comment convertir du code HTML en image.
Du HTML à l'image
Le HTML est idéal pour disposer de combinaisons de texte et de médias. En tant que développeur, si nous devons créer un produit pour envoyer à un utilisateur une carte d'embarquement, un graphique de consommation des données ou tout autre type d'informations spécifiques à l'utilisateur, nous utiliserons l'outil HTML dynamique. Dans RCS Business Messaging, les cartes enrichies ne sont compatibles qu'avec les types de médias image et vidéo. Par conséquent, pour exploiter la puissance du HTML pour générer du contenu dynamique, vous devez d'abord convertir le code HTML en image.
Heureusement, la plupart des langages de programmation modernes sont compatibles avec les bibliothèques permettant de faire des captures d'écran de pages Web ou de composants pouvant afficher au moins du code HTML de base (par exemple, JEditorPane), que vous pouvez utiliser pour générer une image.
Des API permettent également de prendre des photos de pages Web. Par exemple, l'API Page Insights de Google peut générer automatiquement des captures d'écran à partir d'une URL.
Exemple :
https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=https://www.google.com&screenshot=true
Nous allons utiliser une application Express Node.js pour générer une carte d'embarquement spécifique à un utilisateur avec du code HTML, la convertir en image, l'importer dans une URL accessible publiquement et la joindre à une carte enrichie pour l'envoyer à un utilisateur.
Créer une carte d'embarquement dynamique
Pour commencer, nous avons besoin du code HTML pour générer une carte d'embarquement, comme dans l'image ci-dessous.
Pour ce faire, vous disposez de nombreuses méthodes, mais nous allons définir une URL dans une application Node.js appelée /getTicket?msisdn=+12223334444, qui affiche le code HTML dont nous avons besoin pour la carte d'embarquement à l'aide du moteur de vue EJS.
Supposons qu'une fonction appelée getUserTicket récupère le numéro de téléphone de l'utilisateur et renvoie un objet "ticket" contenant des informations telles que l'heure de départ, le siège, le type de billet, le lieu de départ, etc.
Dans le routeur de l'application Express, nous définissons le point de terminaison getTicket, appelons la fonction getUserTicket et transmettons le ticket au modèle EJS.
router.get('/getTicket', function(req, res, next) {
// Get the passed in phone number
let msisdn = req.body.msisdn;
// Get the ticket object for this user
let ticket = getUserTicket(msisdn);
// Render the ticket in HTML using an EJS template
res.render('ticket', {ticket: ticket});
});
Le modèle EJS du billet définit le code HTML suivant pour l'exemple d'exemple de billet Bonjour Rail.
<div>
<div>
<div class="left"><img width="200" src="/images/bonjour-rail-logo.png" /></div>
<div class="right muted-text"><%= ticket.dateOfDeparture; %></div>
<div class="cl"></div>
</div>
<div>
<div class="left highlighted-text-color"><h2><%= ticket.startingLocation.city %></h2><br/><%= ticket.startingLocation.station %></div>
<div class="right highlighted-text-color"><h2><%= ticket.endingLocation.city %></h2><br/><%= ticket.endingLocation.station %></div>
<div class="cl"></div>
</div>
<div>
<div class="left">
<h3>PLATFORM <%= ticket.platform %></h3>
<div>
<div class="left">
<div><h4>DEPART</h4></div>
<div><%= ticket.departureTime %></div>
</div>
<div class="left">
<div><h4>ARRIVE</h4></div>
<div><%= ticket.arrivalTime %></div>
</div>
<div class="cl"></div>
</div>
<div>
<div class="left">
<div><h4>TICKET TYPE</h4></div>
<div><%= ticket.ticketType %></div>
</div>
<div class="left">
<div><h4>SEAT</h4></div>
<div><%= ticket.seat %></div>
</div>
<div class="cl"></div>
</div>
</div>
<div class="right">
<img src="<%= ticket.qrCode %>" width="170" />
</div>
<div class="cl"></div>
</div>
</div>
Créer une image à partir du code HTML
Nous avons défini le code HTML pour créer la carte d'embarquement, mais nous devons pouvoir la convertir en image.
De nombreux modules Node.js Open Source sont disponibles pour convertir le code HTML brut et les URL en images. Pour cet exemple, nous allons utiliser node-webshot, un wrapper léger pour PhantomJS.
PhantomJS est un navigateur sans interface graphique qui peut afficher le code HTML en images. Étant donné que PhantomJS s'appuie sur WebKit pour le rendu, il peut gérer les pages complexes avec des images, du code CSS et du code JavaScript.
Après avoir installé WebShot (npm install --save node-webshot), vous pouvez facilement convertir le code HTML en image.
var webshot = require('node-webshot');
let url = '/getTicket?msisdn=' + msisdn;
let htmlAsImageFileLocation = 'ticket.png';
// Define screenshot options
var options = {
screenSize: {
width: 550,
height: 450
},
shotSize: {
width: 550,
height: 450
},
userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'
};
// Save html as an image
webshot(url, htmlAsImageFileLocation, options, function(err) {
// TODO: Upload image to a publicly accessible URL
});
Stocker des fichiers vers une URL accessible au public
Pour utiliser l'image générée par Webshot, nous avons besoin d'une URL accessible au public. Si vous générez l'image sur un serveur Web dédié, vous pouvez simplement enregistrer le fichier dans un dossier public. Dans cet exemple, nous allons importer le fichier sur Google Cloud Storage.
La fonction ci-dessous récupère un emplacement d'image local et l'importe dans Google Cloud Storage, en renvoyant le lien multimédia qui vient d'être créé.
function uploadImage(imageLocation) {
const {Storage} = require('@google-cloud/storage');
// Creates a client
const storage = new Storage();
// Define the Cloud storage location and file name
const bucketName = 'sample-image-uploads';
const yourFileDestination = 'uploaded-image.png';
// Set the options for the upload to be readable by anyone
const options = {
destination: yourFileDestination,
predefinedAcl: 'publicRead'
};
// Return a promise that includes the storage upload
return new Promise(function(resolve, reject) {
// Uploads a local file to the bucket
storage.bucket(bucketName).upload(imageLocation, options)
.then(results => {
// Return the image URL
resolve(results[0].metadata.mediaLink);
}).catch(error => {
reject(error);
});
});
}
Nous devons ensuite remplacer le TODO précédemment commenté par un appel pour utiliser cette fonction uploadImage.
// Save html as image
webshot(url, htmlAsImageFileLocation, options, function(err) {
let uploadRequest = uploadImage(filename);
uploadRequest.then(function(imageUrl) {
// TODO: Use the imageUrl in a rich card to send to the user
});
});
Envoyer une carte enrichie avec l'image
Nous y sommes presque. Pour terminer cette étape, nous allons définir la fonction sendBoardingPass(imageUrl, msisdn), qui crée une carte enrichie RBM à l'aide de l'image créée à l'étape précédente et l'envoie à l'utilisateur.
Pour envoyer la carte enrichie avec le service RBM, j'utilise le même SDK Node.js que dans le premier exemple d'agent.
function sendBoardingPass(imageUrl, msisdn) {
let title = 'Here is your boarding pass.';
let suggestions = [
{
reply: {
text: 'See more options',
postbackData: 'more_options',
}
},
];
let params = {
messageText: title,
msisdn: msisdn,
imageUrl: imageUrl,
suggestions: suggestions,
height: 'TALL',
};
// Send the boarding pass
rbmApiHelper.sendRichCard(params);
}
Vous trouverez ci-dessous une capture d'écran du résultat final.
Résumé et résumé
Le moyen le plus simple d'améliorer la polyvalence des cartes enrichies consiste à utiliser du code HTML dynamique et à le convertir en images. La plupart des langages de programmation modernes sont compatibles avec les bibliothèques ou les API qui vous aideront à effectuer la conversion. Vous devrez peut-être tester l'ajustement de l'image pour obtenir des images adaptées à votre cas d'utilisation, mais c'est une excellente approche pour créer des visuels plus attrayants dans vos agents RBM.
Bonne chance et bon codage !