Envoyer un message RCS autonome à carte riche
Dans cet extrait de code, vous apprenez à envoyer un message RCS Rich Card à l'aide de la fonction card type de message du canal RCS de l'API Messages
- Pour plus d'informations sur la messagerie RCS, voir Comprendre la messagerie RCS
- Pour un guide détaillé sur le
cardtype de message voir Types de messages RCS Rich Cards
Exemple
Vous trouverez ci-dessous la description de toutes les variables utilisées dans chaque extrait de code :
| Clé | Description |
|---|---|
VONAGE_APPLICATION_ID | The Vonage Application ID. |
VONAGE_PRIVATE_KEY_PATH | Private key path. |
MESSAGES_API_URL | There are two versions of the API, each with their own endpoints. For production the previous Messages API endpoint was |
JWT | Used to authenticate your request. See Authentication for more information, including how to generate a JWT. |
IMAGE_URL | The link to the image file to send. |
TO_NUMBER | The number you are sending the RCS message to in E.164 format. For example |
RCS_SENDER_ID | The sender ID for the RCS message. |
NOTE : N'utilisez pas de point de départ + ou 00 lorsque vous saisissez un numéro de téléphone, commencez par l'indicatif du pays, par exemple 447700900000.
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
Rédiger le code
Ajouter ce qui suit à send-rich-card-standalone.sh:
curl -X POST "${MESSAGES_API_URL}" \
-H "Authorization: Bearer "$JWT\
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-d $'{
"to": "'${MESSAGES_TO_NUMBER}'",
"from": "'${RCS_SENDER_ID}'",
"channel": "rcs",
"message_type": "card",
"card": {
"title": "Quick question",
"text": "Do you like this picture?",
"media_url": "'${MESSAGES_IMAGE_URL}'",
"media_height": "SHORT",
"media_description": "Picture of a cat",
"thumbnail_url": "'${MESSAGES_IMAGE_URL}'",
"media_force_refresh": false,
"suggestions": [
{
"type": "reply",
"text": "Yes",
"postback_data": "suggestion_1"
},
{
"type": "reply",
"text": "I love it!",
"postback_data": "suggestion_2"
}
]
},
"rcs": {
"card_orientation": "HORIZONTAL",
"image_alignment": "RIGHT"
}
}'Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
npm install @vonage/server-sdk @vonage/messagesCréez un fichier nommé send-rich-card-standalone.js et ajoutez le code suivant :
const { Vonage } = require('@vonage/server-sdk');
const { Channels } = require('@vonage/messages');
/**
* It is best to send messages using JWT instead of basic auth. If you leave out
* apiKey and apiSecret, the messages SDK will send requests using JWT tokens
*
* @link https://developer.vonage.com/en/messages/technical-details#authentication
*/
const vonage = new Vonage(
{
applicationId: VONAGE_APPLICATION_ID,
privateKey: VONAGE_PRIVATE_KEY,
},
{
...(MESSAGES_API_URL ? {apiHost: MESSAGES_API_URL} : {}),
},
);Rédiger le code
Ajouter ce qui suit à send-rich-card-standalone.js:
vonage.messages.send({
messageType: 'custom',
channel: Channels.RCS,
custom: {
contentMessage: {
richCard: {
standaloneCard: {
thumbnailImageAlignment: 'RIGHT',
cardOrientation: 'VERTICAL',
cardContent: {
title: 'Quick question',
description: 'Do you like this picture?',
media: {
height: 'TALL',
contentInfo: {
fileUrl: MESSAGES_IMAGE_URL,
forceRefresh: 'false',
},
},
suggestions: [
{
reply: {
text: 'Yes',
postbackData: 'suggestion_1',
},
},
{
reply: {
text: 'I love it!',
postbackData: 'suggestion_2',
},
},
],
},
},
},
},
},
to: MESSAGES_TO_NUMBER,
from: RCS_SENDER_ID,
})
.then(({ messageUUID }) => console.log(messageUUID))
.catch((error) => console.error(error));Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
Ajouter ce qui suit à build.gradle:
implementation 'com.vonage:server-sdk-kotlin:2.1.1'Créez un fichier nommé SendRcsRichCard et ajoutez le code suivant à la méthode main:
val client = Vonage {
applicationId(VONAGE_APPLICATION_ID)
privateKeyPath(VONAGE_PRIVATE_KEY_PATH)
}Rédiger le code
Ajouter ce qui suit à la méthode main du fichier SendRcsRichCard:
val messageId = client.messages.send(
rcsCustom {
to(MESSAGES_TO_NUMBER)
from(RCS_SENDER_ID)
custom(mapOf(
"contentMessage" to mapOf(
"richCard" to mapOf(
"standaloneCard" to mapOf(
"thumbnailImageAlignment" to "RIGHT",
"cardOrientation" to "VERTICAL",
"cardContent" to mapOf(
"title" to "Quick question",
"description" to "Do you like this picture?",
"media" to mapOf(
"height" to "TALL",
"contentInfo" to mapOf(
"fileUrl" to MESSAGES_IMAGE_URL,
"forceRefresh" to "false"
)
),
"suggestions" to listOf(
mapOf(
"reply" to mapOf(
"text" to "Yes",
"postbackData" to "suggestion_1"
)
),
mapOf(
"reply" to mapOf(
"text" to "I love it!",
"postbackData" to "suggestion_2"
)
)
)
)
)
)
)
))
}
)Exécutez votre code
Nous pouvons utiliser le plugin Applications pour Gradle afin de simplifier l'exécution de notre application. Mettez à jour votre build.gradle avec ce qui suit :
apply plugin: 'application'
mainClassName = project.hasProperty('main') ? project.getProperty('main') : ''Exécutez la commande gradle suivante pour exécuter votre application, en remplaçant com.vonage.quickstart.kt.messages.rcs par le paquet contenant SendRcsRichCard:
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
Ajouter ce qui suit à build.gradle:
implementation 'com.vonage:server-sdk:9.3.1'Créez un fichier nommé SendRcsRichCard et ajoutez le code suivant à la méthode main:
VonageClient client = VonageClient.builder()
.applicationId(VONAGE_APPLICATION_ID)
.privateKeyPath(VONAGE_PRIVATE_KEY_PATH)
.build();Rédiger le code
Ajouter ce qui suit à la méthode main du fichier SendRcsRichCard:
var response = client.getMessagesClient().sendMessage(
RcsCustomRequest.builder()
.from(RCS_SENDER_ID).to(MESSAGES_TO_NUMBER)
.custom(Map.of("contentMessage", Map.of(
"richCard", Map.of("standaloneCard", Map.of(
"thumbnailImageAlignment", "RIGHT",
"cardOrientation", "VERTICAL",
"cardContent", Map.of(
"title", "Quick question",
"description", "Do you like this picture?",
"media", Map.of(
"height", "TALL",
"contentInfo", Map.of(
"fileUrl", MESSAGES_IMAGE_URL,
"forceRefresh", "false"
)
),
"suggestions", List.of(
Map.of(
"reply", Map.of(
"text", "Yes",
"postbackData", "suggestion_1"
)
),
Map.of(
"reply", Map.of(
"text", "I love it!",
"postbackData", "suggestion_2"
)
)
)
)
))
))
).build()
);
System.out.println("Message sent successfully. ID: " + response.getMessageUuid());Exécutez votre code
Nous pouvons utiliser le plugin Applications pour Gradle afin de simplifier l'exécution de notre application. Mettez à jour votre build.gradle avec ce qui suit :
apply plugin: 'application'
mainClassName = project.hasProperty('main') ? project.getProperty('main') : ''Exécutez la commande gradle suivante pour exécuter votre application, en remplaçant com.vonage.quickstart.messages.rcs par le paquet contenant SendRcsRichCard:
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
Install-Package VonageRédiger le code
Ajouter ce qui suit à SendRcsStandaloneRichCardMessage.cs:
var request = new RcsCardRequest()
{
To = MESSAGES_TO_NUMBER,
From = RCS_SENDER_ID,
Card = new CardAttachment("Quick question", "Do you like this picture?", new Uri(MESSAGES_IMAGE_URL))
.WithMediaDescription("Picture of a cat")
.WithMediaHeight(CardAttachment.Height.Short)
.WithThumbnailUrl(new Uri(MESSAGES_IMAGE_URL))
.AppendSuggestion(new ReplySuggestion("Yes", "suggestion_1"))
.AppendSuggestion(new ReplySuggestion("I love it!", "suggestion_2")),
Rcs = new MessageRcs()
{
CardOrientation = RcsCardOrientation.Horizontal,
ImageAlignment = RcsImageAlignment.Right,
},
};
var response = await vonageClient.MessagesClient.SendAsync(request);Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
composer require vonage/clientCréez un fichier nommé send-rich-card-standalone.php et ajoutez le code suivant :
$keypair = new \Vonage\Client\Credentials\Keypair(
file_get_contents(VONAGE_APPLICATION_PRIVATE_KEY_PATH),
VONAGE_APPLICATION_ID
);
$client = new \Vonage\Client($keypair);Rédiger le code
Ajouter ce qui suit à send-rich-card-standalone.php:
$rcsCard = new Vonage\Messages\Channel\RCS\RcsCustom(
'07778887777',
'09997485156',
[
"contentMessage" => [
"richCard" => [
"standaloneCard" => [
"thumbnailImageAlignment" => "RIGHT",
"cardOrientation" => "VERTICAL",
"cardContent" => [
"title" => "Quick question",
"description" => "Do you like this picture?",
"media" => [
"height" => "TALL",
"contentInfo" => [
"fileUrl" => "'\$IMAGE_URL'",
"forceRefresh" => "false"
]
],
"suggestions" => [
[
"reply" => [
"text" => "Yes",
"postbackData" => "suggestion_1"
]
],
[
"reply" => [
"text" => "I love it!",
"postbackData" => "suggestion_2"
]
]
]
]
]
]
]
]
);
$client->messages()->send($rcsCard);Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
pip install vonage python-dotenvRédiger le code
Ajouter ce qui suit à send-rich-card-standalone.py:
from vonage import Auth, Vonage
from vonage_messages import RcsCustom
client = Vonage(
Auth(
application_id=VONAGE_APPLICATION_ID,
private_key=VONAGE_PRIVATE_KEY,
)
)
custom_dict = {
"contentMessage": {
"richCard": {
"standaloneCard": {
"thumbnailImageAlignment": "RIGHT",
"cardOrientation": "VERTICAL",
"cardContent": {
"title": "Quick question",
"description": "Do you like this picture?",
"media": {
"height": "TALL",
"contentInfo": {
"fileUrl": MESSAGES_IMAGE_URL,
"forceRefresh": "false",
},
},
"suggestions": [
{
"reply": {
"text": "Yes",
"postbackData": "suggestion_1",
}
},
{
"reply": {
"text": "I love it!",
"postbackData": "suggestion_2",
}
},
],
},
}
}
}
}
message = RcsCustom(
to=MESSAGES_TO_NUMBER,
from_=RCS_SENDER_ID,
custom=custom_dict,
)
response = client.messages.send(message)
print(response)Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
gem install vonageCréez un fichier nommé send-rich-card-standalone.rb et ajoutez le code suivant :
Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
Essayez-le
Lorsque vous exécutez le code, un message est envoyé au numéro de destination.