Creating your first experience end-to-end
Ok so you’re a get-your-hands-dirty kind of person. We like your style.
This guide will walk you through how to go from a raw account (nothing done besides set your password) to an experience that is shipped for your users. Note that the purpose of this guide is to showcase the whole “CommandBar pipeline”, not explain a particular experience in detail. We’re going to focus on shipping a nudge, but the same principles apply to other CommandBar experiences.
What are we building?
We’re going to create a Nudge - a proactive way to help your users (by gently nudging them in the right direction). For this tutorial, we’ll create a nudge with a relatively humble goal: to show off a new feature using a product tour.
Adding our content
CommandBar experiences are created in the Dashboard. You can find the Dashboard here.
Once in the Dashboard, navigate to the Nudge section on the left. Notice the other “Experience” tabs — check these out if you want to build a different experience.
Select Product Tours from the Nudge section. From here, click New to create your first Nudge. You can select a template if you want, but we’ll start from scratch.
Add a title and a content body on the left side of the Dashboard. On the right side of the screen, you’ll see your nudge automatically update. For this first step, we’ll announce the feature.
Now let’s create a second step that embeds a video and actually points out the feature. This could be a video you record explaining the feature (people love seeing talking heads). To do this, click the “Create step” button on the left. Now to add the video component click hover over the image beneath your nudge content and select “Video”. From here, you can paste a YouTube or Loom link. If you need one, here’s one for free.
The primary button is our nudge’s call-to-action, the main thing we want users to do after seeing this nudge. For now, let’s just keep it simple and make the primary button close the nudge.
When you’re done, adjust the second step’s form factor to “Pin”. This will allow us to position the nudge next to the feature in question, to show the user where it is. After you change the step’s form factor, you’ll see a new field appear called “Pick target” that is disabled. This is because you need to open up the experience in your product to select the element you want to position the nudge against. Stay tuned for that step.
The right side of the page will show you what your nudge looks like, and you can also use it to preview the basic flow of your experiences. For example, click back to the first nudge on the left. Now, click the button in the nudge on the right. You’ll see it advances the nudge to the next step, just like it would in your app!
Ok, now don’t forget to save your nudge! Otherwise, you’ll have to run this gauntlet again.
Making the nudge look nice
Ok rude? We think it looks pretty nice already?
Just kidding. You probably want the nudge to match your product’s aesthetic. To do this, navigate to the “Theme” section of the Editor. It’s on the left, on the bottom this time. From here, you can create a “Skin”, which is a collection of styles. If you’re on a paid plan, you’ll have access to more styles. If you’re on a free plan (peasant!), you can still adjust things like the accent color and font that we use.
Note that Skins are global; they apply to every experience you create.
When you’re done playing with your theme, you can see how your nudge looks on the right side.
Try it out in situ
We’re basically done with creating the nudge now (like we said, we didn’t really take the training wheels off for this one). But there’s still a few housekeeping items we should take care of. For one, we haven’t seen what the nudge will actually look like in your product! It might look fine and dandy on top of that cool grid thing on the right of the Dashboard, but will it pop in situ?
Enter: the CommandBar Extension. The extension is what you’ll use to preview CommandBar experiences in your product. To get there, hit the little Play button next to the Save button on the top of your nudge. This will prompt you to download the extension. Or you can be a rebel and do so from here.
Once installed, you can return to the Dashboard and click the preview button again. Now, we’re going to ask you where you want to preview the experience. Tell us which URL, and then click “Preview”. This will open up the URL and also open up the experience. Look pretty snazzy?
Ok it may look snazzy, but the second step of the nudge will be floating horribly in the middle of your site. We forgot to figure out how to position it! This is the second purpose of the extension: it allows you to edit experiences inside your product, which is handy:
- When you want to quickly prototype how something is going to look (instead of going Dashboard —> app —> Dashboard —> app).
- You need access to your product when editing, like for positioning pin nudges.
To set the pin nudge, open up the extension by clicking the icon in your toolbar and selecting “Open Editor”. From here, you can select the Pick target button that used to be disabled, and select the element you want to use as the anchor for the pin nudge.
Hit preview again to make sure everything is as you desire.
Targeting the nudge
As of right now, if we were to ship this nudge to users (don’t worry, we haven’t gotten that far yet) it would show up to all users immediately. That sounds annoying, and CommandBar is designed to be non-annoying! Disaster!
To avoid this catastrophe, you’ll want to set some targeting rules. These determine who is going to see the nudge, where it will show up, and exactly when the user will see it.
You can set targeting rules from either the Dashboard or the Studio. Pop open your nudge in your venue of choice, and select Targeting. From here, you can specify some conditions. For example, let’s show this nudge to users when they visit a specific page, and let’s only show it when we don’t think we’re going to interrupt the user, using the “smart delay” when trigger.
Ready for take off
We’re ready to ship our nudge to users. To ship, hit the orange Draft toggle at the top of the nudge. This will “publish” your nudge.
Psych. This actually does nothing, yet. Why? You haven’t installed CommandBar in your app. To do that, you’re probably going to need a developer, and you can send them these instructions.
We won’t repeat installation instructions here, but know that once CommandBar is installed for your users, the only thing that changes about this process is that hitting publish actually publishes the experience. Otherwise, you can follow the same pipeline to ship CommandBar experiences just as you did here.
Recap
To summarize, when creating CommandBar experiences, you can follow this generic pipeline:
- Create the experience and add content
- Adjust theme as necessary (you might not need to do this after setting up your theme initially)
- Preview in your app using the extension
- Add targeting
- Publish 🚀