Schaltfläche "Link senden
In diesem Codeschnipsel erfahren Sie, wie Sie eine Schaltfläche im Stil eines Links auf WhatsApp senden können. Dazu wird die Vonage benutzerdefiniertes Objekt Einrichtung. Sie können in der WhatsApp-Entwicklerdokumentation nachlesen, wie die Besonderheiten der Nachrichtenformat.
Wenn der Empfänger der Nachricht auf die Link-Schaltfläche klickt, wird er um die Erlaubnis gebeten, mit dem Ziellink fortzufahren.
Beispiel
Stellen Sie sicher, dass die folgenden Variablen mit einer beliebigen Methode auf die gewünschten Werte gesetzt werden:
| Schlüssel | Beschreibung |
|---|---|
VONAGE_APPLICATION_ID | The Vonage Application ID. |
VONAGE_APPLICATION_PRIVATE_KEY_PATH | Private key path. |
BASE_URL | For production use the base URL is |
MESSAGES_API_URL | There are two versions of the API, each with their own endpoints. For production the previous Messages API endpoint was |
WHATSAPP_NUMBER | The WhatsApp number that has been allocated to you by Vonage. For sandbox testing the number is 14157386102. |
VONAGE_WHATSAPP_NUMBER | Refer to |
VONAGE_NUMBER | Refer to |
TO_NUMBER | Replace with the number you are sending to. E.g. |
WHATSAPP_TEMPLATE_NAMESPACE | The namespace ID found in your WhatsApp Business Account. Only templates created in your own namespace will work. Using an template with a namespace outside of your own results in an error code 1022 being returned. |
WHATSAPP_TEMPLATE_NAME | The name of the template created in your WhatsApp Business Account. |
HEADER_IMAGE_URL | The URL of the image to display in the template message header. |
HINWEIS: Verwenden Sie kein führendes + oder 00 Wenn Sie eine Telefonnummer eingeben, beginnen Sie mit der Landesvorwahl, z. B. 447700900000.
Voraussetzungen
Wenn Sie keine Bewerbung haben, können Sie einen erstellen aufrufen. Stellen Sie sicher, dass Sie auch Ihre Webhooks konfigurieren.
Schreiben Sie den Code
Fügen Sie Folgendes zu send-button-link.sh hinzu:
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": "'${WHATSAPP_SENDER_ID}'",
"channel": "whatsapp",
"message_type": "custom",
"custom": {
"type": "template",
"template": {
"name": "'${WHATSAPP_TEMPLATE_NAME}'",
"language": {
"policy": "deterministic",
"code": "en"
},
"components": [
{
"type": "header",
"parameters": [
{
"type": "image",
"image": {
"link": "'${MESSAGES_IMAGE_URL}'"
}
}
]
},
{
"type": "body",
"parameters": [
{
"type": "text",
"text": "Joe Bloggs"
},
{
"type": "text",
"text": "AB123456"
}
]
},
{
"type": "button",
"index": "0",
"sub_type": "url",
"parameters": [
{
"type": "text",
"text": "AB123456"
}
]
}
]
}
}
}'
Führen Sie Ihren Code aus
Speichern Sie diese Datei auf Ihrem Rechner und führen Sie sie aus:
Voraussetzungen
Wenn Sie keine Bewerbung haben, können Sie einen erstellen aufrufen. Stellen Sie sicher, dass Sie auch Ihre Webhooks konfigurieren.
npm install @vonage/server-sdk @vonage/messagesErstellen Sie eine Datei mit dem Namen send-button-link.js und fügen Sie den folgenden Code hinzu:
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} : {}),
},
);Schreiben Sie den Code
Fügen Sie Folgendes zu send-button-link.js hinzu:
vonage.messages.send({
to: MESSAGES_TO_NUMBER,
from: WHATSAPP_SENDER_ID,
channel: Channels.WHATSAPP,
messageType: 'custom',
custom: {
type: 'template',
template: {
name: WHATSAPP_TEMPLATE_NAME,
language: {
policy: 'deterministic',
code: 'en',
},
components: [
{
type: 'header',
parameters: [
{
type: 'image',
image: {
link: MESSAGES_IMAGE_URL,
},
},
],
},
{
type: 'body',
parameters: [
{
type: 'text',
text: 'Joe Bloggs',
},
{
type: 'text',
text: 'AB123456',
},
],
},
{
type: 'button',
index: '0',
sub_type: 'url',
parameters: [
{
type: 'text',
text: 'AB123456',
},
],
},
],
},
},
})
.then(({ messageUUID }) => console.log(messageUUID))
.catch((error) => console.error(error));Führen Sie Ihren Code aus
Speichern Sie diese Datei auf Ihrem Rechner und führen Sie sie aus:
Voraussetzungen
Wenn Sie keine Bewerbung haben, können Sie einen erstellen aufrufen. Stellen Sie sicher, dass Sie auch Ihre Webhooks konfigurieren.
Fügen Sie Folgendes zu build.gradle hinzu:
implementation 'com.vonage:server-sdk-kotlin:2.1.1'Erstellen Sie eine Datei mit dem Namen SendWhatsappLinkButton und fügen Sie den folgenden Code in die Methode main ein:
val client = Vonage {
applicationId(VONAGE_APPLICATION_ID)
privateKeyPath(VONAGE_PRIVATE_KEY_PATH)
}Schreiben Sie den Code
Fügen Sie der Methode main in der Datei SendWhatsappLinkButton Folgendes hinzu:
val messageId = client.messages.send(
whatsappCustom {
to(MESSAGES_TO_NUMBER)
from(WHATSAPP_SENDER_ID)
custom(mapOf(
"type" to MessageType.TEMPLATE,
"template" to mapOf(
"namespace" to WHATSAPP_TEMPLATE_NAMESPACE,
"name" to WHATSAPP_TEMPLATE_NAME,
"language" to mapOf(
"code" to Locale.ENGLISH,
"policy" to Policy.DETERMINISTIC
),
"components" to listOf(
mapOf(
"type" to "header",
"parameters" to listOf(
mapOf(
"type" to MessageType.IMAGE,
"image" to mapOf(
"link" to WHATSAPP_HEADER_IMAGE_URL
)
)
)
),
mapOf(
"type" to "body",
"parameters" to listOf(
mapOf(
"type" to MessageType.TEXT,
"text" to "Anand"
),
mapOf(
"type" to MessageType.TEXT,
"text" to "Quest"
),
mapOf(
"type" to MessageType.TEXT,
"text" to "113-0921387"
),
mapOf(
"type" to MessageType.TEXT,
"text" to "23rd Nov 2019"
)
)
),
mapOf(
"type" to MessageType.BUTTON,
"index" to 0,
"sub_type" to "url",
"parameters" to listOf(
mapOf(
"type" to MessageType.TEXT,
"text" to "1Z999AA10123456784"
)
)
)
)
)
))
}
)Führen Sie Ihren Code aus
Wir können das Applikation Plugin für Gradle verwenden, um die Ausführung unserer Anwendung zu vereinfachen. Aktualisieren Sie Ihre build.gradle mit dem Folgenden:
apply plugin: 'application'
mainClassName = project.hasProperty('main') ? project.getProperty('main') : ''Führen Sie den folgenden Befehl gradle aus, um Ihre Anwendung auszuführen, und ersetzen Sie dabei com.vonage.quickstart.kt.messages.whatsapp durch das Paket, das SendWhatsappLinkButton enthält:
Voraussetzungen
Wenn Sie keine Bewerbung haben, können Sie einen erstellen aufrufen. Stellen Sie sicher, dass Sie auch Ihre Webhooks konfigurieren.
Fügen Sie Folgendes zu build.gradle hinzu:
implementation 'com.vonage:server-sdk:9.3.1'Erstellen Sie eine Datei mit dem Namen SendWhatsappLinkButton und fügen Sie den folgenden Code in die Methode main ein:
VonageClient client = VonageClient.builder()
.applicationId(VONAGE_APPLICATION_ID)
.privateKeyPath(VONAGE_PRIVATE_KEY_PATH)
.build();Schreiben Sie den Code
Fügen Sie der Methode main in der Datei SendWhatsappLinkButton Folgendes hinzu:
var response = client.getMessagesClient().sendMessage(
WhatsappCustomRequest.builder()
.from(WHATSAPP_SENDER_ID).to(MESSAGES_TO_NUMBER)
.custom(Map.of(
"type", "template",
"template", Map.of(
"namespace", WHATSAPP_TEMPLATE_NAMESPACE,
"name", WHATSAPP_TEMPLATE_NAME,
"language", Map.of(
"code", Locale.ENGLISH,
"policy", Policy.DETERMINISTIC
),
"components", List.of(
Map.of(
"type", "header",
"parameters", List.of(
Map.of(
"type", "image",
"image", Map.of(
"link", WHATSAPP_HEADER_IMAGE_URL
)
)
)
),
Map.of(
"type", "body",
"parameters", List.of(
Map.of(
"type", "text",
"text", "Anand"
),
Map.of(
"type", "text",
"text", "Quest"
),
Map.of(
"type", "text",
"text", "113-0921387"
),
Map.of(
"type", "text",
"text", "23rd Nov 2019"
)
)
),
Map.of(
"type", "button",
"index", "0",
"sub_type", "url",
"parameters", List.of(
Map.of(
"type", "text",
"text", "1Z999AA10123456784"
)
)
)
)
)
))
.build()
);
System.out.println("Message sent successfully. ID: "+response.getMessageUuid());Führen Sie Ihren Code aus
Wir können das Applikation Plugin für Gradle verwenden, um die Ausführung unserer Anwendung zu vereinfachen. Aktualisieren Sie Ihre build.gradle mit dem Folgenden:
apply plugin: 'application'
mainClassName = project.hasProperty('main') ? project.getProperty('main') : ''Führen Sie den folgenden Befehl gradle aus, um Ihre Anwendung auszuführen, und ersetzen Sie dabei com.vonage.quickstart.messages.whatsapp durch das Paket, das SendWhatsappLinkButton enthält:
Voraussetzungen
Wenn Sie keine Bewerbung haben, können Sie einen erstellen aufrufen. Stellen Sie sicher, dass Sie auch Ihre Webhooks konfigurieren.
Install-Package VonageSchreiben Sie den Code
Fügen Sie Folgendes zu SendWhatsAppButtonLink.cs hinzu:
var credentials = Credentials.FromAppIdAndPrivateKeyPath(VONAGE_APPLICATION_ID, VONAGE_PRIVATE_KEY_PATH);
var vonageClient = new VonageClient(credentials);
var request = new WhatsAppCustomRequest
{
To = MESSAGES_TO_NUMBER,
From = WHATSAPP_SENDER_ID,
Custom = new Custom
{
type = "template",
template = new Template
{
@namespace = "whatsapp:hsm:technology:nexmo",
name = WHATSAPP_TEMPLATE_NAME,
language = new Language
{
code = "en",
policy = "deterministic"
},
components = new List<Component>
{
new()
{
type = "header",
parameters = new List<Parameter>
{
new()
{
type = "image",
image = new Image
{
link = MESSAGES_IMAGE_URL
}
}
}
},
new()
{
type = "body",
parameters = new List<Parameter>
{
new()
{
type = "text",
text = "Anand"
},
new()
{
type = "text",
text = "Quest"
},
new()
{
type = "text",
text = "113-0921387"
},
new()
{
type = "text",
text = "23rd Nov 2019"
}
}
},
new()
{
type = "button",
index = "0",
sub_type = "url",
parameters = new List<Parameter>
{
new()
{
type = "text",
text = "1Z999AA10123456784"
}
}
}
}
}
}
};
var response = await vonageClient.MessagesClient.SendAsync(request);Voraussetzungen
Wenn Sie keine Bewerbung haben, können Sie einen erstellen aufrufen. Stellen Sie sicher, dass Sie auch Ihre Webhooks konfigurieren.
composer require vonage/clientErstellen Sie eine Datei mit dem Namen send-button-link.php und fügen Sie den folgenden Code hinzu:
$keypair = new \Vonage\Client\Credentials\Keypair(
file_get_contents(VONAGE_APPLICATION_PRIVATE_KEY_PATH),
VONAGE_APPLICATION_ID
);
$client = new \Vonage\Client($keypair);Schreiben Sie den Code
Fügen Sie Folgendes zu send-button-link.php hinzu:
$custom = [
"type" => "template",
"template" => [
"namespace" => WHATSAPP_TEMPLATE_NAMESPACE,
"name" => WHATSAPP_TEMPLATE_NAME,
"language" => ["code" => "en", "policy" => "deterministic"],
"components" => [
[
"type" => "header",
"parameters" => [
[
"type" => "image",
"image" => ["link" => HEADER_IMAGE_URL],
],
],
],
[
"type" => "body",
"parameters" => [
["type" => "text", "text" => "Anand"],
["type" => "text", "text" => "Quest"],
["type" => "text", "text" => "113-0921387"],
["type" => "text", "text" => "23rd Nov 2019"],
],
],
[
"type" => "button",
"index" => "0",
"sub_type" => "url",
"parameters" => [
["type" => "text", "text" => "1Z999AA10123456784"],
],
],
],
],
];
$whatsApp = new \Vonage\Messages\Channel\WhatsApp\WhatsAppCustom(
TO_NUMBER,
FROM_NUMBER,
$custom
);
$client->messages()->send($whatsApp);Führen Sie Ihren Code aus
Speichern Sie diese Datei auf Ihrem Rechner und führen Sie sie aus:
Voraussetzungen
Wenn Sie keine Bewerbung haben, können Sie einen erstellen aufrufen. Stellen Sie sicher, dass Sie auch Ihre Webhooks konfigurieren.
pip install vonage python-dotenvSchreiben Sie den Code
Fügen Sie Folgendes zu send-button-link.py hinzu:
from vonage import Auth, Vonage
from vonage_messages import WhatsappCustom
client = Vonage(
Auth(
application_id=VONAGE_APPLICATION_ID,
private_key=VONAGE_PRIVATE_KEY,
)
)
message = WhatsappCustom(
to=MESSAGES_TO_NUMBER,
from_=WHATSAPP_SENDER_ID,
custom={
"type": "template",
"template": {
"name": WHATSAPP_TEMPLATE_NAME,
"language": {"policy": "deterministic", "code": "en"},
"components": [
{
"type": "header",
"parameters": [
{
"type": "image",
"image": {
"link": MESSAGES_IMAGE_URL,
},
},
],
},
{
"type": "body",
"parameters": [
{"type": "text", "text": "Joe Bloggs"},
{"type": "text", "text": "AB123456"},
],
},
{
"type": "button",
"index": "0",
"sub_type": "url",
"parameters": [{"type": "text", "text": "AB123456"}],
},
],
},
},
)
response = client.messages.send(message)
print(response)Führen Sie Ihren Code aus
Speichern Sie diese Datei auf Ihrem Rechner und führen Sie sie aus:
Voraussetzungen
Wenn Sie keine Bewerbung haben, können Sie einen erstellen aufrufen. Stellen Sie sicher, dass Sie auch Ihre Webhooks konfigurieren.
gem install vonageErstellen Sie eine Datei mit dem Namen send-button-link.rb und fügen Sie den folgenden Code hinzu:
Führen Sie Ihren Code aus
Speichern Sie diese Datei auf Ihrem Rechner und führen Sie sie aus:
Probieren Sie es aus
Wenn Sie den Code ausführen, wird eine WhatsApp-Nachricht mit einem Link-Button an den Empfänger gesendet. In diesem Beispiel ist die Schaltfläche ein Link zu den Paketverfolgungsinformationen.