HubSpot Seamless Install Without Partner Sign In

Hello all, my name is Harish. I'm a product manager on the Marketplace team and I'm doing a couple of demos on Seamless Install. This demo is particularly about Seamless Install flow without partner sign-on. So in this case, I'm going to go in and go to my app listings, which is right here. And once I go in, I already have an app set up for this one. Again, quick call out to the, if your app has not migrated migrated to the latest developer framework, we, or latest developer platform. I highly recommend you guys to do it because you get a lot of features, tons of features around. I'm going to go to my edit listing in here. Since I've already opted into seamless install, I have the install dropdown button URL, which is a dropdown of the redirect URL fields. Now you have to select a redirect URL here. If you have not added a redirect URL at all, then you will see choose a redirect URL option. The way to add redirect URL is in in the in projects is basically you have to go in here and you can see all the in the developer projects and your app and the auth section. You can see all the redirect URLs that you've added. If you have not added any redirect URLs, I would highly recommend you to go through this DevDoc, learn more about redirect URLs. It has a step-by-step method on what you need to, how you can add the redirect URLs from the command prompt. There is no limit on the number of redirect URLs that you can add. So it's very easy to get the redirect URL added there. Once you add a redirect URL in this section, it would automatically be populated in this, in this dropdown. You have to select a redirect URL in this case. In this case, I just select one redirect URL that I've configured, and I set the sign-in configuration to no partner login required, HubSpot only. So this flow is mainly useful for apps who don't need a login page and who can complete their setup just with HubSpot OAuth. So it makes it— the install flow is much simpler and it's much quicker in that case though. These are the changes that you have to do in the app listing or the listing data side of things. I'm going to show you a demo of what we have to do, like what the customer sees when they try to install an app which has this flow. So this is an app which I created for this flow, and when the customer clicks on install, a new modal pops up. This is the seamless install modal. Model. And you have two steps though. One is connect HubSpot, which is basically the HubSpot OAuth step, and then complete, which is the app installation completion step. So I go through all the permissions and stuff, and I'm going to hit connect app. What exactly happens now is that a new— so this step is where an invisible iframe opens up. And the— what HubSpot does is that HubSpot sends the code and the return URL, and they append it to the install button URL and send it to the app, send the customer to the app. The app takes the code, does the token exchange, and sends the customer back to HubSpot using the return URL that was appended to the— appended as a query parameter to the install button URL. Now, why should the customer be returned back to HubSpot? The main goal of seamless install is to keep the— start the installation process and end the installation process in HubSpot and to keep the customer in HubSpot at the end of the things though. The main reason is that we have seen when people are able to complete the flow quickly. They're able to continue their work in HubSpot and able to activate the app and get the benefits of the app. So it is highly mandatory that the app has to return the customer back to HubSpot. If the app does not return the customer back to HubSpot, then the customer is left in a weird state in HubSpot. We— so we will not close this modal because we are waiting for the app to return it back to the state. So once the app returns it, that's when we complete the HubSpot OAuth step. One, the modal will be open like this, and second time, in some cases, the app will be installed, in others it may not be. And even if it's installed, they will be left hanging in the state where they don't know, okay, app installation is done, so what do I do now? Like, what do I go to my portal? How can I start using my— using the app with HubSpot? So it leads to a very negative customer experience, install experience specifically. So we, as a part of this one, the the customer has to be returned back to the HubSpot after the token exchange, and that is a mandatory step there. In here you have multiple options. One is explore app features, customize app cards, and closing the button. So if the customer wants to browse further apps, they can hit close and stay within the context of the listing. If the customer wants to customize their app cards, they can do that. So this option is only— will be visible for the apps which have configured app cards. If an app doesn't have app cards at all, then this button won't be shown there. And this explore app features is, is the other, the main kind of legacy that you take from here. Now, if there is one difference between embedded marketplace and here in the embedded marketplace, the primary action is to close it so that you can directly start using the app. But you also can also see explore app features too, but the primary action kind of switches in that one though, where the primary action is to close it and take them to what they're doing. Our explore app features will take them to exactly what I do right now. So it'll take them to the feature discovery tab in the connector apps page. Now here you can see I have configured a few feature cards. I've configured feature cards in different way just to show you what all it can do. Again, feature cards are highly customizable onboarding vehicles that many apps don't use. So in this case, the first feature card is one where if an app says that, hey, after the installation, I need the customer to do this in my app. You can directly ask them. The first card can be like, get started, click this app, or you can, the feature name and the description and like the button, the CTA within the button, the name of the button, everything is customizable by the app. I just set it as get started and did it there. And similarly in this one, I just customized, changed the name to begin datafing so that you can, it can lead you to your website to add datafing. I did add a setup guide in here. A setup guide is like when you click learn more, you can add multiple steps. You can add images to that. You can provide like a step-by-step setup guide with videos or images or GIFs, or like it is highly customizable that you can actually guide them on how to activate that feature. Finally, you can also directly trigger like OAuth and other things from here. If you know the URL, you can add the URL that it connects right to it. It may open like a new window. They can connect it with Stripe if that's what the app needs to do. So again, it's super customizable and there are a lot of things that can be done with it. If you're, if you clicked on customize app cards, you would have reached here, which basically where the customer can configure their app cards. If you don't have feature discovery cards, then you will go here, which is where the app overview page, which basically gives you information about the app and record inside, what permissions they have and all those things. So I highly recommend you guys to create feature discovery, all the apps to create feature discovery cards because they are very useful onboarding or activation. How do you want to create feature cards? So you go into your listing editor again, click on app features. And in here I'm just opening up a feature there. You have two settings that is toggled. This will be your default setting. So always your, whenever you create a new feature, your, wherever you want to display the feature, it'll be defaulted to on your app marketplace listing. So this basically means that this feature will show up in your listing, in your app listing as an integration feature. Now we have another toggle which says as a feature discovery card. So if I toggle that on in another section that's coming in, now you can use the same feature, this feature name, description, image from your, from the main feature, or you can decide to do something that's totally different. There are a lot of options that you get from this one, like primary button. You can create a custom button. You cannot have primary button. You can have a primary button. You can link it to someone where you can go take it to different areas within HubSpot. With how-to guide too, you can add an external link to a guide. You can add a video only guide. You cannot add guide, like the configuration, the permutation combination is just there are a lot of things that they can do and you can see the preview in here. And typically our recommendation ideally is that you have both of these toggled on. So you have a feature which is showing up in the, in the integrate, in the app listing in the marketplace. And you also have a feature corresponding feature card for that where the main goal of it is to say how will you activate that feature. Now it may not make sense for all features, but majority of the features, especially if they need some kind of setup, it is definitely, we recommend that you create like feature discovery card for that. And feature discovery cards also provides us information. We can take the information and load it in different places like Resource Center. There are a lot of other options that we can do with that feature card information in the feature cards. So we do recommend feature cards as an onboarding vehicle for that. Going on, so that's it for the demo on seamless install without partner sign-on. The next one I'll talk about seamless install with partner sign-on.