welcome back guys in this video I will demonstrate to you how we can integrate service level wants up as part of the integration I will be embedding an icon over here using which we can interact directly with the concerned person so to move ahead with the integration part let me directly go ahead and create a ui makkal so this integration is going to be mostly similar to the one which we did last time for Skype so that is the reason to save time I am just directly go going to go ahead and copy the code which is written over here and then I will do it my UI Mackall so let me give the name of my UI Mac OS watch that and I just got the whole code now this one I will replace with the image name which I have already loaded into the backend using images module what's up dot mg a remaining code we can use as it is except for minor modifications for example we are not going to use email ID if we will be using no file in this case so let me do the corresponding changes over here this piece of code and so this in this case is going to be mobile underscore phone which is the name of the mobile phone field in the backend now after gliding through the user I get the mobile phone of the user so here we also have to make sure that the mobile number which user has which is already present in the database is the exact number in the exact format of digits there is no special character like opening or closing basis over this so to make sure of that what I am going to do is I'm going to use a regex pattern to remove those extra special characters so this is going to be c29 okay then to make it for global I will use those okay now after this code runs I will be getting only the digits present in that mobile number if opening closing this is an even or - all spaces you stores will not be part of that those will be replaced with an empty character this is what this code will do now I will replace this part with the what's up API which is actually HTTP colon double slash W a dot me okay then my mobile number and also we can pass some or default text over here so how to do that we'll see next let me just first go ahead and say this okay so now I'm going to pass that text over here which is going to be pushing mark like equal to some our text for example the name of the user so let me create available first for that let's say demo text equals to hi space first name of the user so first name of the user I can get to user object in that case I will be capturing this data inside this as condition usual dot first and responding okay we declare this on so now I have the sample data which I want to pass in my app a call to what's up I have the mobile number now what so there is one more thing over here that the text whatever text we are planning to pass over here should be you in URL encoded format so how can I do that this this is a JavaScript function which is available for us the name is in code you were I component so this will come convert my text into a URL encoded format text I will pass the demo text over here okay so this part of code is complete apart from this URL which we have used we can also use API dot watsapp comm which is so both the lines of code which it the URL which is written over here and one returned over here can be used interchangeably okay so now let me go ahead and save this and I will navigate to my incident form now where I want to display the Watsa pykon I hope on this record as of town not visible because I have not added at you I'm a code word dictionary when I click on this Onsager dictionary so here I will mention that what self chart I'll click on update okay so you can see that whatsapp icon is available over here it's visible now so if I click on it right now let's see what happens so it looks like it did not open so let me check if I have made any mistake if this amazing console so it says email ID is not defined so probably I have missed out to M F dot remove that email ID text from somewhere and here it is if condition I'll update this and move my form once again and I'll try again if it works for me let me click on whatsapp I can now so here you can see the simple text which was given by me and it asked me whether you want to interact with this user and it asked me whether you want to open whatsapp desktop app so I clicked on open whatsapp desktop app so the text which I have given as a demo text will also appear in the window once it is open initially what's up will verify whether it is a valid number or not okay so that text can be seen over here and this is the same user this is the number same number which is mentioned as part of the user file okay so this is how the integration with whatsapp works and for this to work I have also installed whatsapp desktop app for Microsoft Store and I have also taken care they also do a couple of things let me summarize I have taken care of the basics of special characters in the number the number should be present in the user profile event or proper country code otherwise what's up will not be able to find out the user profile on whatsapp they need to know they can take hold for example +91 for india or +1 for us apart from that the second part is the text which we are passing to that user as a default text should be in the URL encoded format and the third part is I have installed desktop app of whatsapp from Microsoft's tool for this integration to work so thank you guys for watching the video