Building LiveChat Apps 101: Create, publish, and monetize your app

Does it work? Yes, it’s working Alright Hello everyone and welcome to Building LiveChat Apps 101: Create, publish, and monetize your app webinar My name is Michał and I’ll host the webinar today. In my everyday work I’m responsible for Developer Relations at LiveChat, but today I’ll step into developers shoes and try to create simple app myself. It will be published on the Marketplace and available for sale for all our customers. First things first, if you notice an audio or video issues just let me know on the chat, and I’ll do my best to fix this immediately. Alright I think we can begin. Let’s start with a simple example of our app so let’s go to the browser. Basically the app will allow agents to send custom cards to the customer using a chat app widget. Let me show you that. When the customer starts the conversation and the agent get it, in the right upper corner we have details section and above that you can select new icon or you can create new app with your own icon and this is the app that we’re going to do today. So, let me show you how it’s gonna work All right, so we simply Paste here the URL that we want to send to the customer Then we drop the image of the URL, title, subtitle and button text, let’s use “click me,” and send it to the customer. Here it goes this is how it looks on agent side and on the customer side we get this card visible here and after we click on that it loads the page that we defined before Right now I select the documentation, so let’s go to any documentation right here And ass you can see, customer can explore the website that has been loaded here. This is how it works and we’ll do this application step-by-step following our documentation and every step that is required for this in order to work Let’s start with the general agenda of todays webinar. We will start with creating an app in a Developer Console, then we will go to our documentation, and I will explain how to use Sign in with LiveChat, Agent Chat API, Agent App SDK, then I will explain how to apply Design System and why it’s important. And, of course, very important thing here will be monetization, and at the end we’ll have few tips and tricks from me, and as usual Q&A session at the end We know what we want to do. We need now tools for that. What you’re going to need for this is a LiveChat account If you don’t have one, you can create one for free on our website. Also Developer Console account. If you have LiveChat account, Developer Console account is for free. The next thing will be a Firebase account. If you have your own hosting, you can use it. It’s up to you, but I’m going to use Firebase as an example. It’s easy and it can be used by anyone. We’ll also need our documentation, of course. It’s the documentation for Agent Chat API, Sign in with LiveChat button, and also Agent App SDK All of the links for all that are in the description of this webinar. You can scroll down and it will be there. Also a whole application will be on a github It’s available for everyone and you can use it as an example if you’re creating your own app or you can just download the code right now and follow me, and do exactly the same. You’ll get the same effect Of course, what we’re going to need also is a text editor and a terminal That’s it. I think we can start with Firebase We need to prepare the place

to host our application. If you have your own hosting, as I said before, you can use it. It’s up to you. Let’s go to firebase.google.com and then log in with your Google account. I’m already logged in, then use the button in the top right corner to go to console And as far as it logs in to the console we create a new project Okay, create a new project and name it whatever you want. I’ll name it’s a “Moments card sender” “Continue”, you can select if you want the project to use Google Analytics. I don’t need this so I will disable it and create the project. It may take a while so in the meanwhile, let’s open the terminal. And in the terminal we’re going to install Firebase tools that will allow us to use the firebase command on our computer. Let’s start with the general command that will install Firebase tools. You have it on the screen at the top It’s “curl -sL firebase.tools | bash” The script automatically detects your operating system and downloads the latest version of Firebase release then enables the Firebase commands globally for your terminal. I have it already installed, but it’s good to use the command to download the latest version. Ok, so then when you do that, let’s go to login to the Firebase, use “firebase login” it should open oh, sorry! It should ask you if you want Firebase to collect anonymous data. I will disable it. Then it opens the browser. You have to log in there with your Google account. I won’t that for you, but it’s a simple login with Google so you just have to allow Firebase to access your Google account and then in console, as you can see, I’m already logged in. That’s it about logging in process. Then we have to initialize our project. In a browser as you can see the project has been already created, it’s ready. We can go back to terminal and use “firebase list” to get list of all our projects and their names. And then we have to select the project here. I will select the moment card sender You can simply copy that. And then use “firebase use” and then paste the name of the project ID After that we can initialize the project with “firebase init” Okay, now it will ask us which features of the Firebase we’re going to use Let’s move to the hosting using the arrow keys on your keyboard, hit Space to select and then Enter to confirm your selection I have something here Hold on I will check Maybe we used the wrong project here Okay Oh, sorry, okay I need to remove the default project file, so hold on It’ll take a while Let’s try this one again Okay, I tried to add this as another project And then initialize that one Okay, it still doesn’t allow me to do that Allow me moment. I will fix that and

show it back to you so hold on Alright, sorry for that. I got issue I was in the wrong directory. I was in a general directory of my user on the computer. I should be in a directory where my project directory, where project is placed. I moved to the project using “cd” command and then when I use “firebase init” it worked correctly Sorry for that. Okay, now once you use “firebase init” command and select feature for hosting, it asks us the name of the directory which will store our app file. I will use “webinar” for this case and it will asks us if you want to configure it as a single page app. I don’t need that one, so I will say no, and that’s it We have our Firebase setup done on our computer, but we want our application to be uploaded so use “firebase deploy” and it should deploy all our files from the directory to the Firebase and then it should return the link that we will be able to enter in our browser. So let’s copy that one and let me show you the browser for you, and here it goes Firebase hosting setup complete. It works but we need something here and we will replace the index.html file with our own application. Ok! Let’s move on to actually creating the app. Nothing will happen if we don’t have a LiveChat account. If you don’t have one go to livechatinc.com and you can use the one of these red buttons and sign up for free. There is a link also in the description so you can do that right now or anytime. And then we go to Developer Console so it’s simply developers.livechatinc.com/console And we have to create our application If it’s your first time in Developer Console it will ask you to answer one question, then we go to Apps. Here you can find some inspirations for your apps like app ideas or maybe sample apps. You can also enter the community and share the ideas or search for ideas of app on our community forum, but we will create new app. It’s the blue button on top right corner. After, name your app whatever you want. It can be changed later. We’ll name it “Moments card sender” and for the up template, let’s choose “Agent App Widget” as this is what we’re going to do today then click “continue”, and as you can see our app is already created. It doesn’t have many functions yet, but we will change that

soon The apps in live chat are created with building blocks. In this app we’re going to use two of them. It’s Agent App Widget and Authorization block. Agent App Widget will load the page that we created, so let’s copy that URL we got from a Firebase and here edit this widget content URL with this pencil icon, place the link here. Widget placement for us will be Chat Details, and let’s hit “continue” at the bottom and that’s it about Agent App Widget building block. Let’s go to building blocks from the menu on left, and on App Authorization, create a new one So let’s get started we’re gonna build a JavaScript script app so I select that one. Let’s click “continue” and here is our Authorization block already created. We will need a Client ID in our app so make sure to copy that somewhere, and the Client Secret won’t be necessary for us this time. But, what’s important for us is Redirect URI whitelist. This is the place where we have to paste our link also so let’s add this one here and click search change Save Changes at the top, then scroll a little bit down Oh, Redirect URI. We need this here? Rediret URI is the address of our app that will receive access token in the URL and we are going to need that access token in order to make calls to our LiveChat API After that we need to add scopes for the application that app will be using For this app we need all chats.conversations scopes so let’s on all of them chats.conversation–access chats.conversation–all and chats.conversation–my, save changes, and for now that’s it about Authorization block. We can copy client ID as we’re gonna need it later And let’s check how it works, and if it works. Let’s go to Display details first, add a really short description of our app It can be changed later of course so I’m just putting here random data. I can generate new icon Save changes and then from the menu on the left we can install the app privately on our LiveChat license I hit the blue Install app button, and once it’s installed let’s go back to our LiveChat application. Let’s refresh that one Let’s send another message as a customer And once it’s loaded it should load the new app in the top right corner. As you can see is right here and Voila! It works! It shows Firebase page here, but we are going to replace it soon with our own app We have prepared the basic setup for that. We know already how to place your own URL here. We will now go to the actual application that we need, and we’re going to start with the Authorization. For the Authorization I’m going to use a Sign in with LiveChat. Let’s go to our documentation then go to Getting Started, Authorization, Sign in with LiveChat, and here it is Sign in with LiveChat is basically this button, and when agent in LiveChat login with this button, it returns the data about the agent and access token that is necessary to make API calls Let’s go to the setup of that. How can we setup the Sign in with LiveChat. There are many ways, you can use NPM module, but I’m going to use CDN hosted library. Let me show you the code of that. Okay, here it is. Here you have the Sign in with LiveChat SDK CDN hosted library

Then, we need to prepare the button container As you can see here in the browser it asks us to prepare the button container in order to use it so in our code looks like this It’s this one It basically just renders the button and that’s it Then we need to prepare what will happen after the user logs in, and we need to actually use the access token Let me show you how we’re going to do this It’s the matter of initializing the SDK and modify it a little bit so once it’s called will return the access token for us. The important thing here, when we create our variable and use the initialization code from the documentation, we need to place our Client ID here. Let’s go back to our Developer Console, Authorization block and here you have the Client ID. Just copy that, go back to your code, and place this here. Then we decide what to do once the user login. For debug purposes it’s good to keep the console.log for user authorized, and also to get the license number and maybe data of the license But, it’s only for debug, it’s up to you it’s not necessary. As you can see I’m also changing the styles of two elements this one will hide the LiveChat login button so Sign in with LiveChat button will disappear once the user login. And the second one is showing the form that will allow us to send the actual request. It’s hidden by default I will show that later, but we need to show it in a code before. I mean after the user login, but it has to be right here after the user uses the button actually. And then I use the console.log to show the license number and here the access_token = data.access_token is where the actual access token is placed, so that’s what we’re gonna need. And of course the console.log for errors And that’s it about Sign in with LiveChat. This is used only to get access token here We can go to Agent Chat API. Let me show you that in in our documentation Let’s go back to… sorry it was right here documentation. It’s in a Messaging, Agent Chat API Okay, and here’s how our documentation looks And, let me show you how it’s going to work and look in our code We start with setting the constants for each variable for our form so it will be URL, the image URL, the text for the button, the title, the subtitle Basic stuff. Right here that will run the rich message function, and then we have the payload for the actual request. And this payload to know how to use this payload we use our documentation, so you go to Methods, then Events and Send Event We’re going to use Send Event method so here we can check for this request which parameters are required for this one is the chat ID and the event The chat_id we will obtain later, using Agent App SDK and Event object is also in our documentation, so let me show you how it looks. You go to Events then Rich Message Here are all the fields that are

available for rich message Event. Some of them are required, some of them are optional. I’ve created an example already so I will show you that directly in the code Okay, the required fields here will be the rich message of course the type of it, so we will use the “rich_message”, the recipients of the actual message I use “all”, template ID here will be “cards” and then we have the elements we have in elements to specify title, subtitle, the image URL, and the buttons. The button actually, right here. And in the button it has own text to be shown, type for the button will be “webview”, the value specifies which page should be opened after user clicks on it and in webview_height you set how tall in the chat window should be the iframe page loaded. I choose the “full”, and postback ID won’t be used by us, but it’s required so it just you can just use any value here. user IDs array is required too, but we can leave it empty It maybe seem like a bit difficult, but don’t worry you can play with different even types to practice, for example if you see in the documentation the message has only like text. If you use type “message” you can use text, and a few other required fields here, and it’s much easier. Rich message is harder, but that’s what we need here. You can play with that, and as you use it two or three times you get used to it, so don’t worry Okay, so once we have the body of our request, we need to set its endpoint and headers. I’m going to use the axios library for that I’ve specified the library in head of our document, and here in in our request we need to specify the endpoint we’re going to use the post request, so it axios.post, and actual endpoint here. All of the endpoints are available in our in our documentation. When you go to the Methods, this is all the API endpoint and which methods should be used here Okay, let’s go to Methods again Okay, so it shows all of the methods that are available and all the URLs for them, so that for example if you want to use Get Chat Threads Summary here’s the method URL. You can simply copy that and paste into our code. Let’s go back to the code After that we load our payload that was specified before above in the code, and of course the headers for the request. This request requires the “content-type” header. Here it will be “application/json” and also the “Authorization” of course. It will be “Bearer” and our access_token that we obtained before. As you can see those two documentation and those two, API and SDK are going to work together very smoothly. And, of course, after that in a code we use the regular snippet for logging in the response and errors in the console. That is of course also optional. And this is it about Agent Chat API for today we don’t need its documentation anymore. We go into the last documentation. It’s Agent App SDK And we are going to use Agent App SDK to get the chat ID, so our application will know which chat should receive our card sent via application, so let’s go to Extending UI in our documentation from the top bar then from the menu on the left Extending Agent App, Agent App SDK, and then we can go directly to Agent App SDK

installation Okay, here are many many different ways to install and import the this SDK. I’m going to use the UMD build, so you can basically copy the script from here and place it directly into the code. Let me show that. Yeah, I use that one, it’s right here and then since our app is going to be in a details section we’re going going to create a function to create a details widget right there, and the only event that we’re going to listen is the “customer profile” so every time the application receives the data about the customer, it will be emitted and our application will receive the data It’s copied directly from the documentation so LiveChat.createDetailsWidget then the function will be emitted, and as you can see we use the customer profile here, and then when the data is received, we use the console.log to log the data. This is of course optional and we use the data and we set the chat ID for for our whole code The chat ID in return data from the customer profile is data.chat.chat_id And that’s basically it about coding with LiveChat documentation All we have to do now is put the values to our request with the simple HTML for. I created this right here as you can see the widget, LiveChat widget form is hidden by default, so it won’t be available until the agent actually logs in to the application. This is basic fields for URL, image URL, title, subtitle, and button text. And at the end we need to create button that will run our function After that we can save the file in our in our directory or if you say that index.html in the same folder. Then in the terminal just use again the “firebase deploy” The files should be uploaded Meanwhile, you can go to the LiveChat and refresh your application Okay, it’s uploaded so in the LiveChat I’ve refreshed Let’s go to this page also and refresh it one time. As you can see it’s already here in the application Okay, let’s refresh frame here and as you can see our app is already right here. Let’s check if it works. So I’ll copy the URL for the documentation here, you can put any URL, any image URL you want of course The title and subtitle is actually not necessary, but I will use it Button text All right! Send it to customer, and as you can see it’s working, and the customer can review the documentation so everything works as intended, but it doesn’t look good, unfortunately, but it doesn’t look good yet, because we can use our Design System. I prepared some code before so I will just quickly apply it so hold on okay okay save that one, deploy it to the Firebase and in a moment we should see much more better version okay let’s refresh

Okay, here you can see how it looks if the user is not logged in. When you click Sign in with LiveChat it asks us to log in and once we log in it should load the form, so this is how it’s going to work for the users I think I dropped something here okay Yeah, I didn’t replace the find ID in my new code so hold on for a second okay got it All right so let’s deploy it again This is basically the default state of this application And then when the agent logs in, right here it should show the the actual form so let’s refresh that one too And, it looks much better. Of course I didn’t add any validation for the fields, because it’s just idea of the app May be the gaps here may be smaller between the fields, but as I said, it’s just an idea and it’s the sample app that you can make in any direction. You can change the fields, send different messages, it’s totally up to you Okay, I will also show you how you can enter the design system and how we can use it. When you are in our documentation go to Extending UI then Extending Agent App on the left side and you should see Design System right here. Here is the few introduction and how to use it. And here is the Open Design System link Here is the whole design system explained in one one big document so make sure to take a look at this We will will go back to our application and continue. The next step that will slowly lead us to the end of this webinar is monetization process You may ask “what can I do as a developer to make money on my application” and it’s pretty simple. It’s actually one more Building Block, so let’s go back to Developers Console open your app go to Building Blocks and at the middle bottom you can see the new App Monetization block so let’s get started Here you select the price for the app Billing cycle and how many trial days you would like to offer for LiveChat users. Billing cycle can be chosen between monthly and one-time payment for the app. If you use the one-time payment there is no way to set up the trial. But if you choose monthly, a user will be charged month-to-month and there will be few days Actually, it’s up to you how many days the user can use app completely free. It can be from 0 to 30, as far as I remember, yeah it’s up to one month. No, it’s may be much more, okay I don’t remember how many days you can set here, the default value here is 7 You might ask what about the commission and how much LiveChat takes for each sold app. It’s 80% to 20, same as Uber, so each $1 spent by our customer to your app gives you 80 cents That’s it, then you click continue, the monetization block is added and that’s basically it This is actually the end of creating an app It’s ready, it’s working and that’s it We can go to the part, that I think I like the most. It’s tips and tricks, like the every time it reminds me of

like super opportunities that Internet serves us nowadays like, 100% legit no scam, click here etc. I won’t tell you an advice that will make you the millionaire, turn your world upside down, but I can give you a few tips that will make the app review process easier for you and for us as well. First thing here will be three bugs rule. Basically, don’t submit the app if you haven’t tested yet When we test the app and we find three bugs, we stop testing and send it back to you, so make sure to test it entirely, and then apply to us. It saves time for you and for us. Trust me it’s much better than to cooperate. The second thing here will be “make a tutorial” for your app If your app requires more than 30 seconds for user to get to know it. Make a tutorial Things that are obvious for you doesn’t have to be necessarily obvious to everybody, so even the simple three steps tutorial is better than none Make sure to create one. If you don’t have idea for the tutorial you can go to our Help Center on our website and you can you can create simple tutorial basing on our tutorials that have been already created there. And the third thing here will be use Design System. If you don’t have your own fancy design you can use our design system for free. We are using it, so user of your application/integration, they won’t feel like it’s something different, something from other software. It will work smoothly and look better together, so it’s better to use Design System to make app look much better for for the customer that will buy it later. I think that’s it. we can go to the end to the Q&A session. I’ll read the chat to check if there were any questions. If you have any you can ask them now or send me an email to developers@livechatinc.com The email is shown on the screen, I believe right there. I’ll give it a few minutes so you can drop the questions if there are any Meanwhile, I will remind you that all of this things that we did today are available, in the description of this webinar and if you’re watching this later, it’s also in description of this video on YouTube You can always watch it again and maybe go back a few minutes to make sure you understand everything correctly Alright, let’s wait a few minutes check if there will be any questions Okay, “Can we change the chat interface like on all design, changing job title avatar, etc.?” Yeah, let me show you on the screen again Where was it, okay, that’s this one When you are logged in to a LiveChat application the chat interface like here can’t be changed for like an application but you can change, customise your chat widget on your website, so you can change the theme here, you can change how the minimize window will look. There are many many other options, that you can actually customize like you want. You can change the colors, change the position, how it behaves on the mobile. So there are many many options, make sure to log into LiveChat, there is a free sign up You can test it for two weeks for free and for agents you can change the avatar here. You can change the job title, the name for the agent and set other settings here Yeah, you can change the chat interface like a chat widget, the chat application itself cannot be changed so

It’s only like in this this one whole package also, there is an option to create your own chat widget. You can use our documentation to create your own chat widget, then you can design it whatever you want There are no boundaries, it’s totally up to you how you will design it Make sure to visit our documentation and find our documents about how to extend LiveChat widget. Here is one that will allow you to create own or or customize already implemented default chat widget, included chat widget in a LiveChat “Can you tell me on chat widget documentation using react” I’m not sure if I understand the question, but I believe you are asking that what kind of documentation you can use right now When you go to LiveChat documentation, Extending UI, Extending Chat Widget you have the overview of each available documentation for extending chat widged, like mobile chat widget, the API for JavaScript, the Moments this is the one that we used, and for rich message, and Customer SDK It allow you create your own advanced custom solution. It allows you to create the chat widget from scratch It’s not that easy, but whole SDK is available here, you can use it for free to create own chat widget and use it on your website, in your own application, any anywhere you want Let me know if that was what you were looking for You welcome. Yeah, there is a lag in the video, probably a few minutes between what I say and what you hear It’s totally normal. Okay, I will wait two more minutes for your questions If any of you have some question you can always send the questions to my email It’s developers@livechatinc.com and I’ll make sure to answer as quick as possible Also, if you have any feedback about this webinar, or maybe ideas for the future webinars, or future documentations, or features you can also send them to this email. That will be really appreciated Thank you