Thinking that we are a company that is in constant growth with talent located around the world, we must seek strategies that allow us to expand all the knowledge we have globally to be able to meet the challenges of the market regardless of our location and thus provide the best customer experience, deliver the greatest possible value to our customers, and increase growth opportunities for the people who are part of Perficient. This is what we call Global Depth.

The Customer Experience

In today’s digital world, it is important to ensure that companies provide their customers with the best experience through communication channels that allow them to interact and solve their needs quickly and easily, guaranteeing automated processes that open the possibility to customize the attention according to the profile of each one, and in the same way that allows them to scale according to the need and growth of their business. 

Twilio

This is where Twilio becomes a very attractive alternative since its solution includes all of the above-mentioned features. Precisely because of these features, today, it is one of the leading tools in the cloud communications space that has been adopted globally, transforming customer experience from startups to large companies serving different types of industries.

Twilio, through its versatility and flexibility, guarantees the ability to adapt to all types of users, from those who prefer to make requests through WhatsApp messages or text messages to those who would opt for videos or emails to the more traditional user who prefers to use phone calls to get the service they need. It provides a seamless experience that responds to each user’s profile. 

This is how all these alternatives, which allow companies to individualize the process and pay attention to each of their customers, ultimately translate into people’s loyalty to those who provide them with a service or a product. It is at this point where you can see the value of adopting these technologies that impact business growth. 

Partnering with Perficient

At Perficient, we recognize the importance of being a strategic ally for each of our customers and the customer experience they offer, that is why we are constantly looking for different alternatives that allow us to achieve the goal of providing the best service experience to its users through tools that are flexible, scalable, that enable easy integration with other types of systems, that optimize decision making and above all that are in constant innovation. 

With Twilio’s capacity developed in the US, we have been able to reach leading clients in different industries; an example of this was in the construction industry, where we were able to implement a contact center solution that included chat and voice calls, allowing our client to assist their users with any inconvenience they might have. This implementation allowed us to automate manual processes in which it was not easy to track each case’s status and to have statistics on the type of problems reported, those that had been resolved, etc. In addition, they could guarantee the tracking of all the reports made and, with this, the attention to all the requests. 

Our Collaboration with Twilio

Continuing to pave the way and gaining knowledge in customer experience interests us as a company; that is why we started collaborative work with Twilio experts in the US, and we analyzed the industries and customers with whom we were working. We could implement the type of challenge that people were facing to define what those prerequisites in terms of background should have for those who started the training process, and given this, we concluded that we should start with people with experience in NodeJS technologies mainly, but also with knowledge in React, the mastery of JavaScript as a language was very important. 

In October 2021, we started the training with 2 people to be certified in Twilio Flex, which is the platform for contact center implementation offered by Twilio and is where we currently had the greatest opportunity to deploy people to apply the knowledge learned during the training. But as it usually happens on many occasions, it was not in the first attempt that we would achieve the goal. Despite the effort invested at that time, in the end, we did not achieve that people could put into practice what they learned during the certification process in an actual project, and the plan was left on standby for a while. After a few months of pause, we resumed the plan, we trained a couple more people who managed to obtain the fundamental certifications (Twilio Platform and Twilio Flex) and in this opportunity, we were able to confirm their participation in a project doing simple maintenance that allowed them to consolidate the acquired knowledge. 

Today, we have around 15 certified people from Latam, 13 of whom are working on a project applying the knowledge acquired by migrating from a legacy on-premises contact center to Twilio Flex, upgrading and evolving Twilio implementations in the Health industry. In this way, we are making sure that our customers have the best experience from any corner of the world where we operate in Perficient.

If you want to learn more about Perficient’s success with Twilio, read here.

Amazon Connect contact flows and Twilio studio flows are designed to be user-friendly. However, clients often have trouble understanding flows because long widget text is truncated, unessential technical detail is not filtered out, and transition arrows often overlap or are obscured behind widgets.

IVR-to-Flowchart Tool

The IVR-to-Flowchart tool generates flowcharts to present a high-level overview of flows to clients.

How it all works

The tool uses JavaScript and Mermaid which is a charting language. It parses flows in JSON format, converts them to strings of Mermaid code, and writes those strings to a file in HTML and Markdown format. The tool is triggered via the command line, and it can receive JSON flow from exported files or via Connect and Twilio APIs. It also allows users to select what flows to convert and the flowcharts can be previewed and exported as PDF, PNG, or SVG, or they can be printed.

Description of Features

Each flowchart section is indicated as follows:

• Error transitions – red lines
• Long ARNs and SIDs – excluded to reduce clutter
• Handoffs to outside processes like queues and function invocations – dotted lines

Widget types are distinguished by the following node shapes:

• Terminal widget – stadium shape
• Connector – a circle
• Data storage – cylinder
• Decision – rhombus
• Setting logging or recording behavior – rectangle
• Outputting a message to the participant – a rectangle with rounded edges

Node shapes were chosen based on common flowchart symbols and their associated meanings.

How the Tool Works

Settings are configured via an .env file. Also, you can configure whether to import from a file or via API and whether the flows are from Amazon Connect or Twilio.

When reading Amazon Connect flows from a file, the JSON object must be exported from the new user interface released in September 2022 because the JSON object is formatted differently than the old user interface. To trigger the tool, run npm run ivr2f in the command line from within the project directory.

How to Use the Output

The Markdown Preview Mermaid Support VS Code extension can be used to render quick previews of the flows in Markdown format. Flows in HTML format can be served using the Live Server VS Code extension and saved in PDF or printed format. Flowcharts can be saved in the PNG or SVG format by screenshotting or pasting Mermaid code into Mermaid’s Live Editor and exporting the flow.

Design Choices and Implementation

Mermaid offered the convenience of a prebuilt charting language with a sleek appearance; however, this posed a few challenges. There is no built-in text wrapping, so text wrap had to be manually implemented by placing <br> tags in the correct positions throughout the text. Reserved characters in Mermaid like quotes and parentheses had to be removed from the widgets’ content before adding them to the flowchart. Additionally, Mermaid offers limited customizability, so text size and node positioning are not optimized for readability in every flowchart. In retrospect, I would have looked for a charting tool with more customizability; mxGraph may be a promising alternative.

Conclusion

The IVR-to-Flowchart tool is a useful tool that simplifies complicated contact flows for clients and the flowcharts can be previewed and exported in different formats. The tool uses JavaScript and Mermaid, a charting language, to parse JSON flow and convert it into a string of Mermaid code. The tool’s different node shapes and line styles make it easy to distinguish different widget types and flowchart sections.

In this article, we’re going to explore how to deploy an AWS serverless infrastructure capable of storing and releasing data through typical actions (transcription, call recording, sending SMS through messaging services, etc.) taken in Twilio. 

Twilio’s Role in AWS 

Twilio, in a nutshell, provides a solution for contact centers that need to leverage caller information to make informed business decisions based on the insight collected from that data.  To make client service more efficient, not only does Twilio provide automated SMS and voice capability, but it also provides the following: 

• metric data related to call volume 
• support for enterprise marketing campaigns via messaging services 

• execution of repetitive tasks that would otherwise have to be completed by an agent 

Twilio even offers third-party services such as SendGrid, Twilio Segment, ZipWhip, and more! 

How Do We Use AWS with Twilio? 

It’s actually pretty simple when we leverage the power of the AWS CDK, or Amazon Web Services Cloud Development Kit. 

Essentially, the AWS CDK is a service that uses ordinary code to build the infrastructure you need to develop full-stack applications. Traditionally, you would’ve needed to create something called a YAML template, which would tell your AWS instance which resources to deploy and how to deploy them. 

The problem with this is that learning how to create YAML has a very steep learning curve, is very verbose in terms of writing code, and the slightest mistake in spacing could crash your whole application. (but Jimmie, what’s the big deal about fixing a tiny error?  Well usually, a YAML template tends to be incredibly long  so you will spend a lot of time trying to find the incorrect indenture) This is where AWS CDK comes in, and all we have to do is pick a language we’re comfortable with, install CDK in our Integrated Development Environment (IDE), write the code, and AWS will do the rest! 

But, for the time being, we’re going to create an AWS infrastructure that supports our Twilio instance, making it totally serverless and quick. The first thing we need to do is make sure we have the AWS CDK installed on our machine. If you have an IDE already installed, great! You can run this command in your terminal: 

npm install aws 

npm install aws-cdk-lib 

This will install the dependency in your package.json file. If you’ve never used AWS in your IDE before, you’ll need to configure it to use your account.  

Create a User with Admin Privileges 

For this, I would highly recommend creating a user in AWS with Admin privileges, rather than using the root account. If you already have an AWS Account, follow these steps: 

1. Log into your root AWS account and navigate to the IAM services in your search bar: 

2. Navigate to Users and click Add users in the top right-hand of the screen: 

3. Create a username, select Access Key – Programmatic Access and click Next: 

4. From here, you can select AdministratorAccess for the sake of this example. If you already have a group setup in IAM with Admin privileges, you can just assign them to that group: 

5. Then you can skip past the tags section as we won’t be needing it. You should then end up at the Review screen where you can finalize the creation of your user: 

6. Once your user is successfully created,  you will be able to download your credentials for safe keeping. 

NOTE: I recommend you download your credentials and keep them somewhere safe because you will not be able to go back to this page once you leave. You will need the Access Key and the Secret to configure your CDK. 

Now that we have that done, let’s hop into our IDE! 

Tracking Your Profile in AWS 

After you’ve created a folder to store your new CDK project, you want to configure it to track your profile. To do this, we run this command: 

• aws configure –profile <PROFILE_NAME> 

So in this case it would be: 

• aws configure –profile example-user 

It will prompt you for your Access Key and Secret in a screen that looks like this: 

Simply enter your Access Key and Secret and hit the Enter key. If you don’t know what region you’re working out of, that’s okay, just keep hitting the Enter key. 

That should do it! If you want to make sure that your profile is configured correctly, you can  run this command: 

• aws sts get-caller-identity 

This should return information to the console about your configured profile (profile name, Access Key, and Secret), but if it isn’t configured correctly, it will return an error. 

Folder and File Setup 

When everything is set up, you will need to create a new folder and name it whatever you want. Within that folder, you will need to run the following command in your terminal: 

• cdk init app –language typescript

Basically, all you’re doing here is telling AWS to deploy a starter application in this folder with the JavaScript derivative language, TypeScript. 

You can create the command with other languages, as well. Just use the command  cdk init app –help for more info on what languages you can use. 

After this, you’ll need to create a Lambdas folder so that AWS can read the stored functions.  Note: The stack will not work if the Lambdas folder is not present.  

This folder will need to be embedded within the lib folder created when we initialized the project. Inside that Lambdas folder, we’re going to create a file called connect-dynamo.js for example’s sake.  

This Lambda will be the mechanism we will use to access our AWS resources. To put it plainly, we’re going to trigger this function every time something happens in Twilio. To avoid being too specific, we’re going to configure our Lambda to connect to a DynamoDB table. The code looks something like this: 

Essentially, this code represents a custom API that will be  invoked by a specific action happening in Twilio. Now that we have this in our Lambdas folder, we need to reference it somehow in our Typescript file that was created on project initialization. 

NOTE: This isn’t the only thing you can do in your Lambda function. As long as you have the AWS SDK installed, you can pretty much use this toolkit to do anything you can imagine. 

So now, in our TypeScript file, we can enter this code: 

There are couple of things to note about this code: 

1. Resources deployed in AWS CDK always contain the following parameters: scope, ID (or resource name), and optional props, which will always be in the form of an object. 

2. Notice that we have assigned our function to a variable called handler. This will be important for assigning the Lambda permissions to access resources in our stack. 

3. As for our props, we pick our language or runtime. In this case, it is node version 16, and our memory size (could be any number, but 512 is plenty for what we’re doing.). Then, we assign the handler, which is how we point to our function in the Lambda folder. Remember how we named our file connect-dynamo.js?  We use that as the prefix to our handler name so the complete name is connect-dynamo.handler. Then finally, we tell the handler which folder to get the function from, which is, yet again, our Lambdas folder. What we’ve done in the code parameter is build the file path that we want our code to run from. 

Deploying Our Stack 

• After this, we are now free to bootstrap and deploy our stack! We want to run the following commands: 

•  cdk bootstrap 

• This will deploy all your resources and roles in your AWS account. as well as the S3 bucket in which the resources will be kept. 

•  cdk synth 

• This will show you the YAML template in which  CloudFormation will be running. It’s good to have this configuration in case you want to edit it in the console later  

• cdk deploy 

• This command will compile all of your code and deploy it the form of AWS resources. Take a look in your management console to see everything you deployed so far. 

•  Of course, whenever you make changes to the resources provisioned in your stack (our TypeScript folder), you want to run the cdk deploy command to update and re-deploy the updated version of the stack. 

NOTE: If you didn’t change the resources deployed in the application, and only the Lambda functions, you can run cdk deploy –hotswap to update and deploy just the functions. This makes deployment much faster! 

Setting Up a Serverless Twilio Project in AWS 

Now that we have our basic AWS stack setup, we will need to create a Twilio project within our AWS Stack.  

So in our main project folder, we need to create a new folder, and you can name it whatever you want. 

1. Then we install Twilio: 

2. npm install -g twilio 

3. Then you can test if it was correctly installed by running: 

4. twilio –version 

5. It should give you a version number along with the module name. If it didn’t install correctly, it will return an error. 

6. Then, within that folder, we want to run the following command to initialize our Twilio project: 

7. twilio serverless:init –template=blank <PROJECT_NAME> 

8. This command will set up all the files you need to successfully run your Twilio environment, including a functions folder, which will run our code within Twilio, and the .env folder, which will allow us to store our environment variables to use our Twilio Client.  

9. For the sake of this example, we will write code that simply invokes a Lambda function via API Gateway. 

If you’re unfamiliar with how API Gateway works, it’s a service built into AWS that allows external applications to access AWS resources, such as our Lambda that we’ve deployed. 

 If you look at the code from our Lambda, this function in particular will access a DynamoDB table that we’ve deployed in our stack (hence the funky name. AWS automatically assigns it a unique identifier on creation). For the sake of brevity, I will put the AWS documentation for programmatically initializing DynamoDB tables here. 

Our code looks something like this: 

So this is just a simple Twilio function that utilizes the voice client to create a voice response each time our phone number is called. If you’re unfamiliar with how to test your function, we’ll go over it shortly, but in this particular case, when the caller presses 1 after a prompt, the voice client will confirm they pressed 1, and then it will make an Axios call to our API created in the AWS console. 

Note: Axios call is what I use to make my HTTP calls. Please feel free to switch this to however you accomplish an HTTP connection. It should work the same way, essentially.  

This can be done in the CDK as well, but I find creating the API in the console is easier for those starting out in AWS. That being said, creating your own REST API in AWS CDK will be its own blog post! 

Creating a REST API 

Now we need to create the API in the AWS console to put this all into context: 

1. First things first, head over to the API Gateway service in your AWS Console: 

2. We want to click on Create API in the top right-hand of the page: 

3. From here we want to choose HTTP, as this is the easiest, most cost-effective method for accessing our Lambda, which will then access our DynamoDB table: 

4. Now we give our API a name, and then we can keep hitting Next until we get through to the Review screen: 

5. Click Create and we should be good to go! 

Configuring API Gateway 

Now we need to let API Gateway know which Lambda function to look for. So let’s head over to the Integrations tab in API Gateway to configure it to run our function: 

Notice the first Lambda function that pops up when we focus the function input. It’s the very same Lambda we deployed from the CDK. It’ll have the same name, along with a resource number and availability zone attached to it. Now, all we have to do is click Create! 

NOTE: Make sure that the invoke permissions box is checked. This ensures that our API Gateway is given adequate permissions to trigger our Lambda function. Without this, API Gateway will not be able to access our Lambda function. 

Now we should see something that looks like this: 

Adding Routes to and API Resource 

We’ve successfully attached our API Gateway to the correct Lambda. The final step we need to implement is adding routes to our API endpoint to let our Lambda know what actions it should take. 

So now, let’s head over to the Routes tab in API Gateway. 

1. Let’s start by creating a new route by clicking Create: 

2. Once we click Create we’ll be taken to this screen where we will be able to choose a method for engaging our API. Like so: 

3. In this case, we’re just going to make a PUT request to our DynamoDB table to keep things simple. For our route names, we’re going to refer back to our Lambda function to see how we defined our path names. In this case, it’s items. So we’re going to name our path items and mark it as a PUT request. 

(This is the Lambda we created at first) 

Our paths should now look like this: 

This can be used for any path and any method, but this is the method that corresponds to the paths we’ve built in our Lambda function. 

That should do it for connecting our Lambda function to API Gateway, and defining a method as to how it should treat data. Now let’s give it a test in Twilio! 

Testing Functions In Twilio 

For the final piece of this article, I want to explain how to test your Twilio functions locally. First, you would need to have a Twilio account and a pre-purchased number so that you can assign it to an exposed webhook that can run your logic. 

1. If you haven’t signed up for a Twilio account yet, you can do it here: https://www.twilio.com/try-twilio. 

2. You will also need to buy a phone number in the Numbers section of your Twilio console. 

3. After you’ve done that, we need to circle back to the function we have in our IDE.  

4. The first thing we need to do is drill all the way down into our project folder, if you’re not there yet, and then we need to run the following command: 

twilio serverless:start –live –ngrok= 

1. What this command will do is create a live URL for you to test in Twilio using ngrok. The –live input blocks caching so that the function will run fresh every time, instead of returning possibly outdated information. 

NOTE: If you have a paid ngrok account, you can put something next to –ngrok= so that it uses the same URL every time. This will make your testing process quick and efficient. I recommend it! 

A successful command will return something like this: 

It will output the publicly available URL for you to use! 

Now let’s go into the Phone numbers section of our Twilio console and configure it to run our code. Our phone numbers page should look like this: 

These are all the numbers I have purchased currently, and all I need to do is click one phone number to configure it. It should look like this: 

From here, what we want to do is paste our new ngrok URL into the box that says A Call Comes In, and if the dropdown box isn’t already set to Webhook, make sure that option is selected.  

Click Save at the bottom of the page to save your changes. 

Testing Your Twilio Function 

And that should do it. All you have to do now is call your number and see if your Twilio function works as intended. If not, the debugging process begins!  Here’s an example of everything that happens once we call our Twilio number and press 1 on the prompt. 

This is the text we receive from our Messaging Service: 

(Yes! The repositories are real. Feel free to visit them for details on how I built this.) 

This is the information that was saved to our DynamoDB table from the call made in Twilio: 

As you can see, we have successfully connected our Lambda function to DynamoDB via API Gateway and passed the information from Twilio to DynamoDB through the defined methods specified in our Lambda Function. Great! 

There’s so much more you can do in AWS CDK, but this article gives you a taste of how you can go from setting up servers over a prolonged period of time to writing full-stack contact center programs within the day with the help of Amazon CDK and Twilio. It is Quick, Efficient, Cost-Effective and Totally Serverless. I recommend giving it a try! 

Customer Service reps are often the first line of contact for retail customers seeking assistance. Providing your teams with efficient and user-friendly ways to interact with those in need of support is expensive. Off-the-shelf solutions often provide unwanted functionality and are cost-prohibitive. On the other hand, building custom solutions takes too long and is extremely costly. This is where Perficient can help.

Optimize and Accelerate Your Twilio Flex Retail Capabilities

Our Twilio Flex Retail Starter Pack provides the out-of-the-box functionality your customer service team needs to do their job without all the things they don’t need. Communicating with your customers in a way that makes sense to them will create a positive customer experience that keeps them coming back. This Starter Pack is designed to reduce cost and bridge the build-versus-buy gap. It uses multiple channels and features integrations with major shipping organizations, creating ease in the customer experience.

Once the Starter Pack has been implemented and configured, your Twilio Flex implementation will have several added channels, integrations, and features, including:

Channels

• Email Routing with SendGrid
• SMS
• Twitter
• Video
• Voice
• Web Chat

Integrations

• Co-browsing with Glance
• Shipment Tracking with FedEx, UPS, and USPS

Features

• Callbacks and Voicemail
• Canned Responses
• Emoji Picker
• Reason/Disposition Codes
• Web Chat Nudge Behavior

How Long Do Twilio Flex Retail Implementations Normally Take?

Basic implementations take two weeks, with customized implementations available that vary in length depending on the scope of customizations and integrations required. This Starter Pack lays the foundation for future feature implementations, optimizing your contact center on Twilio Flex.

Why Perficient?

We are a Twilio Gold Partner with a team of certified Twilio Flex engineers and more than 20 years of experience delivering unparalleled customer engagement and contact center experience solutions. For more information on our Twilio Flex practice and capabilities, visit us here!

My prior blog touched on the approach and initial assessment we undergo when onboarding a new client who has faced challenges with independently building, expanding, and/or maintaining their Twilio solution. With Twilio being such a robust limitless platform with full flexibility, optimizing its capabilities and maintaining a rewarding end-user experience rely on many complex applications and technical components.  

In this digital transformation era, housing and retaining sufficient skillsets to effectively sustain, expand, and manage the solution can be challenging. While many of our clients do employ skillful, agile IT operations and development teams, we find that these individuals’ time is being shared across multiple groups and projects within the organization where a majority of their contributions are being utilized on net new initiatives, with minimal care or oversight in supporting production applications.    

As a leading Twilio-Certified Managed Services Provider, Perficient is uniquely positioned to help supplement in-house capabilities and enhance ongoing production operations. Understanding that every customer journey is unique, our a la carte lineup of managed services offerings is specially tailored to Twilio Flex solution deployments. Being an authorized Twilio partner, we are empowered to offer our customers a Twilio Partner Delivered Support plan eliminating the need to hold a direct paid support plan with Twilio. This enables us to act as a single point-of-contact for all your contact center solution needs, where we interface and manage Twilio support as required. 

Operational Challenges 

Based on our experiences over the years providing adequate managed services to our Twilio client base, we tend to see common customer gaps and pain points steaming from several of the below operational roles and their responsibilities that play a critical factor in the ongoing success of a Flex solution.  

• DevOps Management 

• • Set up adequate policies and permissions  
  • Centralized repository for logging of Twilio and developer error events 
  • Adequate tooling for visibility into real-time solution performance health monitoring  
  • Creation of deployment pipelines and release management 
  • Creation of scripts for the automation of tasks 

• CloudOps Management 

• • Set up and management of sufficient alerting thresholds, such as Amazon CloudWatch errors, within 3rd party cloud applications. 
  • Monitor cloud application services and infrastructure running in 3rd party cloud hosting services (AWS, Azure, GCP)   
  • Optimize performance and capacity of applications running in 3rd party cloud hosting services (AWS, Azure, GCP)   
  • Update and/or migrate applications running in 3rd party cloud hosting services (AWS, Azure, GCP)   

• Level 3 Support Engineering 

• • Troubleshoot issues related to customizations and integrations 
  • Log research analysis within custom components and 3rd party cloud hosting service (AWS, Azure, GCP) applications 
  • Debug error events within custom components 
  • Liaison with Twilio support and/or integrated 3rd party vendors to provide meaningful technical knowledge of incidents to help identify the root cause 

• Full Stack Software Development 

• • Creation of bug fixes for any customizations 
  • Patching & upgrades of custom components to address security concerns, update legacy code, and/ or remain compatible with dependent Twilio services 
  • Modifications to existing custom functionality 
  • Development of new functionality and/or integrations  

MSO – A Dedicated Team of Experts 

Our dedicated team of experts in contact center software development and cloud computing helps organizations overcome these common challenges by utilizing best-of-breed operational management practices. In addition to our large subset of available managed services, we customize service offerings allowing for complete flexibility. Our assistance can dramatically accelerate the outcome with tightly defined service level agreements. Through our engagement, we can deliver numerous added-value services, such as: 

• 24×7 technical support to assist with production issues 
• Implement adequate logging to better enable your in-house support capabilities 
• Monitor error events
• Provide end-user/supervisor/admin training collateral and deliver live training sessions
• Enable new channels of communication 
• Execute backlogged work items 
• Implement ad-hoc feature enhancements 

Please understand that once your Twilio solution has moved to production, it cannot just remain the status quo to self-run. The ever-evolving cloud and the main reasons you chose Twilio Flex in the first place must be front of mind. Continued optimizations, automation of processes, call deflection, and many other efficiencies will not just occur without adequate skillsets, data analysis, planning, and management.  

Why Perficient? 

We are a Twilio Gold Partner with an extensive team of certified Twilio Flex engineers, the first Twilio Flex Managed Services Provider Partner, and more than 20 years of experience delivering unparalleled customer engagement and contact center experience solutions. For more information on our Twilio Flex practice and capabilities, visit us on our Twilio partner page! 

Building a programmable contact center solution with Twilio Flex provides significant enhancements to the end consumer experience with limitless platform flexibility aimed to influence the desired outcome. With complete control of the customer journey and agent experience, you can connect with customers the way you want and do so across numerous communications channels such as WhatsApp, Messenger, chat, SMS, email, video, or voice. Powered by industry-leading APIs, Twilio’s extensibility accelerates customer service and boosts productivity in this ever-changing world of modern customer service. This results in a powerful outcome that differs dramatically from the out-of-the-box experience inclusions that encompass a CCaaS platform. 

Making the move to a Twilio solution will no doubt hold a rewarding outcome. However, successful execution and ongoing production obstacles may be encountered that can act as a blocker for your organization to overcome. Whether you are exploring Twilio for the first time, actively working on the implementation of a Twilio solution, or have already migrated your production contact center to Twilio Flex, Perficient can help ensure your ongoing journey stays on pace resulting in continued sustainability and success.  

Solution Assessment 

It is not uncommon for customers to stumble when trying to take ownership of a self-build or sustain a self-management model. Many of our customer engagements begin in this fashion when we start our journey with an audit and health check of the current Flex implementation. Our initial assessment typically encompasses some of the below activities: 

• Review of existing WorkFlow and StudioFlow configurations and efficiencies  
• Investigation of common triggered Twilio Debugger events 

• Review of current TaskRouter API rate frequencies and limits 
• Evaluation of existing logging and identify areas for additional logging  
• Evaluation of existing Plugins 
• Evaluation of existing integrations  
• Custom code inspection 

• Review of current deployment process 
• Review of account scalability capacity and future growth capabilities 
• Review of any existing self-service (if applicable) and/or identify areas for self-service  
• Identification of areas to update and/or modernize  

Through our impartial evaluation, we gain a thorough understanding of the current state of your Twilio instance as well as any supporting services and cloud infrastructure making up the full solution. This empowers us to share meaningful areas of risk, identify inefficiencies, and highlight areas for improvement and optimizations.  

What’s Next? 

Pending the results of our findings and the stage of your Twilio build journey, the next steps can include many possibilities such as: 

• The customer continues down the self-ownership path, taking the findings of our initial assessment and independently actions accordingly 
• Joint ownership is shared between Perficient and the customer to tackle backlog items  

• Perficient is engaged to own all remaining aspects of the build or optimization process 
• Perficient is engaged through a Managed Services Offering for ongoing production support, continued monitoring of health and efficiencies, and implementation of optimizations 

If you’re interested in learning more about our Twilio capabilities, require our expertise to assess the heath of your Twilio solution, or can benefit from a Twilio Gold status partner to turn to 24×7 for ongoing production challenges, we can help.  

Perficient takes pride in our personal approach to the customer journey where we regularly help enterprise clients transform, modernize, and manage their contact center experience with Twilio Flex. 

For more information on how Perficient can help you get the most out of Twilio, please contact us here 

Meet Toni Milushev, Director of Product Engineering

Perficient is committed to Growth for Everyone, and colleague Toni Milushev is a great example of how we’re helping our people grow professionally. He takes the initiative to go above and beyond his role and is quick to lend a helping hand to assist those around him in their personal career growth. We recently had the chance to speak with Toni to learn more about how he’s grown his career at Perficient, and his overall outlook on professional development.

As a director based in Chicago, Toni focuses on customer engagement solutions for Amazon, Microsoft, and Twilio. He oversees product practice, customer product development, and product starter packs. In his five years of working at Perficient, Toni has earned three promotions.

With roughly eight years of experience in the industry, he has advanced at an incredible rate, and his achievements can be tied to his work ethic and desire to grow.

Toni’s Career Journey

Before joining Perficient, Toni worked for a consulting company that was acquired by Perficient and was promoted three times prior to the acquisition.

“I stand out because I’m not afraid of additional work or projects, regardless of expertise. If I don’t have experience with a specific platform, saying ‘yes’ to new opportunities has expanded my skills and benefited my career. It shows I can learn on the go, be thrown into the fire, and figure it out.”

In 2005, his family migrated to the United States from Bulgaria to give him better opportunities, and they are the true motivation behind his success. Toni has never taken this for granted, and now lives by the philosophy that hard work pays off.

“I aim to keep growing, set big goals, and strive to achieve them so that my parents know that their decision to migrate here has positively impacted my career.”

Toni’s Experience at Perficient

Working at a global company in the U.S. has presented Toni with plenty of international work experiences as he regularly collaborates with colleagues around the world. In 2019, he spent three weeks in India working with one of our teams on site. He’s also had additional travel opportunities to help launch international Perficient offices.

“Perficient being such a large organization opens the doors to communication between offices throughout the world, and that is very unique. Having a global team and working with different cultures to deliver expectations for our clients inspires me to give my best every day.”

With the support of his colleagues and Perficient’s growth-oriented culture, Toni has achieved many professional milestones. One of his proudest moments was launching a product in the cloud: PACE, Perficient’s Amazon Connect Experience solution. Many customers have since used this product, and Toni regularly shares his thought leadership in Perficient’s Amazon Connect space.

READ MORE: Perficient’s Amazon Connect Thought Leadership

Key Takeaways from Toni’s Career Growth

Toni’s admirable career journey has seen amazing growth in a short amount of time. Some key takeaways from Toni’s experience include implementing a lifelong learning approach, embracing mentors and mentees, and leading with a growth mindset. He dives deeper into each of these topics below.

Implementing Lifelong Learning

“Staying curious and wanting to learn have personal benefits and have played a significant role in my career development. It shows initiative to grow professionally and build your skillset.”

Toni continually seeks out opportunities to expand his expertise. Earning certifications has been one major way he’s shown his ambition to continue learning. His drive truly stands out. Toni took a SCRUM training course that was based out of China and provided by Perficient. This required late hours and putting in extra time and energy. He also completed numerous other certifications and training courses through Perficient Academy to help accelerate his career potential.

“It’s rewarding to take courses and earn certifications because I get recognition for them, and I’m able to market the fact that I’ve successfully passed the course. In my BU, it’s free to take certain certification exams, so it’s a way for me to build my skill set and market myself across my network. The knowledge I gain from earning certifications is beneficial because I can better communicate about numerous services.”

LEARN MORE: Perficient Academy Career Growth Tool

Embracing Mentorship

Connecting with mentors has been a huge launching point for Toni’s career growth. To find a mentor, he identifies peers and colleagues that think and solve problems differently than he does, and through discovering new perspectives, he expands his toolkit.

“From the get-go, I’ve been focused on finding mentors internally and externally to help with my career growth. I can learn something new from everyone, and I find it valuable to connect with new mentors to see what different people have to offer. For example, one of my current mentors is very analytical and thinks differently than I do, and this has helped expand how I approach certain scenarios.”

Toni is also focused on giving back and helping other people grow their careers to the next level. He talks with his mentees about different methodologies, and depending on where a person is in their career, discovering where they want to go. Identifying whether they want to specialize or generalize in certain areas and setting goals to track progress are highly valuable in fostering growth. He also recommends that his mentees participate in online trainings and certification courses, something he does to excel personally.

“Being on both sides of mentorship enables me to learn and give back to others by teaching what I’ve gained from my mentors. I can explain the learning experiences I’ve had throughout my career as a lesson for others to grow from.”

Leading with a Growth Mindset

According to Toni, it’s not just about mentors, but also, about work ethic and having the desire to grow. The right combination of skills and knowledge, paired with curiosity and a growth mindset has set Toni up for all the success he’s experienced.

“Personality and naturally having a growth mindset are both important aspects to be considered for promotions. These show initiative and that you want to make a difference, and this alone can set you apart from people.”

Toni builds a growth mindset by staying curious. He asks “why,” conducts research online, and tries to dig below the surface to avoid making assumptions, no matter the topic. His intrinsic drive and passion encourage him to continually progress and has allowed him to recognize that the sky is the limit. He is highly motivated, goal driven, and uses the resources available to him at every opportunity to succeed. His growth story shows that upward mobility is within reach for everyone at Perficient.

MORE ON GROWTH FOR EVERYONE

Perficient continually looks for ways to champion and challenge our workforce, encourage personal and professional growth, and celebrate the unique culture created by the ambitious, brilliant, people-oriented team we have cultivated. These are their stories.

Learn more about what it’s like to work at Perficient at our Careers page.

Follow our Life at Perficient blog on Twitter via @PerficientLife.

Connect with us on LinkedIn here.

Customers want to interact with a website that adapts to their needs, and as a result, the key segments of the modern customer digital experience are personalization and convenience. Customers not only expect the ability to make purchases or leave comments, but they also expect those interactions to be saved for the purpose of updated account preferences and future recommendations.

These same expectations are changing the world of customer service and contact center experience. To keep up with rising challenges, contact centers need to provide a personalized experience to their customers and this is where Segment comes in. It provides a unified customer profile that can be used to create a consistent and customized customer experience across multiple platforms.

Our team has been working to create a Segment / Twilio Flex integration that an agent can use to assist a customer, especially while they navigate through a connected website. Segment uses powerful tools to process customer data that Twilio Flex then channels through a customizable user-friendly interface. This integration paves the way for a more efficient contact center and its use cases include:

• Enabling agents to view the customer journey to quickly solve issues with a customer’s most recent order
• Allowing agents to change a customer’s preferred method of communication for marketing campaigns
• Adding and removing customers from marketing campaigns
• The automatic detection of customers across all contact channels, especially SMS and Voice
• Items left in a cart triggering an SMS message for a customer to which the customer can respond to receive help from an agent.

Creating a Source

There are a plethora of different kinds of sources that can funnel data into Segment. One of the most basic is the JavaScript source, which is simply any JavaScript-based application that sends data to the Analytics API. We utilized a retail-style website as our source and there we created a few hard-coded example users.

When a customer is selected an identify call is made. This call tells Segment that the customer has signed in and identifies the user as a unique profile. A unique customer identifier is included in the call and is used consistently throughout the website to identify the customer.

There are also several track calls made to the Analytics API. These correspond with key events such as adding an item to the cart or making a purchase. Whenever a customer performs one of these actions, a track call is sent. In addition to notifying Segment of the action itself, the track calls also provide any relevant information about the action, such as the name and the price of an item added to the cart.

Handling the data in Segment

The lovely thing about Segment is that it does all the heavy lifting. Once it receives the information, it automates all sorts of related tasks and data analytics. The info from the identify and track calls Segment received is gathered and sent to the Segment Personas platform to be refined. The Personas platform consists of the following tools – Profiles, Audiences, and Journeys.

The users and all their relevant data reside within the Profiles tool. Traits provided in identity calls, like name, email, and preferred contact method, show up here as Custom Traits. Custom Traits appear alongside values called Computed Traits, such as last purchase date and lifetime spend, which are calculated based on events or other traits.

Groups of users from the Profiles tool can be defined and calculated based on events and traits using the Audiences tool. These groups or “audiences” are analyzed based on common traits and behavioral patterns and they can also be imported into the Journeys tool where they can be singled out for channels like SMS and email campaigns.

Integrating Segment into a Twilio Flex Plugin

The key to putting all this data to work is in Twilio Flex. By integrating Segment into a Twilio Flex plugin, agents are not only given access to relevant customer information but also given the ability to edit customer info as needed.

It’s possible to query Segment for an individual customer profile through the Profile API and information such as user traits, events, external IDs, and more can be requested. In our plugin, we utilized the call and SMS external identifiers we defined to retrieve customer data depending on what channel the customer used to contact the contact center.

If a customer profile is found within Segment, their information is displayed in the CRM panel. If that is not the case, a form to add the customer’s information is displayed instead. Once this form is submitted, an identify call is sent to the Analytics API where Segment adds a new user to the list of profiles. Editing a customer’s contact info can be achieved with the same method, the primary difference being that when Segment receives the identify call it does not create a new profile. It updates the existing one with the new information instead.

Using a drop-down menu below the customer’s profile, the agent can add or remove the customer from any of the campaigns managed in Segment. This is done through a track call to the Analytics API that represents an Enroll or Unenroll action.  Campaigns provide a consistent point of contact with customers, and they can include anything from coupon email lists and SMS marketing campaigns to newsletters. Not only does this allow agents to efficiently enroll customers in relevant campaigns based on their profile, but it also gives customers more control over their privacy by making it easier to opt out of unwanted campaigns.

In the CRM panel, we can also find the entire customer journey that shows all the track events recorded for that user, capped at any specified number. For example, we capped our instance at 20 track events. By looking at these events, an agent can see what the customer is doing on the website and can better assist them.

Takeaway

In our project, we have only just scratched the surface of how Segment integrations can be used to enhance not only the Twilio Flex experience but also customer data management. With the versatility of Twilio Flex contact centers and the powerful customer data management of Segment, the possibilities are endless. We plan to continue delving into this topic and I encourage others to explore what this software power couple can do for them as well.

Why Perficient?

We are a Twilio Gold Partner with a team of certified Twilio Flex engineers and more than 20 years of experience delivering unparalleled customer engagement and contact center experience solutions. For more information on our Twilio Flex practice and capabilities visit us on our Twilio partner page!

There are many reasons you might want to play a sound in the Flex UI (User Interface). For example:

• Ringing to indicate an incoming call task and alert the agent
• Sound notifications for new chat messages to alert an agent who may be handling multiple chats simultaneously
• Sound to indicate that participants have joined or left a conference

To implement sounds in some of these scenarios, a few workarounds are required in Flex. The Incoming call/SMS/chat ringer plugin for Twilio Flex helps contact center administrators set up an audio alert for the incoming Call, SMS, and Chat tasks to the agents. As of the writing of this blog, however, Flex does not natively support audio alert (ringer alert) for incoming tasks. (To track the addition of the browser ringer as a feature, visit the Flex Release Notes page.)

Twilio does provide the code example below for a browser to automatically ring when a Flex call comes in on their website. However, there is a problem with this code: it was designed to respond only to voice calls, not to other channels.

Copyright, Perficient 2022

There are two issues in the example code:

1. The browser is notified when both an inbound call and an outbound call occur. Outbound calls should not ring the browser.
2. There is no ringing for other channels such as SMS and Chat.

To fix this, we can automate the browser to ring for voice calls, SMS, and chat messages and fix the ringing on outbound calls by adding the inbound direction attribute to the example code.

The new improved code looks like this:

Copyright, Perficient 2022

The alerts are divided into 2 categories:

• Repeatable media (alertSound.loop = true) are played in a loop, like a phone ringing that goes on and on. The only way to stop repeatable media is to manually call the stop method.
• Non-repeatable media (smsSound.loop = false) are played once, like a beep or bleep. Non-repeatable media automatically stop after being played once.

In this code, the repeated audio file (ringing.mp3, in this example) plays until the worker in Flex accepts the voice task. If an SMS/Chat task is received, this code will play a one-time audio file (smsAlert.mp3, in this example).

To make this code work, you will need to do the following:

• Update the ringing.mp3 and smsAlert.mp3 audio file URL in lines 1 and 2, and
• Add your code to the init() function of your plugin.

For help adding this code to your hosted Flex instance, please see Creating Plugins for Twilio Flex.

Note: The audio file must be accessible by Twilio’s proxy servers. Local files on your desktop are inaccessible via these methods, but your audio file may be uploaded to Twilio Assets for use here.

If you are interested in Twilio Flex and need some guidance on maximizing your contact center’s efficiency, we can help.

Why Perficient?

We are a Twilio Gold Partner with a team of certified Twilio Flex engineers and more than 20 years of experience delivering unparalleled customer engagement and contact center experience solutions. For more information on our Twilio Flex practice and capabilities visit us on our Twilio partner page!

Establishing and executing your customer-first promise can have an extreme impact on the customer experience, retail brand loyalty, and repeat business. However, to remain competitive you must continuously improve productivity, efficiency, and customer satisfaction to achieve long-term goals.

Enabling your teams with easy and efficient ways to interact with customers can be expensive. Off-the-shelf solutions often provide unwanted functionality or are cost prohibitive while building a custom solutions takes too long and is extremely costly.

Twilio Flex’s agile approach to contact center solutions offers your retail agents the channels, integration capabilities, and features that are needed to equip them for success. To help you get started, Perficient has released a Twilio Flex Retail Starter Pack.

Deliver Your Customer-First Promise with The Twilio Flex Retail Starter Pack

Our Twilio Flex Retail Starter Pack provides only the functionality your teams need to do their job, right of the the box. It also integrates seamlessly with SendGrid for email routing, and Glance for co-browsing and video capabilities.

Once the retail Starter Pack is implemented and configured, you can take advantage of serval added channels, integrations, and features including:

Channels

• Email routing with SendGrid
• Web chat
• Voice
• Video (chat to video escalations)
• Twitter (direct messages and mentions)
• SMS (inbound and outbound)

Integrations

• Shipment tracking (UPS, FedEx, USPS)
• Co-browsing with Glance

Features

• Callbacks
• Voicemail
• Reason/disposition codes
• Web chat nudge behavior
• Canned responses
• Emoji picker

How Long do Implementations Normally Take?

implementation time varies in duration from two weeks to several months, depending on the required scope of customizations and integrations. The starter pack also lays the foundation for the future updates.

Why Perficient?

We are a Twilio Gold Partner with a team of certified Twilio Flex engineers and more than 20 years of experience delivering unparalleled customer engagement and contact center experience solutions. For more information on our Twilio Flex practice and capabilities visit us on our Twilio partner page!

Building software tools for contact centers that make complex tasks look effortless is an important focus within Perficient’s Customer Product Development BU. For example, we help agents and customers who speak different languages communicate easily via text. Some companies have customers around the world who speak a wide range of languages while their agents only speak English.

One client asked us to help English-speaking agents chat online in other languages by translating their messages before they reach customers, and in turn translating customers’ messages into English. Let’s look at the steps that go into fulfilling this type of request.

Amazon Translate and Other AWS Services

Our first step is building an API powered by AWS Translate and other Amazon services.

This takes three parameters:

• a block of text,
• the language the text is written in, and
• the language we’re translating it into.

We can write the block of code below in a Lambda function to send our parameters to Amazon Translate and return a translated message.

We grab our input from the queryStringParameters object. The language parameters take the form of AWS language codes. We create an endpoint with API Gateway and test our API in the browser. To translate “hello” to Spanish, we plug it into our “text” parameter, and we plug the language codes “en” and “es” into our “from” and “to” parameters:

“hola”

Twilio Flex WebChat

Now that we have our translator, we can call it from our front end. Customers direct message agents from the client’s website using Twilio Flex WebChat. From their Flex environment, agents can receive phone calls, SMS texts, and webchat messages. Here we are only concerned with webchat.

We write a plugin to translate the agent’s messages before sending them. We also need to translate the customer’s messages into English before they reach the agent, so we will need to edit the codebase of our client’s page separately. Though we need the customer and agent to see two different versions of the same message, Flex WebChat leverages web sockets so that the body of the message is the same for both parties.

In phase one, we replace each message with a version that contains both the translated and the original text. Here is a code example for the Flex agent side:

Our url is the endpoint we created with API Gateway. We call it with “en” (English) as the “from” parameter and the customer’s language code—derived from the task attributes—as the “to” parameter. Notice the “notYetTranslated” Boolean switch initiated to “true.”  We switch it to false after we translate our message. Note: Without this switch, we would create an infinite loop. The event would keep  cancelling itself, and the message would never be sent.

When we translate the customer’s messages to English, it looks almost exactly like the agent-side code above. The only difference is  our “to” parameter is “en” and our “from” parameter is the customer’s language code, instead of vice versa. We do this because we are translating to English, instead of from English.

Replacing the Message Body

After we’ve written our translateMessage function and added it to the SendMessage listener in both the Flex plugin and our client’s Flex WebChat page, our messages will be translated in both directions. But we’re not finished. The messages will reach both the agent and customer in a non-user-friendly format: the translated message followed by the “TRANSLATEDFROM” parser, followed by the original message:

To show each party the message in their language and only their language, we parse the message bodies at the UI level. Like our event listener in the last step, this is something we will do twice: once in our Flex plugin for our agent’s screen and once on our client’s webpage for our customer’s screen. This time, the code can be identical in both environments.

The “remove” command erases the body of each message. We add our own custom component to our message bubbles to replace the messages we’ve erased. It’s a simple React component. Custom components in Flex inherit their parent component’s properties, so our message is preserved in ReplaceMessageBody with its TRANSLATEDFROM parser in place. We can split the string into an array at the parser and only show the user the version of the message they can understand.

This is the render statement for ReplaceMessageBody. In our Flex plugin, the Boolean value isFromMe will be true for all messages sent by the agent. If the message was sent by the agent, we display the second (untranslated) item of the array. If the message was sent by the customer, we display the first (translated) item of the array.

Turning the Translator ON and OFF

We could stop here and roughly achieve the look and functionality of the side-by-side at the beginning of this article, Amazon Translate charges by the character, so we want to avoid calling it when we’re not actually translating anything.

We can limit the service at the Flex front end to only call our translateMessage function if the task’s language code is not found in the agent’s skillset. This keeps our event listener from needlessly calling our Lambda, but it only restricts agent-side translation. On the customer’s side, we don’t know if our initial message will need to be translated until it reaches an agent. Once it does, we can translate our subsequent messages if and only if the agent’s returning message includes the TRANSLATEDFROM parser. We then add logic to  translate the customer’s initial message if it is not already in English. And we modify the agent’s ReplaceMessageBody component to show the customer’s opening message untranslated if the agent is skilled in that language. This allows the agent to see the customer’s first message translated only if it is needed. And if it is not needed, the customer’s subsequent messages will remain untranslated.

Conclusion

This is a proof-of-concept outline for a simple webchat translator made with Twilio Flex and Amazon Web Services. In addition to adding styling and security, there are many things to consider before using this in a commercial setting – like stripping out the TRANSLATEDFROM parser when either party manually types it in and adding static translations to the WebChat UI  so that customers are fully immersed in their own language. This example assumes our webchat only has two participants. A chat with three or more participants would require more metadata in the unparsed messages.

If you already have a Twilio Flex environment and an AWS instance, you can fork the following three repositories to get started with webchat translation on your own:

• https://github.com/scriptkd/translate (back end)
• https://github.com/scriptkd/plugin-translate-webchat (front end agent side)
• https://github.com/scriptkd/flex-webchat-ui-translation (front end customer side)

If you’re interested in Amazon Translate or Twilio Flex and need some guidance on maximizing your contact center’s efficiency, we can help.

Perficient takes pride in our personal approach to the customer journey where we help enterprise clients transform and modernize their contact center experience with platforms like Twilio Flex, Amazon Connect, ServiceNow, and more.

For more information on how Perficient can help you get the most out of your contact center, please contact us here.

Help desks are often the first point of contact for both customers and employees seeking support, a solution to a problem, workflow guidance, and more. Providing your teams with efficient and user-friendly ways to interact with those in need of support is expensive. Off-the-shelf solutions often provide unwanted functionality and are cost-prohibitive. On the other hand, building custom solutions takes too long and is extremely costly. This is where Perficient can help.

Optimize and Accelerate Your Twilio Flex Help Desk Capabilities

Our Twilio Flex Help Desk Starter Pack provides the out-of-the-box functionality your teams need to do their job, without all the things they don’t need. It also provides integrations with ZenDesk and ServiceNow for computer-telephone integrations (CTI), automatic ticket lookup, and integration with Glance for co-browsing and video capabilities.

Once the starter pack has been implemented and configured, your Twilio flex implementation will have several added channels, integrations, and features including:

Channels

• Email routing with SendGrid
• Webchat
• Voice

Integrations

• ZenDesk
• ServiceNow

Features

• Glance screen sharing
• File attachments
• Callbacks and voicemails
• Reasons/dispositions codes

How Long do Implementations Normally Take?

Basic implementations take two weeks, with customized implementations available and varying in length depending on the scope of customizations and integrations required. This starter pack lays the foundation for future feature implementations, optimizing your contact center on Twilio Flex.

Why Perficient?

We are a Twilio Gold Partner with a team of certified Twilio Flex engineers and more than 20 years of experience delivering unparalleled customer engagement and contact center experience solutions. For more information on our Twilio Flex practice and capabilities visit us here!