Chat in App Made Easy: The HubSpot Mobile Chat SDK Solution

It's.

Hello T Hug, how are you today? And welcome to the first DHUG after Inbound. So today we have quite a lot of news packed into one hour. Today's topic will be chat in App made easy, the HubSpot mobile chat SDK solution. And for this we have amazing speakers, so they will introduce themselves in a bit. And besides that, we have the well known Dennis Edson who's managing the chat today, as well as Tun Rooten who will be responsible for the Q and A. And before we dive into the actual D hog, a quick reminder, the next dehug will be taking place next week and will be about a very, very interesting topic. Oh my video frozen, but I hope you can hear me still. So the next dehug will be about HubSpot, CMS and React. And as mentioned, it will take place next week. So if you haven't already, RSVP now. And also the next next event will be about app card components and it will take place. It will take place on the 7th of November. So if you're interested in that, sign up for this and without any other stops. Let's bring up Eric Song and tucker trainer from HubSpot. So welcome.

Was I muted? All right, hey everyone, it's great to have you all here. Thanks for joining us for this webinar today. The topic of Today's webinar is HubSpot's mobile chat SDK, fresh off a public beta launch earlier this week. All right, so we'll start by going over the basic concepts like live chat and chat flows. Then we'll talk about the main benefits of the mobile chat SDK. Following that, we'll walk through a live demo of implementing the SDK end to end, starting from the documentations and ending with a sample app implementation. And towards the very end, we'll have a Q and A session. Right. And A, if you could go to the next slide and a quick intro of the speakers today. I'm Eric. I'm the product manager of the live chat team at HubSpot. And today I'm joined by Tucker, our front end tech lead, and Jason, our iOS engineer. All right, so before we jump into the mobile chat SDK, I want to start by laying some foundation around some of the key concepts that you need to know to understand how the mobile chat SDK works. So first, live chat. Right. Hopefully a lot of you are already familiar with how live chat works and what it is, but for those of you who are not familiar, live chat is one of the channels through which HubSpot's customers can engage with their prospects and users. Chances are you've already seen our live chat out in the wild on one of our customers websites like the one below. Next, what are chat flows and how are they related to live chat? Well, the simplest way to explain this, especially for our technical folks out there, is that a chat flow is an instance of a live chat channel that customers can configure to suit their business needs. If there's one thing that my team has confirmed time and time again while building this, this live chat and chat widgets and chat flows, is that our customers love live chat. Using live chat, customers can serve highly engaged prospects and users. They can offer contextual self service around the clock using HubSpot's powerful features like the customer agent and knowledge base. And they can easily configure settings like routing rules, language, target logic, welcome message, et cetera to suit their business needs. But there was one problem and it was that live chat was not available on mobile apps leading to happy web app customers. I'm sorry, happy web based customers and unhappy mobile app based customers. That is until now. What you see here is a screen recording of Care Connect, one of our customers who has already implemented the SDK and has used it to serve hundreds of users already. Say I'm a user of Care Connect and I have a question. I can go to the chat tab, click with a support agent, I can send messages like that. I can also send a picture if I'd like, send videos. Yeah, and I can also take advantage.

Of.

Of HubSpot's various self service tools like the embedded knowledge base to search articles of interest to further assist myself. All right, so there are a lot of benefits that can be reaped through the mobile chat SDK. The first is that obviously you can embed the HubSpot chat into any iOS or Android app with minimal coding. And the end experience would be that the support experience feels very contextual and native to your mobile app. Second is that as we just saw towards the end of that demo video, you can offer in app self service by integrating powerful HubSpot tools such as customer agent, knowledge base, bots and so on. Third, you can configure and customize your chat flows just like you would configure and customize web chat flows if you're already familiar with that interface. Configuring mobile chat flows would be very similar so it'll feel very familiar for you. And lastly you can capture essential customer information to resolve issues more efficiently. That said, I want to Pass the mic over to Tucker, our front end tech lead to give you an end to end demo of how the SDK works.

Okay, thank you Eric. Hopefully you all can hear me. Okay, we're going to go through a few things here today. We've got resources here. You do see a QR code that would lead out to a lot of documentation that we'll be referring to in this webinar here. Knowledge based articles, instructions how to join the HubSpot's developer Slack channel. It's going to be a great resource. Any questions that don't get answered today, happy to bring them to that. And you know we've got engineers who would solve whatever we can for you. This link will be in the banner in the comments. So hopefully if, if you start wondering where it is, you should be able to easily reach it. That being said, let's let me get back into here. So let's take it from sort of the top. If you're not familiar with much of what we're doing here in the HubSpot application in our chat flows. If you're looking for chat flows in the HubSpot app it can be found under Automations Chat flows here. If your portal doesn't have if you're not in the beta yet you will go to your chat flows. You will see the mobile chat tab here between web and Facebook messenger with a link to request the beta. Going to that link will lead you to something that looks like looks like this screen here Searches for mobile chat SDK. Follow that through to get your portal set up for the beta. I believe there will be some documentation to send out some other steps which we will be follow will be followed up on as you join. Once you do get into the beta you will see that the mobile chat tab will have instructions on setting up your mobile SDK and setting up a chat flow. First step is to actually set up the chat flow itself and create what we call a mobile tag. Here we can choose as chat flows you all chat flows will be specific to a single inbox or help desk and to do these here we can see. You know there's a help desk if, if you're part of that product here. Every HubSpot portal will have an at least one inbox that you can create. If it's connected to a chat channel it will show up here we can see I have one that's webinar that's not selectable. I will get get to that here. But say you're on this and you do have a channel Set up for chat, which is inbox on my portal here. I can click that this enables create mobile chat flow. And this will actually take me into inbox settings where my existing chat channel is going to show up here. And if you're familiar with web chats and web chat flows, a lot of these things are very similar work, very similarly same settings. Mobile chat settings will share your web chat settings. There's some common parts that they share. You can see like theme, accent colors here and this is called out that they will share display and availability settings. I can click through this. Go to next. This is already the existing availability and then into chat flows. And this goes in the concept of a mobile tag. I'm going to not complete this yet because this is an existing inbox. I'm actually going to show you what it's like if you were to set it up new. So I've got a new chat channel. So we have the webinar is this inbox here we have. We haven't connected any channels. So if we go in here to connect a channel, you know, there's plenty of options as like most inboxes would have today, obviously we're most concerned with chat. I'm going to click chat here. We can. We can create web chats or mobile chats. Today's subject is a mobile chat. So we'll go through that and we'll have a similar what we to what we just saw. But since we're setting up a new channel, we can start sort of fresh and I'll go with sort of something that touches on HubSpot's orange here. Chat availability check will be available 24 hours. Various availability settings here. We'll just leave that as it is. Create our first mobile chat flow and let's do something specific in the app, something exciting. And then we go down here to move on. We have the concept of a mobile tag and what this is. Technically it's going to be treated as sort of a query parameter at the end point where we're going to fetch the chat widget for your mobile device. We do have some prompts here for what you should and shouldn't use. Basically it's, you know, you don't use special characters. We sort of limited it to any. Any, you know, alphanumeric characters plus a score, underscore or dash. So test dash for webinar, you will be prompted for the correct characters if you go a little bit astray. And so we click next and it gives you a little preview what it's going to look like in sort of a default mobile frame. And we'll go ahead and click Publish. You will come up to a screen here that shows your mobile chat flows created. You can click to go to the mobile chat settings page which is kind of where we just were. We can also email your developer. This will send them a develop the developer whoever's email address with a link to lets them know their mobile tag which is that's integrated into will be implemented in the mobile apps and also links to the repos to KB articles just to get them started. Let's while we're here briefly view the settings for this and we can always loop back to these. So in your inbox settings or whichever you know your current view here you you will have general this is as we mentioned before these are shared between chat and web accent color there availability. This can be updated there things specific to the mobile SDK. You'll have a configuration file which we'll be getting back to as well as to enable push notifications. You will need some data that your developers will have. We have tabs for both iOS and for Android different configuration files for each, but the values will essentially be the same between them for the most part. Let's go back to our chat flows to look at what we've had. And so now we can see this new chat flow is in there. We can go in, we can oops, we can edit that. We can see it's turned on. We can you know much like chat flows we can rename it and as opposed to web chats, I mean build, display and options will be very similar between web and mobile chats. However, if you would like to update the mobile tag which is multiple reasons you might want to do that we would do it here. You would have the same sort of requirements that it be a valid tag and we could save that if we wanted to but let's just leave it at that. So right now we've got a mobile chat chat flow set up ready to go. And let me see we've connected that if you want to create another mobile chat flow you'll have a similar now that we set up these channels for it we go into the regular create a chat flow flow website mobile Facebook messenger. We'll do another mobile one. We can pick any of the help desks or inbox we've chosen we can do this one will be inbox and since if you think back we had set up the webinar inbox that had orange highlights we'll show you how the existing inbox let's see. The existing inbox has its own colorways and we would expect to see them here, sort of those darker colors. And we can choose any one of like as Eric showed in the demo, there's widgets with the knowledge based search, we can also use your bots. Any of the existing offerings for live chat can be used directly in the mobile chat as well. No limitations there. And then we create, we pick a knowledge base for this one I've got a help center, that's fine. And so we've got yet another mobile chat. So go back to chat flows. Sometimes they might take a minute and there it is. Yeah, so that's now in there. So we can do that. We can update mobile tags, everything we'd want to do. So now that we've gotten this far, what do we do with it? I'm going to give you an example of using the demo app in Xcode. The repos can be found these again linked to from our documents. But on HubSpot's open source mobile chat SDK iOS Android can be found at Android. But essentially, you know, we can take that to run the demo app or to get the SDK library locally. We can clone it, bring it down locally, which is what I've done. So I can show you how it, how the demo goes in Xcode here inside the repository that I've downloaded, There is a HubSpot demo Xcode project. In it there you can see Demo xcode project. So that is exactly what I'm going to be bringing in via Xcode Demo Xcode project. And there's really to get, to get up and running with what we've set up in the chat flows and everything. There's really just a couple things we want to do. One is update this HubSpot info plist file. You could do the Quick Search HubSpot info plist. I already have it up here and you'll see this come up. We have HubWit Portal ID environment and default chat flow. This is just what comes with the repository for us. What we will want to do is go back into our inbox settings and for the webinar and you can see also that we've connected web. When you create the chat channel like you know, web kind of comes along automatically but pending you will have some prompts here of here's your mobile tag, email your developer. So you know, if you, if you skip past that page and you weren't ready for it, if it hasn't, you know, the pending is sort of an Indication like you know there haven't been any chat sent on this etc. So you do have some prompts here some statuses to say like oh where are you with everything here So I can go back to mobile SDK have these IO settings here and I can copy this I can download it since not much is going to change here I'm just going to copy the paste and I'll be honest like it's. I'm. I'm not someone who uses Xcode daily so like swapping the files around is not something I wish to show you all in today's chat but the main difference here I know because I'm in a production environment I'm on the same hublet the North American hubit I can simply change the default chat flow in my portal ID and so everything else will match up here Portal ID na one fraud test for when it webinar so that's set to go if I haven't already somewhere the you may have to reconnect the where's my project the library Here this hopes HubSpot Mobile SDK I've already added it on there at a package dependency it already knows since I've been there but you can also quite simply search in there and it knows what where all this is has some information you can get your dependencies add which project to add to add package and I do apologize for seasoned iOS developers if I'm doing something really hacky I'm sure much better things in iOS than I ever will. Anyways, if everything looks good and the gods are smiling upon us I'll go ahead and try to build and run this in the simulator here and we can see it's running here we can look at the icon that's our default icon there the demo's great has different ways of launching the chat floating buttons kind of like what you would see on a website with our existing web chat floating button tabs with floating button just various things the demo also lets you to set up it's not what I want to be the settings here and this can show this will sort of mirror the HubSpot plist where you can and I can even like I'm in the wrong thing actually I think if you're in the actual like a demo app you get to change that something that's actually been uploaded to an iPhone because obviously you can change this right here but easy enough to do so without further ado let's get a chat going here so here we can see what I set up here's our orange gradient. Here's our question. Ready to help in this set and thank you. I need help. And a lot of these are going to work very similar to the web chat. If you are familiar with web chat and looks like right here. Thank you. I need help. Takes us into our inbox and just to show like the back and forth here that you know, the customer, your customers, customers are going to be seeing everything you would normally see. It's, you can see there's notifications, there's the typing indicator that there's something that, you know, the conversation is happening. What can we help you with? And so it should be, you know, as fast as the Internet actually. And we should be able to see. I missed it there. You can see typing indications come across. So we would expect to see everything you would normally have from web just, you know, optimized for your particular iOS or Android platform. So that's how that normally works. We slide back down. We could do a new chat if we come back up here. Most recent chat, I can click back into the chats again. Very similar to web chat. One other thing I can show you that will certainly help with debugging and getting, getting off the ground. Let me go back to the chat flows and obviously. Well, it's obvious to me that if you've deployed an app first and you've hard coded a specific mobile tag, say you want to replace that chat with something else without an app release. The way chat flows work for web, this is sort of a targeting thing will work similarly for these as well. Test for webinar in that you have the concept of priority second chat flow. So now we have two mobile tags here, but you can see over here you also have priority one and two. So let's make this one very clear that this is the second one. Second is not a word. Second is. And we'll save that and I'll show you a couple things here that can be very, very useful. So we've got two here and we'll turn this on. This is number one, this is number two. Let's start this here. Let's start a new chat and this is still number one. Happy to help in this app. Now say if we wanted to transition, you know, we want to update this one. Two things we can do. We can turn this one off. I'm in a different inbox, so that's why I changed color. That's how it works. So let me create a new one here. I'm in the right place. I'm happy to Help in the second chat flow. Third thing I want to show you, and this has happened to me before while developing, you know, testing things out, doing this, is that as you create new chat flows, if there already is one existing, they're going to come in with the status turned off. And then you might ask, like, what happens when nothing is turned on? You'll get the system isn't responding to your quest right now. Please try again in a minute. Which is helpful for general things. Something's going on and they can just try again. However, in this case, since we're in the back room on this, we know that everything's turned off, what you can do and what you can prompt your customers to do. If there's like, we don't know why it's not happening. We do have something of an Easter egg here. If you tap on this five times, it will actually tell you, like, what's going on. It's saying, no, no chat matching chat flows in your portal for that targeting parameter. This could be handy if you maybe like spelled the mobile tag wrong or just, you know, just general debugging. But this is very handy and I can't tell you how many times I've been like, okay, what did I do wrong? And then I had to click this. And so we'll turn on one of these again. And here actually I'll show you about priority. So priority one priority. To say if I was, you know, ready to swap one for the other, I could use this, use the stats to toggle it. I can also toggle the second chat flow just to drag that up in priority. Either way. But right now we should see. Yep, we're in this new chat flow. Got any questions? I'm happy to help in the second chat flow. So that's a good way to. If you want to make, you know, you want to change the type of chat flow. Because there is. If I edit this chat flow, there's things I can't change. If this was like a bot, I couldn't change it to live chat. There's some certain setups that you can't really change the exact type of chat flow other than certain things. I mean, I can turn on, toggle on and off the knowledge base. I can change who it's assigned to. But say like, no, I really wish this chat flow we have coded into this mobile tag. I've coded into the app. We really want that to be a bot. That's where you would want to just use multiple mobile tags and switch between them, etc. Etc. And you can see and they can be different, the same inbox, they can be different inboxes, it's all very flexible. Lastly, what I'd like to show you is that my understanding, again, not an iOS engineer by trade, is that testing push notifications in Xcode is not the easiest thing on earth to do effectively. So I'm going to try to get show you a live demo of that from another portal here. So this is my own phone. I've got do not disturb on because no one wants to see what people are telling me. But I do have via test flight with internally here. We do have this demo on a different portal going on. So we'll go into custom buttons here. And you can see this is one of, one of my fellow engineers, Elroy here. So I'm gonna go, I'm using my phone, I need help. I usually don't need this much help, but today is special. So I'm gonna send that. This has the email response and it's like, oh, okay. I said I'm gonna go somewhere else. I'm actually gonna go back to my home screen there and I can see going back here to my inbox, someone needs help. So say, okay, we're here to help and I will send that. And there it is. Now it's got my name because that's who. I'm the one who is the agent here. So that's something I can actually click on that notification and there I am. And again, this is going to work here. I'm going to use my phone here. This is going to work. And you'll see over here the live typing indicators as I do everything and goes back and forth and so push notifications, should you have them enabled, are great, you know, helps with your branding, helps you get a rapid response or as your customer, your customer's customer lets you know when things have come in. I think that's all I've got to demo for you. Certainly, you know, we can take start looking at some questions and let us know what you think. Let us know what you'd like to see.

Well, thank you, Tucker. It was an amazing presentation and, and for you as well, Eric, of course. You did an amazing job because there aren't that many questions yet. We have one question available from Laura and she is wondering what the right way to would be to limit the mobile chat to specific pages or screens in a mobile app. Is that something that is available yet.

Tucker?

Is that something you could answer?

I think, yeah, I think the short answer is yes. I think where My terminology here might be a little shaky, but, you know, the specific screens where you would have the chat, I think it's absolutely up to the developer, you know, whether you have to drill down into like, you know, contact us, support, etc. You know, in the app itself, what screens. It's sort of similar to, if you're familiar with web chat, where there's a concept of audience targeting, where it's. You need to be on a URL with a specific path or language or something. This was designed to give you similar things where it's sort of like, okay, you know, I want to be in like. Like there's a support chat. And that would be like in, you know, in a hypothetical application, be like, you know, contact us support. And then you'd click, you know, whatever chat launcher CTA would be for the mobile tag, like support. Suppose elsewhere in your app you had something like Contact Sales, and you could click that, you know, down into sales. There might be a one that says contact, you know, contact or chat with Sales. And what you would do in your app would be set that one up to like, point to a mobile tag called, like, you know, sales chat or something. So it just depends on where you want to expose those buttons or if you want to expose them all. I'm sure it's like, it can be conditional, like, you know, whether a user needs to be logged in, et cetera, et cetera. You know, I think, you know, not to put Jason on the spot. He may have a little more clarification on that. But it is designed to be as, you know, if you want it on, you know, in your navigation, on every page, that's great. If you want it to be a little bit less, I mean, you know, I don't want to be chatted at all day, but, you know, that's. It's not my job to be chatted at all. It kind of is, but from, you know, from other developers. But I think that might answer your question. But let us know if it's. If you need any clarification.

Perfect.

Yeah, I think that's all the questions for today. However, this webinar is going to be available on YouTube and on LinkedIn for a while, so. So if you have any other questions, make sure to visit the link that is visible right now or join the.

Developer Slack and you can drop your questions there as well. Yeah, I'd like to reinforce Developer Slack's. Great. I'm in there. I might not be super responsive. I do have my day job, but we do have a lot of resources and any questions that we could have been asked today are certainly welcome over in the developer Slack and the mobile chat SDK channel.

Perfect.

And I think that's a wrap. So thank you very much for joining us and have a great evening.

Thank you, everyone.