Integrate Slack and SMS via Low-Code AI Studio

Setup

How to Setup a Node Application with Express

1. Create a new directory for your project and navigate into it using your terminal.




2. Initialize a new Node.js project and install dependencies




3. Create Your Project Files




4. 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 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

1. Log in to your Slack Workspace and . 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 to ask what they need help with. The answer will be stored in a parameter called inquiry.



2. Then we’ll use a .


3. Finally, the Live Agent Routing Node and Send Thank You Node will connect to an
   
   
   

   
   
   
   How to Setup a Live Agent Routing Node
   

   
   
   

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

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

   And hit “Save and Exit”.

   
   
   

   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:
   
   

   
   
   
   
   

   CODE Kopieren

   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 .

   
   
   

   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

   
   
   

   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

   
   
   
   
   

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

   
   
   
   
   
   1. Grab the message and add it as a comment in the correct thread in Slack, along with some formatting
   
   
   2. 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:

   
   
   
   
   
   1. Grab the session_id by using our parseMessage function again
   
   
   2. Send a request to the Stop Connection endpoint in AI Studio to tell it to stop the conversation for the correct session_id
      
   
   
   3. 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 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
   

   
   
   
   
   
   
   
   • 
     
   
   
   Vollständiger Original-Bericht

   Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

   ↗ Original-Artikel auf dev.to lesen