Launchpad Installation Overview

Please note that Launchpad (formerly known as the "in-app widget" or "announcement center") is available as a feature only in our Growth plans and above.

Appcues Launchpad allows users to access Appcues flows from a notification dropdown within your product. It looks something like this:

Launchpad is a great way to provide in-product tutorials and announcements without intruding upon your user's experience. It also allows your users to replay a flow they've seen previously.

Launchpad is fully customizable via CSS, respects user targeting conditions (just like a normal Appcues flow), and can be configured on a per-flow basis to follow page targeting (see Targeting section below for more) or to always show.

How to install Launchpad

  1. Add an HTML element to your site where Launchpad will live

    //Note that the id can be anything you'd like
    <div id="my-launchpad"></div>
    	
  2. Create a Launchpad instance for the current Appcues visitor with the following JS:
    Appcues.loadLaunchpad("#my-launchpad", {
    	//Optionally specify the position of the content relative to the Launchpad icon. Possible values are as followed: 
    	//	- center (default value, i.e. bottom-center)
    	//	- left (i.e. bottom-left)
    	//	- right (i.e. bottom-right)
    	//	- top (i.e. top-center)
    	//	- top-left
    	//	- top-right
    	position: "left", 
    	// Optionally add a header or footer. This must be HTML.
    	header: "<h1>Tutorials</h1>",     
    	footer: "<p>Your footer here</p>",
    	// And if you'd prefer to use a custom icon rather than the default "bell" icon, you can optionally pass 
            // in an icon as well. Make sure that src is set to the right resource, whether it's in your site's directory or hosted
    	icon: "icon.png"
    });
    	

Targeting and Customization

After the beta is turned on for your account, you'll notice the following options in the UI of the flow settings page. Flows published in your account will not automatically show up in Launchpad. You'll need to explicitly set them to show in Launchpad.

Any flows that are set to show Launchpad, but have already been viewed by a user, will be shown below the 'Nothing new to see here' message. The Launchpad icon will only display the "counter badge" if there is new content that has not been viewed.

Audience Targeting

User targeting rules are respected when determining who will see the flow within Launchpad. You have two additional options when choosing how to publish a flow to Launchpad:

Anytime the Page matches (default): Choose this if you want the flow to only show in Launchpad when the page targeting (i.e the URL where you've indicated this flow should show) matches. 

    • Best used for targeting flows to Launchpad on only one specific page. For instance, if you publish a flow to the /analytics URL path it will only be accessible within Launchpad when users are on pages that match that criteria
  • Always: Choose this if you'd like the flow to always appear within Launchpad - regardless which page a guest is viewing. 
    • Best used to allow flows to be viewed as "notifications", no matter which page the end user is on in your application

ProTip: You can also set the flow to only 'show manually' via Launchpad, and never pop up automatically for any user. To do this, select "Show manually" in your Display settings.

   

Customization

Modify the Icon

By default, we'll add in a bell icon for you, but you can also use your own icon by passing it in to the Appcues.loadLaunchpad SDK function. Check out the installation instructions above for an example 

Modify the Copy

You can add custom css to your page to hide either the date and/or the "nothing new to see here" items you see below. 

Remove the 'Nothing new to see' message: 

li.appcues-nothing-new {   display: none; }


Remove the date

a[data-itemid] time {     display: none; }

NoteIf you decide to use CSS to further modify the look and feel of Launchpad we're all about it, but be sure to style both the 'read' and 'unread' items to ensure that it functions properly

As always, if you have questions on the above, please reach out to us at support@appcues.com, we're happy to assist!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.