Live Web Chat Salesforce Lightning

hi everyone my name is chika today we are going to learn live webchat which plays a very important role in sales for service slot by end of this video ok I will show you rather by end of this video will try to achieve something like this where customers will communicate with agents will try to configure in such a way that users can communicate with agents with say with this similar kind of chat window we'll try to see how to configure this chat window we'll try to have this agent avatar we'll try to have the changing in pond and we can change the colors etc etc we'll try to replicate something like this not exactly the same because this is little informal so if you want to do this kind of extracurricular activity we need to configure our live web chat ok let's not waste any time let's begin hey why are you sad hi I launched a new mobile company customers trying to contact us for more details I have a very small support team how can I manage this and occur okay b'bye okay you don't want codes and the solution is live web chat so we if you follow phone services what happens is it will be one-to-one as you have a very small support team one agent cannot answer more than one person but with live chat you can give ability to your agents to chat with multiple people at the same time and along with that you can configure more without writing a single line of code yeah I like it but how to configure it easy peasy no it's very very easy comparing live chat in Salesforce is really easy job so to do that you can set up and you see the service at a break anything related to service cloud console setup you can largely go here so this gives us a different screen where we can go and set up our live chat so if you see down here there are multiple things adding of users customize scale status exit right cetera but we don't see all chat related by button somewhat you stripe so to do that click on new one so if you don't find it anything there then you need to search here so set your chat see chat with customers if you click here it will open some kind of setup so if you see any installation of any small software it will have multiple steps like this so this is also very safe only difference is it doesn't consult the system okay let's start the first step is we need to give the kingdom let's say give as live web chat queue and then name of the group in chat group in supper so this queue name will be created in actual queue object and I wanted to add my name down here Peggy shreeka and I will click Next now it will ask us the capacity so total number of how many number of per unit she can handle and what is the work item size so I will give one in work item and every do 10 so this basically says each case will be treated as one unit and user can handle ten units which means ten cases at the same point of time and click on next now it will take us to the website URL usually we'll add this web chat in company website so that users will go to the website and then chat from there to our respective agent as I don't have any website I will try to do the same in visualforce page so I will just give this TTP and so whatever it can be so I will just be with force.com so anything related to for a visual post pages it will and with post on top we need to provide assignment it has to be an X I will just give it as web chat demo site and except to the terms and click on next now it will take us to the next screen where you need to select the type of tea service basically we are dealing with the cases so we need to select services and click on next and at this point of time we are not dealing with offline support and now click on next and it will finish these things up and it will give us some script why we need this script this script has to be copied into our website so in that website so this is the script I was talking about so this script will have the chat button and the chart configuration step so if we copy this code this is just a script if we disco if we copy this code to our company website automatically the company website will have our chat button somewhere bottom right so somewhere here like our facebook chat first of all we need to copy even though you fumes father - coffee we have somewhere we think this will be decided we'll see that later and click on next and click on them now we have our script ready but we need to paste it on our website as I said I don't have any website we'll deal with the visual first page now click here and create a visual first page and we'll paste this code as a tease unfortunately visualforce page will not have all these stylings so you will see a bit different kind of screen so I will click on file new visual puts page my first chat page ever and click on OK now we have our page copy over script here control V and we have our script and click on save now we have our page ready now I click on preview we'll see what happens this will take us to the visual post page which cover now we are pretending this as our website of course completely blank and if you see we have this chat button which is there at right bottom but it says agent offline why it is showing off and why because none of our agents are online to make ourself online we'll go back to our Salesforce and then click service applications over here service service console application and then we will have something called omni-channel omni-channel is something if you see this is ami-chan an omni-channel will walk with live web chat live web chat has to be working collaboratively this form the channel so by default every dollar per all will have this omni-channel enabled so as soon as you come to this application you would be saying this I will be making a separate video on Omniture so we don't need to worry for no developer on will have omni-channel enabled we need to make ourself available by clicking here and then make it available as soon as you click available here our website will show us online you need to refresh this page and see chat with expert as we did not have these tiles ready you might not be seeing this complete text I slightly modified team style so that will be seeing comely text okay so you it says chat with expert so click on this ad with expert and it should open us the window so that it says hello guest and agent is on the way okay so it definitely should show some liquor see it there will be a time one minute 50 seconds 51 seconds so we'll just need to accept this must I accept this as soon as I accept it it will try to take us to this new screen where we can chat with the customer so I will minimize this and I will say how can I help you thanks he caught me now we'll go here and says hi agent you a human or highly highly intelligent bot okay okay okay I'm highly convinced you're a human this is how you can chat with your agents as easy as that we are actually using we shall post page to display our chat window for customers but in fact all the code will be copied into the company websites so that automatically char this chat box will appear in that website as simple as that I like the functionality can we beautify the chat window I want customers to have great you can fill yes we can do it there is something called branding and for your information branding can also be done with no code okay then say this first we can brand our chat window so we will not be dealing with all of them but we'll try to have some changes within this particular chart window example instead of this we will have an author will change the font type as well and we also will change the header chart have window header color okay to do that we need to go to this setup so click here and click on normal setup it's not service setup we should be going to normal setup and here you need to search for embedded deployments just for embed time reading number it embedded service deployments see any changes once you have configured the chart if you want to do any changes you should come to this embedded service deployments and you see this group which we have created in our first step and click on this and click view so this will take us to this page where we need to configure our branding so it also will have our several other settings so for now we will change the branding here so click on branding and here it will last the font type so I will make it to Comic Sans MS and branch secondary contrast navigation bar see it says navigation bar color here we'll change it to blue close to blue what do you say is it good good maybe good I think it should be okay click on done so so far we change the header or chart window of header color and we have changed the font to add the avatar we need to go to some other settings we have this chat settings right here here also we will be having branding so click here in edit it will take us to this page where it will have several other options free chat page up and support we are interested in this additional branding so additional branding will appear separately in this chat settings click on edit here we should be seeing this email dimensions so we need to have Avatar deepest place correct so we'll create an avatar ayan have already downloaded one avatar so we'll just click on setup and try to add that outer in our static resource so click static resource static resource click on it it will take us to this add static resource now we will create a new static resource so I will make it as avatar web chat outer web chat our tar and I will choose the file I have already download an avatar gph click on it and click on open now we have our avatar ready make it public and click on save we have our our table stored in static resource but this URL has to be set in our branding so to do that click on new file and it should give us this resource you are click here and go back to our embedded services and in images we have multiple things Tabitha which is the one which we are expecting to put it so we will put that here if you can change the logo preacher background waiting sad state background and Heather background so far now we are only Basava so click on finish so we are done with our branding now we have changed our configurations but how we will my website know you remember in the beginning to have our chat button we have given the script to our website page so we need that script again because it has been our script has been updated because of this branding things so that company's script will be having the branding Charvet and conversations accept etc to do that we'll have this embedded service button again go to view and scroll down and you should be seeing something called embedded service course if it's eerie it is where we have set our font and all and down you would be seeing this code snippet so we need to get our code so this is our latest updated code if you don't paste it it will not automatically reflect you need to give that again to our website and then this will work so again copy it so this is where the code will be available anytime if you haven't copied for the first time you need to come here and then copy paste this I will copy this copy and click done and then go to developer console raise your mate come here and then take out this previous script and control V control s now this page has been saved now we'll go back and refresh this let me check now if you see make yes it's if the header has been changed we got the other we also have our font change see as easy as this is looking like some kind of child play website it's ok fine for demo purpose this is good and once again I'm sure I am reminding you this email embedded service deployment is where you will be configuring again let's say once you have created your chat configuration again if you want to change like the headers or if you want to have your branding etc etc should come here and then you need to update it embedded service deployments is per configuring your chat clear this is so nice is there a very agent can find customer details before the chance starts yes the solution is pre-chat form in life evasion this makes customers to enter their details before they start conversation with the agent usually customers will start conversation with agents so this is how as soon as they click on the chat button it is how if this place an agent is on the way but if you go back to this agent view he will be having this request he needs to accept it before accepting it he will not have any idea about who is the customer and what he is going to ask about let's see if we can get the COS contact details of the customer details in which we can hu by pre web chat forum we'll see how so to do that again any confusion that we need to rush will shooter we should go back to the embedded service deployment page and scroll down and you will be seeing this edit button on chat settings click on it it will take us to the chat settings where you will be seeing this preheat chat page by default this will be enabled I deactivated it for showing you how it works without having the pre-chat page now I will activate again and if you activate it it will show the name email subject and web email of the particular user so it will ask in this particular page it will ask all the four fields that you're seeing here so for now we'll have only these four fields as we activated you know what to do we need to get the script again to do that again go back to a minute service deployments click on new and then scroll down you should be seeing code snippets get get code and then you have this script copy and then go to developer console and replace our script with this new script paste then save so any change you do come back to that script copy paste it and we'll close this and preview this again and it will take us to this screen where we should be saying this and open it it will ask the pre Chan before starting it before starting the chat it will ask the details so I will say Vegas recant and I will give some email id and then subject-verb email and he can't start chatting only then it will go to that agent and if you go to this agent now he should be seeing that new equals he needs to accept it so remember live webchat evening you need to accept it so unless you accept it it will not start the chat conversation now we have our chat conversation ready now you scroll down and then say hi and if you see you will minimize this first so I will say hi will start little communication now and click on enter this guy will receive a message hi and I will say how are you and it will go there now if you see as soon as I clicked on the preach and the details about that contact has been stored as contact details the previous conversation doesn't have this contact it is why because it hasn't created this contact it is let's say he's a new customer and you contact me be created he if he is an existing customer based on the details that he has given it will pull up that contact details as simple as that all the Chad details that you enter will be saved in this chat transcript details and the things which you have communicated with the user will be associated with this case it as it creates a new case so you do preacher then obviously all these details will be stored as is which is completely different from the previous scenario as I have a small support team they may not be available for all customers of course is there a way my agents can address customers questions after they are back online yeah this is possible and the solution is offline support in live web chat let's say if agent is offline then customers cannot communicate from this web page so I will just change his status from available to offline OBC and if you go here and refresh this page then you would be seeing agent offline message here so here not click on it so that pop-up doesn't appear and then he cannot communicate in this case let's say this customer is highly anticipated to 500 miles from our cue boy but thing is it is often he was unable to communicate anything to the agents now in this case we want his questions to be communicated with our agents how that is why we have something called upline support so to do that we again need to go to embedded service deployments where we need to configure anything you want to configure on live webchat go to embedded service deployments and if you scroll down you will be seeing this edit click on edit so here you have con future right under that you would be seeing this offline support now click on this active it is disabled so to activate it we need to enable this or else it won't work so once that is enabled make it active now now it is active very simple now in that page whenever our plan page displays like free web shot it also displays subject and web Bement I think this should be enough if you want to add few more fields for user to enter you can add few more fields so you can click place and then do it and then add it but for now I am ok with water we have it we have two fields here subject and remains I think this is enough so we'll go back yeah we have a made it active and we have which means we change the configuration and whenever a configuration is changed we need to go back to your main service system to get our script so click here go to view scroll down get code control a control Sony control a control C and we go here we'll replace the script again replace and then control s now we have our page sorry so this is automatically refreshed and instead of even though agent is offline even though agent is offline instead of saying agent offline it says contact us and it also give us the hand pointer click on that and it will open us a pop-up asking for subject and web email so we'll say that I want to buy 100 Mobile's from your company and web even says that so-and-so company and the rate of - calm I'm click on submit this will create as a case in our Salesforce so if you go back here here and we'll go back to cases we should be seeing a new case is recently we will go to all open cases and it should give us the latest case where is that latest kc-10 2/7 is the latest case and it says I want to buy 100 Mobile's from your company and it should also display our website or our web email so as soon as they have this email and they have this subject they will understand that ok this is a nice deal so we can't do why can't we come engage with them so they start communicating with this email it as simple as that if without having this feature they will not even find his details as a case here and then they cannot communicate which means they lost their good very good opportunity so this is how you can configure so that the case will be created when agents are offline see very easy configuring of web chat is really like installing a very very small software in your machine Wow what else live web chat can do in fact it can do many things something like sneak peek chat transfer a quick text push time or decline reasons whilst are blocking file transfer queue position sneak peek means let's say customer is typing something you can see what he is typing in your screen chat roughly something like you can transfer you a chant to someone quick text or mostly frequent messages something like hi good morning Exeter Exeter you can configure it so automatically that will be pulled up in your chat which time you place something it's their time where if agent doesn't pick that particular chat it will be forwarded to some other agent decline reasons or something agent can decline the customers chat requests but he needs to provide the reason visceral block is something like you already know it what it means file transfer self-explanatory cue poison is something if the number of agents are less and the customer requests customer chat requests are more then they will be kept in queue so they will be able to see the keep their queue number in the particular line and that's the wrap up if you liked this video give a thumbs up and I'm making another video on live on my channel I will be posting this week practice practice practice happy learning and bye

Channel: Salesforce Exclusive

Views: 29,067

Keywords: live web chat salesforce, web chat salesforce, service cloud live chat, salesforce live chat, salesforce live web chat, live agent, how to set up live chat, how to set up live agent, omnichannel salesforce, salesforce omnichannel, service cloud, feature demo, live agent salesforce, live chat salesforce, embedded services salesforce, chat salesforce, salesforce chat, queue salesforce, salesforce service cloud

Id: J5-zEf9MPvc

Length: 22min 5sec (1325 seconds)

Published: Wed Oct 16 2019