Twilio Flex is a cloud contact center that is
fully programmable. It uses a plugin mechanism
that allows you to customize everything in the UI
and I'm going to show you how that works right now.
We'll start inside of the default Flex instance that
we were working with in the last video and head over to the
Admin panel. Here we'll head down into the
Developer Setup section and hit Edit.
This lists the prerequisites and the steps to get
started with Flex plugin development. Just note you need Node
8.10.0 or later and npm 6.1.0
or later. We'll head over to the Terminal
and see that I've got node v11.7.0 and
npm version 6.5.0. We'll use npx
create-flex-plugin and give our plugin a name. It needs to start with
plugin-. I'll call it plugin-getting-started
and that'll install it. It's going to ask for our
Account SID which you can get over in the Developer Setup
panel.
And we'll say yes to the Admin plugin to finish
the installation. If we head into the directory
we can run 'npm install' to
install all of the dependencies. This is going to take a little bit of time so
I'm going to skip forward to when it completes.
If you take a look at what's in the directory
it looks just like a standard npm package. So we're
going to run 'npm start' to fire up the development server.
That'll fire up an instance of Flex that
we can modify locally with our plugin.
So if we go to localhost:8080 and login with
our Twilio credentials we'll see we're in basically
the same default Flex with a demo component loaded.
Let's see how that works. We'll open this up in Visual Studio
Code and I'm going to first look at the index.js
file. We won't be modifying this, it just loads the plugin.
Here's the plugin itself, GettingStartedPlugin.js.
(you can tell by the plugin name up top) and down below
in the init function, that's where we do all of our customization
and you can see here it's loading in a custom task list
component into the Panel1
of our Agent Desktop. And this is
what that looks like. It just has a div that says "This is a demo component"
So, that's the structure for how this plugin works, there's that
demo component loaded in the first spot of panel
one. Excellent.
So if we head down into the terminal
inside of Code, we can run the server
here so that when we make changes
inside of our code they'll live update.
So the first thing I want to do is show you that toggling
this to be commented out and heading back
to the browser it will remove that
demo component from the top. And if we come back and
uncomment it once again and head back
over to the browser we should see that it's back
and just one more time let's comment it out
and head back over. And...it's gone. Ok,
that's enough playing around with the showing and hiding. Let's
make a more interesting change. Inside of the Flex
documentation there's a list of the types of
things that you can modify underneath Flex UI. We're gonna take a look
at the available content strings that you can
modify. In particular I want to change the text
for when there is no task available for the agent.
So right now it says no tasks. Here's what the name
of that string is. This is a thing we can modify directly
using the manager inside of the plugin code.
So, we want to change it from saying "No Active Tasks"
to "No tasks, make some coffee!"
If we head over to the code, first I will
uncomment this so that we add the demo component back just so that
it will be more visible when we deploy this later to
our Flex instance hosted on Twilio.
We'll want to see that component so we know the change was made.
We're going to use the manager to access those strings
and in particular we want the NoTasks
string. We're going to set it to "No tasks,
make some coffee!"
Then we'll save the file and our
Flex instance will update
to say "No tasks, make some coffee!"
Excellent, and our demo component is back
to loaded in. Alright, now we've got this CRM
panel over here and I'm not going to use a CRM so it would be great
if we could hide that. If we head over into the Flex docs
once again there's a section on UI configuration and
in particular, all of the things
that you can configure are loaded
in this section. We're going to look at the React
defaultProps that you can modify.
We're looking for one here called AgentDesktopView
showPanel2 and it
says over here that when it's set to false, the CRM panel will be
hidden. So I think that's the one we want. So we'll use the
flex object over in our code to access the
AgentDesktopView and set showPanel2 to false
and that should hide our CRM panel. So
flex.AgentDesktopView.defaultProps
and that defaultProp that we just found
from the docs is showPanel2 and we want to set
that to false. Once we save the file and head back
over to our Flex instance it is
gone. No more CRM panel. Excellent, so
we've made a couple of changes. How do we deploy this? Well
if we head down into the terminal here we can run
`npm run build` and this'll create a build version
of our plugin. Heading back over to
the Terminal we can see it inside of the build directory.
So if we change directories into the build directory
and take a look at its contents we'll find
plugin-getting-started.js. Now back in
the Flex in the Admin panel's Development Setup section there is
a link to you Assets section inside of twilio.com
in the console. We want to add an
asset and upload this plugin
that we just created. So find that
in your directory structure and hit Open.
Do not check off "Make Private" since plugins need to be public for Flex
to have access to them. But, simply uploading this here makes it
available to Flex. Once it says it's
deployed we can head back over to Flex and
launch our Flex instance that is hosted on Twilio.
Now, our hosted instance of Flex will include
our plugin that we just created now that we've uploaded it.
In the Developer Setup you'll see that it's listed in the installed plugins
and if we head over to the agent
dashboard we'll see that there's no CRM, the tasks say
"no tasks, make some coffee" and the demo component is available.
If you want to learn more about Flex we're going to have more videos soon so Subscribe
if you haven't already and hit that bell for the notifications.
Until next time, I'm outta here.
For more infomation >> Schultz: Harris' Medicare-for-all plan 'not American' - Duration: 9:26. 
For more infomation >> UNT Student Apologizes For Video Showing Dogs Attacking Raccoon - Duration: 2:16. 
For more infomation >> Father of murder victim wants justice for his son - Duration: 2:02. 
For more infomation >> NWA Woman Sentenced to Jail for Animal Cruelty (KNWA) - Duration: 0:29. 
For more infomation >> Abilene man jailed on $175,000 bond for child sex crime - Duration: 0:25. 
Không có nhận xét nào:
Đăng nhận xét