Once you've made the decision to utilize Launchpad, you can decide which installation method you'll want to use depending on how far you want to customize your Launchpad. The Standard Launchpad Install offers these characteristics:

• Ease-of-implementation (make use of our boilerplate installation codes!) 
• LIMITED customization (want full customization capabilities? Try our Custom Launchpad Install!) 
• Quick support context if needed

Installation Process

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 feature is turned on for your account, you'll notice new 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. 

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 into 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;
}

Remove the count of 'unread' flows

.appcues-widget-icon:after {
	display: none !important;
}

Hide the Launchpad icon when there’s nothing new to see

.appcues-widget-icon[data-appcues-count="0"]::after {
    display: none;
}

Add a drop-shadow (this is an example, feel free to change the optional parameters to match your brand: offset-x offset-y blur-radius color)

.appcues-widget-dropdown {
	filter: drop-shadow(4px 4px 3px #D7D7FF);
}

Note: If 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 [email protected], we're happy to assist!

Change the order the Flows are listed

The Launchpad currently uses the published flow order as flow priority. To adjust the order of the flows in Launchpad republish the flows, the most recently published flow will be at the top of its section (unseen vs seen) and the least recently published flow at the bottom of the list.