Blogmagazines42

Businesses across the internet interact with millions of customers every day. Providing customers with a positive experience helps to build a strong brand image and increases their trust. Reliable, fast, and helpful customer support is a key component of great customer service and it all starts by providing a convenient and simple way to get in touch. Just as crucial is the need to provide your customer support team with the tools they need to assist your customers.

In this tutorial, we’ll build an application that forwards incoming SMS in real-time and allows us to reply directly from a Slack channel using Twilio, Slack, and the Symfony framework.

In doing so, you’ll see the Symfony Notifier Component in action and understand how to leverage it’s abstraction to communicate between the customer and your support staff through different communication channels. Finally, we’ll look at how to react to incoming SMS and Slack messages using webhooks, and proxy the messages between the two platforms.

Prerequisites

To complete this tutorial you will need the following:

• A free Twilio account
• Ngrok installed locally
• Access to a Slack organization, with permission to create bots
• The Symfony binary installed locally

Most of this code is setting up the Slack message. We send it to Slack and in the callback, when we know it’s sent, we use TwiML to ask Twilio to pause the call for 240 seconds. If the time is up, we say something. In most cases, the pause will be interrupted by a Slack callback. Hyper Personalization your Chatbot communications Have a play with our Chatbot demo Personalize Facebook Messenger, Website Chat, Telegram, Twilio, Slack, WhatsApp Works with all your favourite. We're expert designers, developers and UX specialists. We make products and solve problems.

You will also need an active Twilio phone number with SMS capabilities. If you don't already have a phone number you can purchase one here.

Create a New Symfony Application

To begin we will create a new Symfony project. We'll be using the Symfony binary to generate the project for us, so if you don't already have it installed, you can follow the installation instructions from the Symfony documentation. Once you have the Symfony binary installed, run the following command in a terminal:

We will also install the Twilio PHP SDK, Symfony Notifier Component, Symfony Slack Notifier Adapter, Symfony Twilio Notifier Adapter, and Guzzle packages for later use. Run the following command in a terminal:

When prompted, run the library recipes to create the necessary files. Once the files are created, start the symfony server by running the following command in a terminal:

You’ll also need to expose your Symfony application to the internet so that Twilio and Slack can communicate back to the application using Webhooks. In a separate terminal create a new ngrok tunnel by running the following command:

If successful, you should see the ngrok session information as well as a forwarding URL like so:

Double check everything is working by visiting the URL displayed in your terminal. If successful, you should see the default Symfony landing page.

Finally, before continuing, create a .env.local file using the following command:

By default, Symfony provides a .gitignore file with .env.local as one of the entries. This file is where we will store our environment-specific values including secret API keys such as our Twilio and Slack credentials.

Setting Up Twilio

Before we can start communicating with Twilio, we first need to fetch our Twilio credentials. If you haven't already registered for an account, you cancreate a new account here. Twilio will also provide you with free credits to test the API. Once you have logged in, navigate to the dashboard and you will see your Account SID and Auth Token.

You will also need an active phone number with SMS capabilities. If you don't already have a phone number you can purchase onehere.

We now have all of the data required to communicate with Twilio. Copy your Account SID, Auth Token, and phone number to the .env.local file we created earlier as follows, replacing the values accordingly:

Setting Up Slack

Head over to https://api.slack.com/apps?new_app=1 and create a new Slack App. Give the App a descriptive name, something similar to “SMS Customer Support”, and select the Workspace you want to add the App to.

Once the Slack App is created, select the Incoming Webhooks option and toggle the Activate Incoming Webhooks checkbox.

Now press the Add New Webhook to Workspace button at the bottom of the page:

Select the channel you want to receive customers' questions on. I'm going to be using a “customer-support” channel

Press Allow to give the Slack App permission to the selected channel and subsequently generate a new Webhook URL.

Copy the provided Webhook URL and replace https://hooks.slack.com/services with slack://default. Add this value to the .env.local file like so:

Configure the Symfony Notifier Component

Configuring the Symfony Notifier is super easy thanks to the library contributors doing a lot of the heavy lifting for us. Update the config/packages/notifier.yaml file with the following content:

You’ve just configured two different types of channels; SMS and chat. There are four different types of support channels and each one integrates with different platforms. Alongside the SMS and chat channels you’ve already discovered, there is also the email and browser channel. The Notifier component provides a powerful abstraction layer over each of the different channel types, allowing you, the developer, to interact with external messaging services with minimal effort.

Handling Inbound SMS Messages

Navigate to the Twilio phone number details page for the phone number you’re using in this project. Scroll down to the Messaging section within the Configure tab and change the dropdown for A MESSAGE COMES IN to “Webhook.” Within the adjacent text field, add the value http://xyz.ngrok.io/webhooks/twilio/sms/incoming, ensuring that you change the xyz.ngrok.io URL to match the one in your terminal.

Now create a route and return a simple TwiML response to verify that the configuration works. Create a new file in the src/Controller directory titled TwilioWebhookController.php and add the following content:

Try sending an SMS message to your Twilio phone number to ensure everything is configured correctly.

Forwarding SMS Messages to a Slack Channel

With the Twilio Webhook setup complete, we can move on to proxying the message into the customer support Slack channel to be picked up by your customer support team. Update the TwilioWebhookController.php file like so:

Let’s review these changes. Firstly, you’re extracting the From and Body from the request payload. These values are provided by Twilio and correlate to the phone number and message content of the received SMS message respectively.

With these values, you then construct a new Notification using the customer’s phone number as the subject and the message body as the content of the notification.

You can also see that we provided [‘chat/slack’] as the second parameter to the Notification constructor. This is the channel parameter. This parameter accepts an array of channels to send the message through. By supplying multiple channels, the notification can be sent in parallel via different transport mechanisms. For example, if we wanted to send an SMS and an email when an order is confirmed, we could use [‘email’, ‘sms’].

It’s important to note that when using a Chatter channel you also have to supply the transport, such as [‘chat/slack’] or [‘chat/telegram’].

If you send an SMS message to your Twilio phone number, you should see the message appear in the Slack channel you selected earlier.

Responding to Customers from Slack

Great job! Your app is now proxying customer questions from Twilio into a Slack channel and can begin replying to customer questions.

Head back over to your Slack App, navigate to Event Subscriptions and Enable Events. This can be found within the features sub menu of your App.

Your application requires verification before Slack will start posting events to your application’s webhooks. This ensures the app belongs to you, as you wouldn’t want personal chat messages going to other people!

The verification process involves Slack sending your API an HTTP request with a challenge string. In turn, they expect your API to return this challenge string back to them in the response to verify.

Create a new file named SlackWebhookController.php in the src/Controller directory with the following content:

Go back to the Slack App web page and insert the following value http://xyz.ngrok.io/webhooks/slack/events into the Request URL field. Make sure that you replace the ngrok URL with the ngrok URL found in your terminal. Slack should automatically retry the verification and if successful, you will be greeted with a verified confirmation.

Open the Subscribe to bot events section and create a new Bot User Event for the message.channels events. By subscribing to this event, each new message the Bot has access to will be sent to the Request URL we configured above. This includes messages added by a person directly to the channel, replies to a thread, and even the bot messages that are proxying the customer's SMS messages.

Press the Save Changes button at the bottom of the page and re-install your Slack App if prompted. Invite your Bot to the channel you selected earlier (e.g. #customer-support), if this wasn’t done for you automatically.

Forwarding Slack Messages to Customers

Now that we’ve told Slack what messages we’re interested in and where to send them, we can begin handling the responses from your customer support team. The responses to each customer query will be performed using Slack’s threading functionality. By doing so, we can avoid the possibility of a response in the main channel accidentally being sent to the wrong customer. Additionally, threading ensures that all information is nicely contained and isolated.

As we only want to handle messages that are a part of a thread, you need to filter out messages that aren’t threaded and also exclude thread parent messages.

Let’s do that now! Update the handleSlackEvent method in your src/Controller/SlackWebhookController.php file like so:

At this point, you’ve filtered out all messages that you’re not interested in and have extracted the response to the customer’s query.

Now we need to figure out which phone number to send the response to. Earlier, when proxying the messages from Twilio into Slack, you set the subject of the notification as the customer’s phone number. To access this, we need to communicate with Slack’s API to access the thread of messages the current response belongs to. By doing so, we can access the thread parent and in return, the customer’s phone number.

We’re now going to configure a new Guzzle client to interact with the Slack API. Before we do this, we need to acquire an access token and the channel ID for our #customer-support channel. To find your access token, head back to the Slack App page and select OAuth & Permissions within the Features menu.

On this page you’ll see a Bot User OAuth Access Token. Copy this value and add it to the .env.local file.

Next we need to find the channel id for your customer support channel. The easiest way to do this is to navigate to your Slack channel via a web browser.

Head to https://slack.com/intl/en-gb/ and press the Launch Slack button over at the top right.

Once loaded, navigate to your customer support channel (e.g. #customer-support). The URL is in the format https://app.slack.com/client/<team_id>/<channel_id>. Extract the channel id from the URL and add this value to the .env.local file like so:

With the access token and channel configured in your environment variable, you can now configure a Guzzle client to access the Slack API. Copy the following contents into your config/packages/eight_points_guzzle.yaml file

The above configuration creates a new Guzzle client instantiated with the Slack API base URL and the content type that the Slack API expects. The configuration also handles appending your Slack access token and channel id to each of the requests as query parameters.

Now, let’s build a thin wrapper on top of the client to encapsulate the data fetching. Create a new Service directory in the src directory. Inside the src/Service directory, create a new file named SlackApiClient.php and add the following:

The getConversationReplies method returns all of the messages of a thread for the given id. This also includes the parent message which holds the customer's phone number that we’re looking for.

Right now, Symfony cannot correctly autowire the GuzzleHttpClient by itself, so we need to tell Symfony which Guzzle client to use. Add the following to your config/services.yaml file:

Head back over to the SlackWebhookController and use the SlackApiClient to extract the customer's phone number from the thread.

You can now use Symfony's Notifier Component and Twilio to send the support message response to the customer.

The Notifier Component provides three different Recipient types:

• NoRecipient - The default recipient if none are provided. This recipient can be used when no contact information about the user is required, such as flash messages for browser notifications.
• Recipient - One step up from the NoRecipient type. This type contains an e-mail address which allows it to be used for email and browser notifications.
• AdminRecipient - The AdminRecipient can contain both an email address and a phone number, which means it can be used for all notifications. This is the Recipient type we are using as we need to provide a phone number to contact the customer.

Testing

To test your application works correctly, try sending an SMS message to your Twilio phone number. Shortly after sending the message, you should see the proxied message in your selected Slack channel. Reply to the message by selecting the Reply in thread option. Shortly after, you should receive an SMS message with the response back to the device that sent the initial message.

Conclusion

Congratulations! You have successfully used Twilio’s Programmable SMS API and Slack’s API abstracted behind the amazing Symfony Notifier Component library to proxy messages from external users into a Slack channel. You should now understand how powerful this abstraction can be and also how easy Twilio makes it to add another form of communication into your applications.

There are multiple directions one could take this going forward. First and foremost, I’d recommend verifying the requests coming from Slack using the x-slack-signature, if you plan to use this in a production environment.Read more here.

Another, possibly more fun addition, would be to allow customer service team members to mark questions as answered using an emoji. Different emojis could semantically mean different things to your business. To get started you would need to listen for emoji events and in return, you could automatically send thank you messages to the customer based on the emoji used.

Alex Dunne is a Software Engineer based in Birmingham, UK. Often found experimenting with new technology to embrace into an existing well-rounded skill set.

• Twitter: @i_dunne_that
• Website: http://alexdunne.net/
• GitHub: https://github.com/alexdunne

Bring your business phone to Slack and start text messaging your customers in real-time. Confirm appointments, ask for reviews, offer promotions, the possibilities are endless.

Finally, an SMS service built entirely for Slack.

Either bring your existing number, or choose your own, and immediately give your business line super-powers inside of Slack.

Centralize Your Text Messaging

Like a cellphone for your entire team, consolidate SMS to a Slack channel and let your team gain visibility to customer requests and messages in real-time. No more reliance on one central cellphone or VoIP system with missed messages and upset customers.

Your Business Phone in Slack

Consolidate your SMS in Slack threads

Your staff can now have their own private SMS channel or you can have a centralized inbox channel for everyone to collaborate with. Clerk keeps track of your conversations in a tidy thread that is persistent.

Clerk works in one or many channels

Add your business phone line to any channel(s) and even bring multiple numbers to multiple channels, it is entirely up to you.

Call Forward & Voicemail in Slack

Enable powerful add-ons that turn Slack into a telephony powerhouse all consolidated and simplified for the entire team in the app you already love.

Bring Your Own Number

Connect your existing carrier and enjoy all of the benefits and features of Clerk while keeping your service provider contracts, phone numbers, and rates.

RingCentral

RingCentral for Slack integration brings your phone number natively into Slack.

Twilio

Enable your Twilio phone number in Slack and consolidate communication.

Zoom Phone

Host the SMS portion of your Zoom phone number and use it directly in Slack.

Vonage

Enable your Vonage phone number in Slack and consolidate communication.

Google Voice

Consolidate your google voice conversations in Slack

VoIP / Landline

Enable SMS capabilities on your existing VoIP or a landline.

Industries that love Clerk

Start texting your customers today. Keep your company’s text messages organized and secure with Clerk.

Startups

Reach your customers faster and grow your customer base more efficiently. Close sales by answering customer questions quickly.

Law Firms

Attorneys, paralegals, and assistants can schedule and confirm legal appointments, submit document requests, and confirm court dates.

Insurance Agencies

Send text messages to reach your team on the mobile devices that they are already using.

Real Estate

Connect with prospects and close more deals. Create a better customer experience.

Support Teams

Increase efficiency of your support teams and handle multiple customer issues simultaneously all in Slack.

Twilio Texting

Medical Offices

Send SMS to confirm appointments, change treatments, or ask questions. SMS enable your business phone number, while keeping the existing voice service intact.

Scheduled Slack SMS Campaigns

95% of SMS are read in the first 5 minutes. Included in all plans, you can start sending important alerts, thousands of messages, marketing campaigns or promotions in one click. You can even schedule multiple SMS campaigns minutes, days and weeks in advance.

Sync your Address Book

We've built dedicated integrations to help you import your contacts from the leading systems such as Hubspot, Google, Salesforce and CSV...

Salesforce

Use Salesforce and Slack together to manage your conversations.

Google Contacts

Import your contacts directly from Google contacts.

Hubspot

Load your Hubspot contacts and lists and start texting your customers.

Google Sheets

Use sheets as a universal addressbook. Import CSV, share with teammates...

Your Business Phone, in Slack

Enable powerful add-ons such as calling, call-forwarding, voicemail and make Slack a telephony powerhouse.

Trusted by leading companies

From startups to the Fortune 500, Clerk is the most visual and simple way for teams to comminicate via text message in Slack.

I have used many tools over the last 5 years to communicate with my customers over SMS and Clerk has been, by far, the fastest and easiest way to get setup. In no more than 5 minutes I had a phone number connected to a Salesforce channel and was communicating seamlessly with customers.

Clerk has revolutionized how our office communicates with patients. Our patients have given us great feedback on how easy communication has become with our staff. We’ve always prided ourselves on being industry leaders for hearing treatment; now, we can be industry leaders for technology, too.

Clerk offers some of the best customer service around. We installed Clerk and had questions on how to send an SMS campaign from Salesforce. We reached out and were able to get Clerk support team on a call with us in a matter of minutes. They helped our team get up and running in no time.

After searching for hours and hours for an app that would be capable of sending mass sms texts using a different number, I finally came across clerk. It is painless to setup, very powerful and at the best price point. I have never experienced such good customer support in an app. Highly recommend!

Wow! Incredble that this is all built on top of Salesforce. I played around with the Hubspot integration and was shocked how seamless and quick the experience was. Clerk really cuts down on response time when communicating with our clients. It has become essential toolbox in our arsenal.

Slack 101- Intro To Slack

Watch this video for a quick tour on how to get started in Slack.

Intro To Clerk - Send Your First SMS

Step-by-step guide to get Clerk up and running on your Slack team.

Helpful answers

We know there's a lot to learn and read about all that Clerk can do. Here are some of the most frequently asked questions.

Send and receive text messages, mms, with our native Slack app. SMS for Slack is perfect for customer support, marketing, and team communication.

Yes. Clerk allows to send and receive txt messages coming from your phone number. Just let us know what number or area code you would like to use and we will set it up.

Yes. Clerk allows you to have a unique phone number in every Slack channel.

Absolutely. Please reach out to support@clerk.chat and we will get back to you asap.

Yes. Our bulk texting service lets you reach large groups of people with a single text. The group size can be small, medium, large, or huge. It all depends on the number of contacts in your addressbook.

Twilio Slack Community

Use Clerk the same way you would use your mobile phone. Both emoji and image messages are suported.

SMS standard has a character limit of 160 characters. Messages using non standard characters such as emojis are limited to 67 characters.

Clerk has a number of unique integrations with tools such as Hubspot, Gsuite, Salesforce.

Twilio Slack Account

*Chat with us! Talk to a real customer success specialist, respond in less than 90 seconds hours 6:00 am PST - 9:00 pm PST