DEV Community: Benjamin Aronov

How to Send RCS Rich Card Carousels With Node.js

Benjamin Aronov — Fri, 12 Sep 2025 15:23:13 +0000

Introduction

Rich Communication Services (RCS) gives you the tools to build modern, interactive brand experiences right inside a user’s default messaging app. Among its most powerful features is the rich card carousel: a horizontally scrollable set of cards that can include videos, images, text, and tappable actions.

In this tutorial, you’ll learn how to send an RCS carousel using Node.js and the Vonage Messages API. You’ll combine video and image cards with actions to boost engagement.

>> TL;DR: View the full working code on GitHub

Use Case: Fashion Popup Announcement

Let’s say your brand is launching a limited-time fashion pop-up shop. You want to generate buzz and showcase key items. With an RCS carousel, you can package this all in one clean, interactive message.

Your RCS carousel will include media and suggested actions:

Card 1: Event Launch Video
- Video trailer for the popup
- 2 actions: “Save the Date” and “See Location”
Card 2: T-Shirts image:
- An image of the featured tee
- action: “See All Shirts”
Card 3: Hats image:
- An image of your hat collection
- action: “See All Hats”

What Is an RCS Carousel?

An RCS carousel is a set of swipeable rich cards, each with its own:

A title (max 200 characters)
A description (max 2000 characters)
Media: image or video
Up to four suggested replies or actions

The cards appear horizontally, allowing users to swipe through them.

Important notes:

All cards in a carousel must use the same type of suggestion.
Media files must be publicly accessible and under 100MB.
You can include between 2 and 10 cards.

Prerequisites

Before you start, you’ll need:

Node.js installed on your machine.
ngrok installed for exposing your local server to the internet.
A Vonage API account.
A registered RCS Business Messaging (RBM) Agent, see managed accounts below.
A phone with RCS capabilities for testing.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

How to Contact Your Vonage Account Manager

In order to send and receive RCS capabilities in your Vonage application, you will need to have a registered Rich Business Messaging (RBM) agent and a phone with RCS capabilities.

Currently, RCS Messaging through Vonage is only available for managed accounts. You will need to contact your account manager to request Developer Mode activation for your RBM agent. Developer Mode allows you to test RCS messaging to allow-listed numbers before completing the Agent Verification process and launching in production.

Please contact our sales team if you do not have a managed account.

Understand the difference between RCS and RBM.

How to Set Up Your Node.js Project

This guide assumes you're familiar with JavaScript and Node.js basics.

Initialize the Project

Create a new directory and initialize a Node.js project:

Install Required NPM Packages

Install the necessary node packages with Node Package Manager (NPM):

express: Creates the web server
dotenv: Loads your environment variables
@vonage/server-sdk: Sends messages through the Vonage Messages API

Create Your Project Files

Create the main application file and environment configuration file:

How to Configure Your Environment

In the .env file, add your Vonage credentials and configuration:

VONAGE_APPLICATION_ID: Your Vonage application ID.
VONAGE_API_SIGNATURE_SECRET= Your Vonage API Secret
VONAGE_PRIVATE_KEY: Your Vonage application’s private key file.
RCS_SENDER_ID: Your RBM SenderID (the Name of the Brand). The SenderID requires special formatting, such as not having any spaces. Check with your account manager if you’re unsure.
PORT: Port number for the Express server.

You will obtain your Vonage Application ID and private.key file below, in the “How to Create and Configure Vonage Application” section. Find your API Secret in the developer dashboard homepage.

How to Send an RCS Carousel

Now that your environment is set up, let’s write the code that actually sends your RCS rich card carousel.

In this step, you’ll create an Express server that sends a custom RCS message using the Vonage Messages API. The carousel will contain three swipeable product cards, each with media (video or image), a title and description, and actionable buttons your users can tap.

Load Dependencies and Initialize the Vonage Client

We’ll start by importing the necessary packages, loading your environment variables, and initializing the Vonage client. Add the following code to your index.js file to get things going:

Define an Express Endpoint to Send a RCS Carousel

A few small but important details are worth knowing before we send the carousel. All media files must be publicly accessible over HTTPS, ideally hosted on a CDN or cloud storage. We’re using GitHub-hosted assets for simplicity in this example, but in production, you’ll want faster, more reliable media hosting.

>> Keep individual media files under 100MB to meet RCS constraints.

Each card includes one or more action buttons using postbackData, openUrlAction, or createCalendarEventAction. The postbackData value is a short string (50 characters max) that your server can use to track what users tap. You can also link directly to maps or pre-filled calendar events for added interactivity, making the carousel feel more like a mini-app than just a message.

How to Receive RCS Suggested Actions via Webhooks

Sending off a carousel is great! But wouldn’t it be nice to know if your user interacted with your carousel? With Vonage webhooks, you can do just that.

Create the following endpoint, which will handle inbound RCS requests from our Vonage application. This code:

Validates that the request is coming from Vonage using a JWT signature
Looks for the button property since you’re expecting an action instead of a reply property, and stores the payload in userAction
Logs the userAction to our Node server to see what the user selected

How to Define Your Express Server

At the bottom of your index.js, add this code to build your Express server.

And finally run your server from the command line:

>> See the full index.js file.

How to Expose Your Server with ngrok

To receive webhooks from Vonage, your local server must be accessible over the internet. Use ngrok to expose your server by running the following command in a separate tab from your Express sever:

Note the HTTPS URL provided by ngrok (e.g., https://your-ngrok-subdomain.ngrok.io).

You can read more about testing with ngrok in our developer portal tools.

How to Create and Configure Your Vonage Application

Now that your Node App is ready, you’ll also need to create and set up your Vonage Application. First, create your app in the Vonage Dashboard. Give the app a name and turn on the Messages capability.

Vonage dashboard showing the creation of a new application configured for RCS messaging.

In your Vonage application settings:

Set the Inbound URL to https://YOUR_NGROK_URL/inbound_rcs.
Set the Status URL to https://example.com/rcs_status. ** Message statuses will be covered in a future article.
Generate a public and private key by clicking the button. Ensure to move your private.key file to the project root directory (rcs-carousel-node).
Save the changes.

Then link your RCS Agent by clicking the “Link external accounts” tab:

Dashboard view showing the Vonage-Node-RCS application linked to the Vonage RoR RCS external account, with voice and message capabilities enabled.

How to Test Your Node Application

Use this curl command to trigger your endpoint (replace placeholders):

On the recipient's phone, the Rich Card Carousel will appear and they can select an action!

Final Notes

You’ve now built an interactive RCS product carousel with Node.js and the Vonage Messages API. This is a great way to showcase products, promote events, or offer dynamic choices in a single message.

Want to go further?

Respond to taps and selections via postbackData
Load product cards dynamically from an API
Add location-based filters or categories

Come show off what you’re building in theVonage Community Slack or tag us on X (formerly Twitter). We’d love to see your carousels in the wild!

Send and Receive RCS Suggested Replies with ASP.NET Core and Vonage

Benjamin Aronov — Fri, 15 Aug 2025 14:37:43 +0000

Rich Communication Services (RCS) represents the evolution of SMS: bringing branded, interactive, and app-like experiences into your native messaging app. With Vonage’s Messages API, you can deliver RCS messages with Suggested Replies: clickable options that improve engagement and streamline response handling.

In this tutorial, you’ll build an ASP.NET Core Web API from scratch that uses Vonage’s .NET SDK to send and receive RCS suggested reply messages. You’ll also learn how to configure the application, set up secure webhooks, and test the end-to-end flow using ngrok and your RCS-enabled phone.

TL;DR: View the full working code on GitHub

RCS message sent using the Vonage Messages API, prompting the user to select a preferred appointment time with suggested reply buttons.

Prerequisites

Before we get started, make sure you have:

.NET 9.0 SDK
Visual Studio 2022+ or VS Code
ngrok for local tunneling
A Vonage API account and a registered RBM agent. (See below)
An RCS-capable device for testing

Vonage API Account

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

How to Contact Your Vonage Account Manager

In order to send and receive RCS capabilities in your Vonage application, you will need to have a registered Rich Business Messaging (RBM) agent and a phone with RCS capabilities.

Please contact our sales team if you do not have a managed account.

Understand the difference between RCS and RBM.

Create the ASP.NET Core Project

We’ll start by generating a minimal ASP.NET Core Web API using the built-in CLI template.

dotnet new web -n RcsSuggestedReplies
cd RcsSuggestedReplies

Add Required NuGet Packages

Install the necessary dependencies:

dotnet add package Vonage
dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson
dotnet add package Microsoft.AspNetCore.OpenApi
dotnet add package Swashbuckle.AspNetCore

Vonage: To use the Messages API
Newtonsoft.Json: JSON handling for API requests and responses
OpenApi: OpenAPI specification support for your endpoints
Swashbuckle: Swagger UI for testing your API in the browser

Create a Configuration Class

Create CustomConfiguration.cs in the root of your project and add:

namespace RcsSuggestedReplies;

public record CustomConfiguration
{
    public string SenderId { get; init; } = string.Empty;
}

This class uses C#'s record type to define a simple immutable configuration object. It allows you to bind strongly typed settings from appsettings.json, making your code cleaner and less error-prone than using raw strings everywhere.

Configure Application Settings

Create or update your appsettings.json file:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "Vonage": {
    "Application.Id": "YOUR_APPLICATION_ID",
    "Application.Key": "-----BEGIN PRIVATE KEY YOUR_PRIVATE_KEY"
  },
  "CustomConfiguration": {
    "SenderId": "YOUR_SENDER_ID"
  }
}

Your appsettings.json stores runtime configuration such as credentials, sender ID, and log levels. Keeping sensitive settings like these in a config file allows for the separation of code and environment-specific values.

Update these variables once you have completed the “Create and Configure Your Vonage Application” section below.

Create the Send Message Endpoint

Create a file named SendRcsMessageEndpoint.cs in the root of your project. This file defines the API logic for sending RCS messages. The SendRcsRequest record models the incoming JSON body, while the SendRcsMessageEndpoint handles the logic for sending the message via the Vonage Messages API. We separate the logic that builds the message payload into its own method, BuildRcsCustomRequest. This improves readability and makes the function easier to test or extend. For example, you could customize the suggestions dynamically in the future.

For now, this endpoint handles sending RCS messages with 3 hardcoded suggested replies for appointment scheduling.

using Microsoft.Extensions.Options;
using Vonage.Messages;
using Vonage.Messages.Rcs;

namespace RcsSuggestedReplies;

public record SendRcsRequest(string To);

public class SendRcsMessageEndpoint(IMessagesClient messagesClient, IOptions<CustomConfiguration> customConfiguration)
{
    public async Task<IResult> SendRcsMessage(SendRcsRequest request)
    {
        try
        {
            var response = await messagesClient.SendAsync(BuildRcsCustomRequest(request));
            Console.WriteLine($"Message sent: {response.MessageUuid}");
            return Results.Ok();
        }
        catch (Exception exception)
        {
            Console.WriteLine($"Error sending message: {exception.Message}");
            return Results.Problem(exception.Message);
        }
    }

    private RcsCustomRequest BuildRcsCustomRequest(SendRcsRequest sendRcsRequest)
    {
        return new RcsCustomRequest
        {
            From = customConfiguration.Value.SenderId,
            To = sendRcsRequest.To,
            Custom = new
            {
                ContentMessage = new
                {
                    Text = "What time works best for your appointment?",
                    Suggestions =
                        new[]
                        {
                            new
                            {
                                Reply = new
                                {
                                    Text = "9am",
                                    PostbackData = "time_9am"
                                }
                            },
                            new
                            {
                                Reply = new
                                {
                                    Text = "11am",
                                    PostbackData = "time_11am"
                                }
                            },
                            new
                            {
                                Reply = new
                                {
                                    Text = "2pm",
                                    PostbackData = "time_2pm"
                                }
                            }
                        }
                }
            }
        };
    }
}

Create the Receive Message Endpoint

Create another file called ReceiveRcsInboundEndpoint.cs in the root of your project.This class handles inbound webhook messages from Vonage. It verifies the request's authenticity using JWT validation and sends a confirmation reply when the user selects one of the suggested responses. JWT signature verification ensures you're not processing spoofed or malicious messages, and that incoming requests are indeed coming from Vonage.After parsing the user's reply, we send a friendly confirmation message. Keeping this logic in a separate method keeps the ReceiveRcsInbound function focused and easier to read.

using Microsoft.Extensions.Options;
using Vonage;
using Vonage.Messages;
using Vonage.Messages.Rcs;
using Vonage.Messages.Webhooks;
using Vonage.Request;

namespace RcsSuggestedReplies;

public class ReceiveRcsInboundEndpoint(IMessagesClient messagesClient, IOptions<CustomConfiguration> customConfiguration, Credentials credentials)
{
    public async Task<IResult> ReceiveRcsInbound(HttpContext httpContext, MessageWebhookResponse messageWebhookResponse)
    {
        var token = httpContext.Request.Headers.Authorization.ToString().Split(' ')[1];
        if (!Jwt.VerifySignature(token, credentials.ApplicationKey))
        {
            return Results.Unauthorized();
        }

        if (messageWebhookResponse is {Channel: "rcs", MessageType: "reply"})
        {
            var userSelection = messageWebhookResponse.Reply?.ToString();
            Console.WriteLine($"User {messageWebhookResponse.From} select: {userSelection}");
            try
            {
                var response =
                    await messagesClient.SendAsync(BuildConfirmationMessage(messageWebhookResponse, userSelection));
                Console.WriteLine($"Confirmation sent: {response.MessageUuid}");
            }
            catch (Exception exception)
            {
                Console.WriteLine($"Error sending confirmation: {exception.Message}");
            }
        }

        return Results.Ok();
    }

    RcsTextRequest BuildConfirmationMessage(MessageWebhookResponse messageWebhookResponse1, string? s) =>
        new()
        {
            To = messageWebhookResponse1.From,
            From = customConfiguration.Value.SenderId,
            Text = $"{s} is a great choice!",
        };
}

This endpoint handles incoming RCS messages, verifies their authenticity, and sends confirmation responses.

Configure the Program.cs File

Update your Program.cs file to the following.

Here, we configure dependency injection, which is a core part of ASP.NET Core's design. We register the Vonage client and our custom endpoints so they can be injected where needed, making the code more modular.

using RcsSuggestedReplies;
using Vonage.Extensions;
using Vonage.Messages.Webhooks;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// Register Vonage and application services
builder.Services.AddVonageClientScoped(builder.Configuration);
builder.Services.Configure<CustomConfiguration>(builder.Configuration.GetSection("CustomConfiguration"));
builder.Services.AddScoped<SendRcsMessageEndpoint>();
builder.Services.AddScoped<ReceiveRcsInboundEndpoint>();

var app = builder.Build();

// Configure the HTTP request pipeline
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.MapControllers();

// Define our API endpoints
app.MapPost("send-rcs",
    async (SendRcsMessageEndpoint endpoint, SendRcsRequest request) => await endpoint.SendRcsMessage(request));
app.MapPost("inbound-rcs",
    async (ReceiveRcsInboundEndpoint endpoint, HttpContext context, MessageWebhookResponse inbound) =>
        await endpoint.ReceiveRcsInbound(context, inbound));

app.Run();

How to Expose Your Server with ngrok

To receive webhooks from Vonage, your local server must be accessible over the internet. Use ngrok to expose your ASP.NET Core server, which will run on port 5000:

ngrok http 5000

Note the HTTPS URL provided by ngrok (e.g., https://your-ngrok-subdomain.ngrok.io).

You can read more about testing with ngrok in our developer portal tools.

Your application might be running on a different port. You can check in launchSettings.json to confirm.

Create and Configure Your Vonage Application

Now that your ASP.NET App is ready, you’ll also need to create and set up your Vonage Application. First, create your app in the Vonage Dashboard. Give the app a name and turn on the Messages capability.

To create an application, go to the Create an Application page on the Vonage Dashboard, and define a Name for your Application.
If needed, click on "generate public and private key". A private key (.key file) will be generated. Download and store it securely. This key is needed for authentication when making API requests. Note: Private keys will not work unless the application is saved.
Choose the capabilities you need (e.g., Voice, Messages, RTC, etc.) and provide the required webhooks (e.g., event URLs, answer URLs, or inbound message URLs). These will be described in the tutorial.
To save and deploy, click "Generate new application" to finalize the setup. Your application is now ready to use with Vonage APIs.

In your Vonage application settings:

Set the Inbound URL to https://YOUR_NGROK_URL/inbound-rcs.
Set the Status URL to https://example.com/rcs-status. \ ** Message statuses will be covered in a future article.
Generate a public and private key by clicking the button. Ensure to move your private.key file to the project root directory (RcsSuggestedReplies).
Save the changes.

Then link your RCS Agent by clicking the “Link external accounts” tab:

Dashboard view showing the Vonage-ASP-NET-RCS application linked to the Vonage RoR RCS external account, with voice and message capabilities enabled.

Update Your Vonage Credentials

Replace the placeholder values in appsettings.json with your actual Vonage credentials:

"Vonage": {
  "Application.Id": "YOUR_ACTUAL_APPLICATION_ID",
  "Application.Key": "YOUR_PRIVATE_KEY"
},
"CustomConfiguration": {
  "SenderId": "YOUR_ACTUAL_SENDER_ID"
}

Run Your Application and Test

Start your application:

dotnet run

Your RCS messaging application is now running! You can use a tool like Postman or cURL to send a POST request to your /send-rcs endpoint with the recipient's phone number:

curl -X POST https://**YOUR_NGROK_URL***/send-rcs \
  -H "Content-Type: application/json" \
  -d '{
    "to": "**YOUR_RCS_TEST_NUMBER"
}'

On the recipient's RCS-enabled device, the message with suggested replies should appear.

When the recipient selects a suggested reply, your /inbound-rcs endpoint will handle the response, and a confirmation message will be sent back.

RCS conversation where a user selects a time from suggested replies and receives a confirmation message, powered by the Vonage Messages API.

Conclusion

You’ve now built a working ASP.NET Core application that can send and receive RCS Suggested Replies using the Vonage Messages API. This simple UI improvement, letting users tap a response instead of typing, can dramatically enhance how users interact with your app.

With webhook verification, structured response handling, and confirmation messages, this template gives you a solid foundation to expand on. You try adding RCS Cards, storing replies in a database, or dynamically generating suggested replies from user history

If you run into any questions or have ideas for what you'd like to build next, come join the conversation in our Vonage Community Slack or reach out onX (formerly Twitter). We’d love to see what you build!

How to Send and Receive RCS Suggested Replies with Node.js

Benjamin Aronov — Fri, 18 Jul 2025 13:59:35 +0000

Rich Communication Services (RCS) is transforming the way businesses engage with customers. As the next evolution of SMS, RCS offers a richer, more interactive experience with features like images, videos, file sharing, and suggested replies, natively inside a user's default messaging app. Check out all the cool RCS capabilities.

With RCS support rolling out around the world, for both Android and iOS, now is the perfect time to start exploring this technology. In this tutorial, you'll learn how to send RCS suggested replies using the Vonage Messages API in a Node.js application, helping you create more dynamic and engaging conversations with your users.

TL;DR: Find the complete working code on GitHub.

What Are RCS Suggested Replies?

RCS Suggested Replies enhance user interactions by providing predefined response options within messages. When a user selects a suggested reply, your application receives a structured response, allowing for streamlined and interactive conversations.

Prerequisites

Before you begin, ensure you have the following:

Node.js installed on your machine.
ngrok installed for exposing your local server to the internet.
A Vonage API account
A registered RCS Business Messaging (RBM) Agent.
A phone with RCS capabilities for testing.

How to Contact Your Vonage Account Manager

In order to send and receive RCS capabilities in your Vonage application, you will need to have a registered Rich Business Messaging (RBM) agent and a phone with RCS capabilities.

Please contact our sales team if you do not have a managed account.

>> Understand the difference between RCS and RBM.

How to Set Up Your Node.js Project

This tutorial will assume you have a working understanding of JavaScript and Node, sticking to the commands required without too much deeper explanation.

Initialize the Project

Create a new directory and initialize a Node.js project:

mkdir rcs-suggested-replies-node
cd rcs-suggested-replies-node
npm init -y

Install Project Dependencies

Install the necessary node packages with Node Package Manager:

npm install express dotenv @vonage/server-sdk

express: Creates the web server.
dotenv: Loads environment variables securely.
@vonage/server-sdk: The Vonage Node SDK for interacting with the Messages API

Create Your Project Files

Create the main application file and environment configuration file:

touch index.js .env

How to Configure Environment Variables

In the .env file, add your Vonage credentials and configuration:

VONAGE_APPLICATION_ID=your_application_id
VONAGE_PRIVATE_KEY_PATH=./private.key
RCS_SENDER_ID=your_rbm_agent_id
PORT=3000
VONAGE_API_SIGNATURE_SECRET=your_api_secret

VONAGE_APPLICATION_ID: Your Vonage application ID.
VONAGE_PRIVATE_KEY: Your private key file.
RCS_SENDER_ID: Your RBM SenderID (the Name of the Brand). The SenderID requires special formatting, such as not having any spaces. Check with your account manager if you’re unsure.
PORT: Port number for the Express server.
VONAGE_API_SIGNATURE_SECRET=your_api_secret \

You will obtain your Vonage Application ID and private.key file below, in the “How to Create and Configure Your Vonage Application” section.

How to Send RCS Suggested Replies

In index.js, set up the Express server and implement the functionality to send RCS messages with suggested replies.

Load Dependencies and Initialize the Vonage Client

const express = require('express');
const fs = require('fs');
const dotenv = require('dotenv');
const { Vonage } = require('@vonage/server-sdk');
const { verifySignature } = require('@vonage/jwt');

dotenv.config();

const app = express();
app.use(express.json());

const PORT = process.env.PORT || 3000;

const VONAGE_API_SIGNATURE_SECRET = process.env.VONAGE_API_SIGNATURE_SECRET;

const privateKey = fs.readFileSync(process.env.VONAGE_PRIVATE_KEY);

const vonage = new Vonage({
  applicationId: process.env.VONAGE_APPLICATION_ID,
  privateKey: privateKey
});

Define an Express Endpoint to Send Suggested Replies

app.post('/send-rcs', async (req, res) => {
  const toNumber = req.body.to;

  const message = {
    to: toNumber,
    from: process.env.RCS_SENDER_ID,
    channel: 'rcs',
    message_type: 'custom',
    custom: {
      contentMessage: {
        text: "What time works best for your appointment?",
        suggestions: [
          {
            reply: {
              text: "9am",
              postbackData: "time_9am"
            }
          },
          {
            reply: {
              text: "11am",
              postbackData: "time_11am"
            }
          },
          {
            reply: {
              text: "2pm",
              postbackData: "time_2pm"
            }
          }
        ]
      }
    }
  };

  try {
    const response = await vonage.messages.send(message);
    console.log('Message sent: ', response);
    res.status(200).json({ message: 'RCS message sent successfully.' });
  } catch (error) {
    console.error('Error sending message:', error);
    res.status(500).json({ error: 'Failed to send RCS message.' });
  }
});

How to Receive RCS Replies via Webhooks

Set up an endpoint to handle incoming RCS replies.

app.post('/inbound_rcs', async (req, res) => {
  const token = request.headers.authorization.split(' ')[1];

  if (!verifySignature(token, VONAGE_API_SIGNATURE_SECRET)) {
    res.status(401).end();
    return;
  }

  const inboundMessage = req.body;

  if (inboundMessage.channel === 'rcs' && inboundMessage.message_type === 'reply') {
    const userSelection = inboundMessage.reply.title;
    const userNumber = inboundMessage.from;

    console.log(`User ${userNumber} selected: ${userSelection}`);

    // Optionally, send a confirmation message back to the user
    const confirmationMessage = {
      to: userNumber,
      from: process.env.RCS_SENDER_ID,
      channel: 'rcs',
      message_type: 'text',
      text: `${userSelection} is a great choice!`
    };

    try {
      const response = await vonage.messages.send(confirmationMessage);
      console.log('Confirmation sent:', response);
    } catch (error) {
        console.error('Error sending confirmation:', error);
    };
  }

  res.status(200).end();
});

Notice that all you do with the inbound message is log it to the console. Here is where you might want to save the message to your database or create some custom logic. For this example, you simply confirm to the user you've received their reply.

Lastly, add your Express Server:

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

>> See the full index.js file.

How to Expose Your Server with ngrok

To receive webhooks from Vonage, your local server must be accessible over the internet. Use ngrok to expose your server:

ngrok http 3000

Note the HTTPS URL provided by ngrok (e.g., https://your-ngrok-subdomain.ngrok.io).

You can read more about testing with ngrok in our developer portal tools.

How to Create and Configure Your Vonage Application

In your Vonage application settings:

Set the Inbound URL to https://YOUR_NGROK_URL/inbound_rcs.
Set the Status URL to https://example.com/rcs_status.** Message statuses will be covered in a future article.
Generate a public and private key by clicking the button. Ensure to move your private.key file to the project root directory (rcs-suggested-replies-node).
Save the changes.

Then link your RCS Agent by clicking the “Link external accounts” tab:

How to Test Your Node RCS Application

Start your Express server:

node index.js

Use a tool like Postman or cURL to send a POST request to your /send-rcs endpoint with the recipient's phone number:

curl -X POST https://**YOUR_NGROK_URL***/send-rcs \
  -H "Content-Type: application/json" \
  -d '{
    "to": "**YOUR_RCS_TEST_NUMBER"
}'

On the recipient's RCS-enabled device, the message with suggested replies should appear.
When the recipient selects a suggested reply, your /inbound_rcs endpoint will handle the response, and a confirmation message will be sent back.

Conclusion

Great job! You've successfully implemented sending and receiving RCS Suggested Replies using Node.js and the Vonage Messages API. But RCS offers so much more! You can try sending high-resolution images and videos, or RCS-specific Rich Cards. The Messages API also provides message statuses, which help us understand what’s happening with our RCS messages. In a future blog post, I’ll show how to track message statuses with webhooks.

If you have any questions or suggestions for more Node or RCS content, join the conversation with us on the Vonage Community Slack or reach out on X, formerly known as Twitter. We’d love to hear what you build next!

Integrate Slack and SMS via Low-Code AI Studio

Benjamin Aronov — Thu, 07 Nov 2024 14:58:55 +0000

Introduction

Small and medium businesses often lack resources for full-fledged (and expensive) customer support solutions. However, with Vonage's AI Studio low-code platform, you can build a custom, cost-effective customer experience solution tailored to your needs.

This tutorial will show you how to integrate SMS and Slack to create a powerful customer support system. By connecting SMS to Slack and Slack to SMS, you can enable your team to respond to customer inquiries directly from Slack.

Using your existing staff, you can connect with customers over SMS, Voice (phone), or WhatsApp and respond directly from Slack. The best part? You're only charged for what you use! This powerful solution is particularly beneficial for startups already using Slack for team communications.

Learn how to connect SMS and Slack for a live customer support failover. If your customers don't receive a satisfactory answer from the virtual agent, the conversation will seamlessly transfer to Slack, where any team member can assist!

TL;DR: Find the refactored server code on Github to follow along with the AI Studio and Slack setup without worrying about JavaScript programming.

Integrating SMS with Slack for Customer Support Overview

Initially, I aimed for a flow similar to the famous Giphy slash command for this SMS to Slack integration. However, custom slash commands are not allowed in threads by Slack (Giphy is a special case). Using a slash command in a regular channel response doesn't associate the response with a specific conversation. With simultaneous conversations, this approach would create a mess! To keep conversations threaded, we implemented the following workaround:

A new message appears in the customer support channel with the conversation_id from a new SMS conversation.
A team member clicks a Slack Shortcut on the message, which tells our application to link that conversation to the current Slack thread.
The team member uses the /reply slash command followed by the session_id and their response.
Our application handles the reply, sends it to AI Studio, and adds it as a response in the thread.
Our application also handles customer responses and adds them to the correct thread.
The conversation continues until the agent uses the /close_ticket slash command, terminating the session in AI Studio and adding a "conversation resolved" response in the Slack thread.

By following this approach, you can seamlessly integrate SMS and Slack for customer support, allowing your team to manage conversations directly from Slack while maintaining proper threading and context.

Prerequisites

Vonage Virtual Number
Slack Account and permission to install apps in your workspace
Node

Vonage API Account

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Setup

How to Setup a Node Application with Express

Create a new directory for your project and navigate into it using your terminal.
Initialize a new Node.js project and install dependencies
Create Your Project Files
Open the project in your code editor of choice.

In the .gitignore, we’ll need to add a single line so git doesn’t accidentally share our .env credentials:

In our .env file we’ll need to add our secure values from both Slack and AI Studio. We’ll fill those out in the next steps. For now add:

In the server.js file, add the following boilerplate:

In our boilerplate, we do 4 main things:

Import our dependencies.
Express runs our server.
Axios allows us to make HTTP requests. HTTP requests allow us to pass information between Slack & AI Studio.
bodyParser helps us parse or clean up the data we get back from Slack.
Configure our app’s server, middleware, and env variables.
Create endpoints for each of our application's functionalities.
Start our server.

How to Expose Our Application Through localtunnel

Our application requires passing data several times between AI Studio and Slack. We’ll use localtunnel to expose our localhost and create publicly accessible tunnels. In your terminal run the following command:

npx localtunnel --port 3000

This will create a tunnel URL that should look something like this:

The url that starts with https and ends in loca.lt is your tunnel url. In the remainder of the article anytime that TUNNEL_URL is mentioned, this value should be used.

Open a second tab in your terminal for later.

How to Setup a Slack App

Log in to your Slack Workspace and open your applications.
Click on “Create a New App”. Select the “From Scratch” option.
Give your app a name and select the Workspace where you want to use it.
Click “Create App”.

Ta-da! You now have your first Slack App! There’s one last thing you’ll need to do. You’ll need to enable Incoming Webhooks. Once you’ve toggled incoming webhooks on, scroll to the bottom of the page and click “Add New Webhook to Workspace”. You’ll be asked to select the desired channel and click “allow”. This will redirect you to the Incoming Webhooks page of your app, except now if you scroll to the bottom you will see a Webhook URL for your desired channel.

Copy the URL and add it as the value for your SLACK_WEBHOOK_URL in your .env file. It should look something like this:

How to Create an Inbound SMS Chatbot

To create your agent, follow the instructions found in the AI Studio documentation here. There are three important options for our agent, select:

Type: SMS
Template: Start From Scratch
Event: Inbound

The flow of our agent will be relatively simple.

Upon the user messaging the agent, we’ll use a Collect Input node to ask what they need help with. The answer will be stored in a parameter called inquiry.
Then we’ll use a conditional node to check if inquiry is equal to “escalate”.
If it is, we’ll then send the user a message saying “Please hold while we connect you to a live agent”. If the inquiry is something else, we’ll mimic all other possible flows by simply sending a message “Thanks for using our service!” (Send Thank You node).
The Please Hold node will connect to a Live Agent Routing Node.
Finally, the Live Agent Routing Node and Send Thank You Node will connect to an End Conversation node.

How to Setup a Live Agent Routing Node

In the Live Agent Routing Node, we need to do 3 things:

Add your 'TUNNEL_URL/start' in the Start Connection EP field
Add your 'TUNNEL_URL/inbound' in the Inbound Transfer EP field
Select inquiry in the Transfer Parameters

And hit “Save and Exit”.

Next, add your AI Studio API Key to your .env file. You can find the X-Vgai-Key on the top right of your AI Studio canvas. Click on the "user" icon, and then "Generate API Key".

Copy the X-Vgai-Key and now add it as the value for your AI_STUDIO_KEY in your .env file. It should look something like this:

Lastly, you’ll need to assign your Vonage Number to the agent. Follow the publishing instructions from the documentation.

How to Initiate a Slack Conversation Using Incoming Webhooks

The first action we need to create is connecting AI Studio to Slack. We will use the Live Agent’s Start Connection Endpoint and Slack’s Incoming Webhooks. We’ve already configured these in the setup but now we need to add the logic to actually connect them.

Our agent’s Start Connection Endpoint is configured to send a request to our /start endpoint. There we will send 2 pieces of information to Slack: the sessionId and the transcription of our conversation thus far. We’ll package this up in the data object according to what Slack is expecting with a little formatting. We’ll use the axios library to send all our POST requests.

This is how our /start endpoint now looks:

You’ll notice that we call the function handleTranscription. This function formats our raw transcription into something nice for Slack. You can add this at the bottom of our file.

How to Test Your SMS to Slack Connection

You can now test that your agent is connected to your Slack channel! In the second terminal tab that you opened before, run your application:

node server.js

Did your transcription appear in Slack? How cool!

Because we haven’t implemented a way to end conversations in AI Studio yet, each time you test you’ll need to manually end the conversation. You can do so by sending a POST request to the Stop Connection EP with a tool like Postman. You can find your active sessions under the Reports tab.

Additionally, each time you want to test a new change in your node application you’ll need to restart the server.

How to Create a Slack Message Shortcut

Now that we have initiated our conversation in Slack, you might think the next step would be to let our Slack teammates respond right? Well, we need to solve the problem first of somehow linking our Slack thread to our AI Studio conversation so we know how to organize our messages back and forth!

We’ll do this by creating a Slack Message Shortcut. This message shortcut will require our agent to “open a ticket” by just clicking a button on the new conversation. This will send a request to our application where we’ll store the conversation thread information in a new object in relation to the conversation_id.

How to Enable Slack App Interactivity

In order to create shortcuts, you’ll need to enable interactivity on your Slack app. You can see how to do so below. For the Request URL you’ll add your TUNNEL_URL followed by /slack/start. This will be the endpoint in our application where Slack will send a request whenever the shortcut is triggered.

Next, click on “Create New Shortcut” and fill it in:

Name: Start a ticket

Short Description: Creates a conversation for a customer inquiry

Callback ID: begin_response

How to Link Sessions with Slack Threads

Now we’ll update our application to use the information we receive back from Slack and link it to our AI Studio sessions. First, we’ll create a global object called SESSIONS. You can add this just above our endpoints:

const SESSIONS = {};

Inside of our endpoints we’re going to do 4 things:

Handle the response we receive from Slack and extract thread_ts (timestamp) and session_id
Create a new entry in SESSIONS for the current session/thread
Prepare the data to be sent to Slack, which includes formatting our initialization message for our Slack thread
Sending our request to Slack to post the initialization message in the correct thread

In our endpoint, we rely on two new functions. You can add these at the bottom of your file with the other functions. The first called extractSessionId which searches our payload from Slack for the current sessionId:

The second function newSession, creates a new entry in our global SESSIONS variable.

How to Create a Slack Slash Command for Message Replies

Now that our agent has initialized the conversation in our application, we want to let them actually respond to our customers. Let’s do that by creating our first slash command.

In our Slack application dashboard open the Slash Commands tab. Then click “Create New Command”.

Create the following command:

Command: reply Request URL: TUNNEL_URL/slack/message Short Description: Reply to incoming inquiries Usage Hint: [session_id]

And click “Save”.

Now we need to update our '/slack/message' endpoint to handle the data being sent from Slack. We need to do two things:

Grab the message and add it as a comment in the correct thread in Slack, along with some formatting
Grab the message and send it to the correct session in AI Studio

We can do that with the following code:

You’ll notice that we rely on one last function called parseMessage to clean up our data from Slack. You can add it at the end of our file:

You can now test sending message replies from Slack! How cool is it to receive it on the SMS side?!

How to Send SMS Replies to Slack

So we now almost have our full scenario working. But we’re missing one thing! We need to allow our users to send continuous messages into Slack to reply to our human agents. We can do this by updating our /inbound endpoint.

Here, we handle the data from AI Studio and pull out the message and session_id. Using the session_id we can lookup our thread_ts. Once we have the thread_ts, we can send off our message to the correct thread with a POST request to Slack.

You can update your code to the following:

How to Create a Slack Slash Command to End a Conversation

You might think, “That’s it! I’m done!”. Well almost! Our Live Agent Node doesn’t know how long a conversation back and forth between AI Studio and some other interface might last. For that we must let AI Studio know when to end the conversation and exit the Live Agent Routing node.

We’re going to create another slash command, similar to how we created /reply. This time we will create a command for /close_ticket. Close ticket will again accept the session_id to know which session to end.

Create the following command:

Command: /close_ticket Request URL: TUNNEL_URL/slack/end Short Description: Customer issue has been resolved Usage Hint: [session_id]

And click “Save”.

Inside of our /slack/end endpoint we need to handle the request from Slack. We only need to do three things:

Grab the session_id by using our parseMessage function again
Send a request to the Stop Connection endpoint in AI Studio to tell it to stop the conversation for the correct session_id
Update the human agent in Slack that the conversation has been ended by posting a message in the correct thread

To do so, update your /slack/end code to look like this:

Conclusion

And that’s a wrap! You've successfully implemented a seamless SMS to Slack and Slack to SMS integration for customer support using Vonage's AI Studio low-code platform. Restart your Node.js server by running node server.js in your terminal, and test the complete flow by sending messages back and forth between your phone's SMS and Slack. Isn't it amazing?

To further enhance this application, consider leveraging Slack's robust Web API, which enables interactivity based on emoji reactions. Additionally, you could incorporate AI Studio's WhatsApp agents, providing customers with an additional communication channel.

Are you using other low-code or no-code solutions for customer engagement? Join the Vonage Developer Community Slack or follow us on X, formerly known as Twitter to share your exciting projects and insights!

Integrating SMS and Slack for customer support is just one example of how low-code platforms like AI Studio can streamline business processes and improve customer experiences. Explore more possibilities and stay updated with the latest developments in the low-code and no-code spaces.

Additional Resources

How to Build an Intent Classification Hierarchy

Benjamin Aronov — Thu, 04 Apr 2024 12:43:30 +0000

Conversational AI agents are a great way to save your company its most important resource: employee time! Agents are like interactive FAQs except much more flexible. When built correctly, they can drastically help improve your customer experience. But the question is, how do you build them correctly?

Thankfully, the team at AI Studio has done the hard work for you! We’ve been able to improve performance on large AI agents (50+ Intents) considerably. These techniques have resulted in some agents seeing a 55% increase in successful calls and an 83% reduction in requests for human agents.

This post will cover how to build a hierarchy in Intent Classification to improve your agents’ performance in routing users to the correct intent. Topics will include general NLU best practices, examples of building a hierarchical classification, and tips on designing your Conversational AI agent in AI Studio.

NLU Best Practices

What is NLU? Natural Language Understanding, or NLU, is the process that allows a computer to understand the intention of a piece of text. NLU is how a computer understands what a user means when they speak with the computer. The software does this through Intent Classification and Entity Extraction.

Intent Overlap & Ambiguity

Intent Classification seems pretty straightforward, right? The Agent just breaks down the user input and maps it to your defined intents. But in practice, it is very easy to confuse the model.

Consider the scenario of an agent designed for a financial institution such as a bank. Within this context, customers may initiate various interactions related to loans, such as making a Loan Request, checking Loan Status, or seeking general Loan Information.

The challenge arises when the terms like "loan" or "mortgage" are employed in diverse contexts, such as in phrases like "talk with mortgage representative" or "get mortgage offer." This widespread use of the same keywords within a single classification node can potentially result in misclassification by the model.

To mitigate this issue, we propose implementing a hierarchical structure with two layers, essentially comprising two classification nodes. The first layer would focus on classifying the core concept, such as "loan" or "mortgage," while the second layer would specialize in discerning the specific action or intent associated with the user's query (request, status, representative, etc). This hierarchical approach aims to enhance the model's precision and reduce the likelihood of misclassifying similar but contextually distinct intents.

Training Set Consistency

Additionally, because the training sets that make up each intent will have very similar expressions we need to be extremely consistent. Adding ambiguous words in your training sets can cause unexpected behavior if applied inconsistently.

For instance imagine your (Loan) Request intent contains the expression, “I want to ask for a loan”. Now a user asks your agent, “I want to ask for a loan status”, which should route them to (Loan) Status. Unless your training set for Status includes an expression with the phrase, “I want to” and “loan”, there is a very high probability that it will route incorrectly to Request. To solve this problem, your training data needs to be extremely consistent with ambiguous filler/supporting words. So either add it everywhere or remove it everywhere. Often it’s easier to omit.

Training Set Case Study: Sales vs. Customer Support

Now imagine that we wanted to add two new intents to our Bank agent: Call Back and Sales. Call Back is for users wanting a customer support representative to call them back and Sales is for someone from the Sales department to call them.

We expect all the following to be classified as “sales”:

I want to speak with a sales representative
want to speak with a sales representative
with a sales representative
sales representative

However, as we see in the diagram, the first two user inputs that have “want to speak with” end up being classified as “call back”. That’s because the words “speak with” are more similar to call back than sales.

The solution is to add training data to our “sales” intent that contains “want to speak with”. It should be in the same proportion as the training data for similar training data in the “call back” training set.

In a more complicated agent, these two intents may look very similar compared to other intents. We’ll see shortly how hierarchical classification will help our agent get to the point where it can make this more granular distinction.

What is Hierarchical Classification?

Sanitizing our Intents to avoid Intent Overlap and ensuring our Training Sets are consistent are a good start to improving Classification but once we start to have agents with lots of intents, it won’t be enough as the world is full of inevitable overlap. And those pesky users never behave as we want them to!

Hierarchical Classification helps with these large-scale agents as it creates levels of classification to only focus the classification on one variable or topic at a time. By classifying in stages, the agent is most effective by categorizing intents into groups by their biggest differentiators. Grouping by greatest differentiation helps to eliminate overlap and ambiguity.

How to Group Intents in Hierarchical Classification

Breaking down our classification into stages may seem straightforward, but quickly we see that there are different ways to group intents. We can either group them by their nouns or their verbs.

Nouns are the items in your agent that a user may inquire about. Think about these as the direct objects of their request. Most often these are the products or services that your business offers. Examples of nouns would be “late check-out”, “birthday package”, and “1:1 consultation”.

Verbs on the other hand are the the action someone wants to take on the noun. Consider the differences between the customer requests of 'BOOK a reservation', 'CANCEL a reservation', and 'CHANGE a reservation'.

Case Study: Grouping by Noun vs. Verbs

Imagine that we expand our Bank scenario. Instead of just offering Loans, we also want to start offering Insurance. For Insurance, we also give the user the option to Request Insurance, Check on Insurance Status, and General Insurance Information. Our classifier now needs to compare the user input across lots of training data, which inherently will begin to overlap.

This is exactly the scenario where hierarchy will improve our agent's performance. The first step is to group our topics. In this example, we have a few ways we can group the topics. We could either group them by product or by services.

This diagram illustrates how we might group by verbs:

While the groups make logical sense and we might pass the initial classifier with high results, what will happen in the second stage of classification? As we saw earlier, the classifier will have issues with the second round as high ambiguity is likely when comparing user input-looking things like Loan Instruction and Insurance Instruction. In these instances, there will be high overlap in the Training Sets and we’ll need to be very meticulous to keep the data consistent.

Now, let’s try to see what happens when we group the Intents by nouns:

What we see here is that not only do we remove a layer of complexity in immediately differentiating between Support and Sales, but more importantly we create groupings in the 2nd round that are much easier to classify. In each group of Loans and Insurance, each Intent can be stripped down to have very little overlap as we did earlier.

How to Create Hierarchical Classification

Now that you understand the theory, let’s jump in with a practical guide.

Step 1: Gather or Create an Idealized Training Set

If you have real-world data, that’s awesome you’re ahead of the game! Jump to number step 2, you can focus on the core training data and leave out any outliers for now.

Otherwise, imagine that your users speak without using filler words or unnecessary extra words. Now write out all the user expressions you can think of. This is your idealized training set.

Imagine all the possible synonyms for your products/offerings.
- Example: room/reservation/booking/stay

Step 2: Organize your Idealized Data Into Broad Groups

Just as we organized the Bank topics into broad groups around nouns, you too should group your topics into broad Noun/Noun Phrase categories. At this point, you can start to identify the supporting verbs/verbs.

In the real world users behave kind of like cavemen. Very often they reply with single words, much more often nouns than verbs. Grouping around nouns will lead to much higher performance.

Where is the greatest potential for high ambiguity? For the highly ambiguous cases, add training data to standardize and create uniform phrases across the different groups. Just as you saw with the example of Sales vs Call Back Intents above, normalize the training data for groups with high ambiguity.

Step 3: Handle the Outliers

After you’ve solved most use cases, you may find that you still have some intents that don’t fit in your broad-scope topics. Where should you account for these?

You should add these intents at the point where they have the greatest ability to be negated by your model. Consider you have an agent for a Nutritionist and one of your intents is to Healthy Foods. However, a user asks, “Can I order a pizza?”. The model will most likely push the user to the “Healthy Foods” intent, even though a pizza shouldn’t go there. See the diagram:

Our solution is to create a new “negative” intent to capture the default behavior and route it accordingly. So we create an “Unhealthy Foods” intent that will capture these “negative” cases and direct it to the right flow. Our updated classification:

Design Considerations in AI Studio

Using Subflows in AI Studio

AI Studio makes it easy to get started quickly and start building out agents with drag-and-drop nodes. However, as your agent starts to scale, it becomes very difficult to keep track of dozens or hundreds of nodes. Not only will agent organization become unmanageable but the Studio will start to become slow in the browser window, loading a large number of nodes.

It’s best to get ahead of these issues by planning out your agent ahead of time and using the Subflow feature. For best practices, each intent should have its own subflow. Each of these subflows will join at a Topic Group Level. Each of these Groups will then flow up to a main level. Creating a Hierarchical Classification before you start working makes organizing your subflows a breeze and helps prevent creating future technical debt.

Repeating Intents Across Multiple Flows

After you’ve created the first version of your agent, you might find that your hierarchy has “leakage”. A small number of users may accidentally end up in the wrong flow. Instead of breaking your head to re-engineer the perfect hierarchy model, just “Go with the Flow!”.

For example, consider this example where a hotel had a premium restaurant package called the “Eagles Nest”. Users will ask for “premium offering for the Hotel” or use other terminology because they don’t know it’s called “Eagles Nest”. There was a top-level classifier for the Hotel and a top-level classifier for “Eagles Nest”. There was so much training data for Hotel, that user inquiries often ended up in Hotel instead of Eagles Nest. So instead of redesigning the whole agent over, we can add a subflow in Hotel, which then leads back to Eagles Nest. In the final agent, this subflow may live in 3 or 4 different places because it all depends on how someone may ask for it.

Handling for Broad Queries

In addition to users giving way too simplistic inputs, often they will say the subject they have a question about rather than a detailed question. A great way to handle this and improve user experience is to create a “catch” intent at your highest level of classification.

For example instead of saying, “I want to make a booking with a Dr. Smith for surgery.”, they will say, “Booking question” or “Surgery question”.

We found that adding this simple catch-all for inputs about questions helped create confidence in the users that the virtual agent would be able to help them.

Conclusion

Now that you’ve seen the power of Classification Hierarchy in Conversational AI agents, you can go and make your agents much better at answering your users! Remember these steps and you’ll be the hero at your company:

Review training data
Organize the data, identify where there’s potential for high ambiguity
Create a hierarchical classification
Build out agent
Test, test, test

If you enjoyed this article let us know on Vonage Developer Community Slack. This post was inspired by a question from a community member there! You can also follow us on X, formerly known as Twitter, for the latest Vonage API news.

Additional Resources

Anything-to-SMS with IFTTT and Vonage

Benjamin Aronov — Thu, 22 Feb 2024 11:23:01 +0000

I live in Tel Aviv, a beach city with 300 sunny days a year. The weather is so stable that I never check the weather. But whenever it does rain, it pours! And I end up drenched and cold. If only I somehow had a reminder to tell me it’s going to rain.

Have you heard of IFTTT? IFTTT stands for "If This Then That." It's a web-based service that allows you to create simple conditional statements, called applets, to automate various tasks and actions across different web services and devices. And all with no code! The basic idea is to connect different apps and devices to create automated workflows based on triggers and actions.

No-code/low-code platforms are super-useful for a ton of different things. What's even better is when you combine them to solve problems!

So in this post, I’ll show you how I built an applet in IFTTT to help me know when it’s going to rain and take an umbrella with me. The applet will send me an SMS warning using Vonage’s no code/low code AI Studio platform.

Prerequisites:

Vonage Developer Account
IFTTT Account - Sign up for a IFTTT free account
Vonage Virtual Number

Creating an IFTTT Applet

Navigate to the Create Applet page. Search for and select Weather Underground. You’ll then see a list of all the available Weather Underground Triggers.

You’ll want to select “Tomorrow’s forecast calls for”. The first half of our Applet is done! You should be redirected to a page that looks like this:

Now we need to somehow tell IFTTT to trigger an SMS. We’re going to do this with Vonage’s AI Studio.

Creating an Outbound SMS Agent

Let’s create our AI Studio Agent now. Navigate to the AI Studio Dashboard. Follow the instructions found in the AI Studio documentation here. There are three important options for our agent, select:

Type: SMS
Template: Start From Scratch
Event: Outbound

Our agent will be extremely basic, sending a single SMS telling us that tomorrow will be rain. It will also send a link to the full weather forecast and provide the expected high and low temperatures.

For this we need to create 3 parameters in AI Studio which will hold those values we get from IFTTT. The parameters will be of @sys.any Entity type and called, ForecastUrl, HighTempCelsius, and LowTempCelsius. See below:

Now we can add our single Send Message node and our alert message which uses our 3 parameters.

The last step is to publish our agent.

Connecting IFTTT with Webhooks

Now that our agent is setup all we need to do is finish our Applet in IFTTT and connect it to the agent. We will do this with the Webhook service. So in IFTTT continue and search for “Webhook”.

Select “Make a web request” and continue until you see the following page:

For URL, you will need to paste one of the following. The endpoint depends on the region you selected for your agent.

For EU agents --> https://studio-api-eu.ai.vonage.com/messaging/conversation
For US agents --> https://studio-api-us.ai.vonage.com/messaging/conversation

Set Method to POST.

Set Content Type to application/json.

For Additional Headers you’ll need to add your X-Vgai-Key. You can find the X-Vgai-Key on the top right of your AI Studio dashboard. Click on the user icon, and then Generate API Key.

Example:
X-Vgai-Key: YOUR_X_VGAI_KEY

For “Body” we will add the following code:

{
  "to": "YOUR_PHONE_NUMBER",
  "agent_id": "YOUR_VONAGE_AGENT_ID",
  "channel": "sms",
  "session_parameters": [

    {
      "name": ForecastUrl,
      "value": {{ForecastUrl}}
    },

    {
      "name": "HighTempCelsius",
      "value": {{HighTempCelsius}}
    },

    {
      "name": "LowTempCelsius",
      "value": {{LowTempCelsius}}
    }
  ]
}

You’ll need to replace YOUR_PHONE_NUMBER with the phone to receive alerts. For example, “15551234567”. Similarly replace YOUR_VONAGE_AGENT_ID with your agent id, which can be found under Agent Details found in the side panel of your Agent in AI Studio.

Lastly, click “Create Action” and you’re done!

Conclusion

Did you know about IFTTT before this article? What are you using it for? What other nocode or lowcode tools are you using? I’m really interested to hear any feedback you have for this article.

Join me on Vonage Developer Community Slack or X, formerly known as Twitter and let me know what exciting things you are building!

Additional Resources

Low-Code and No-Code: What Option Is Best for You?

If You Can Point and Click Then You Can Make a Conversational AI

Crash Course: Create Virtual Agents for WhatsApp with Vonage AI Studio