Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Contact Us
  • Home
  • Installation & Developers
  • Extras

Launchpad Standard Install

Updated at February 1st, 2023

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Installation & Developers
    Installing Appcues Installing Appcues Mobile API & Data Troubleshooting Extras
  • User Experiences
    Web Experiences Building Web Experiences Building Mobile Experiences Customization & Styling Targeting Studio Troubleshooting Use Cases FAQ
  • Mobile
    Installation & Overview Building Mobile Experiences Mobile Analytics Troubleshooting Mobile Use Cases
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Use Cases Pro Tips PLG FAQ
  • Integrations
    Integration Documents Use Cases Resources
  • Post-mortem
    System Incidents
+ More

Table of Contents

Installation Process Targeting and Customization Customization Note: Modify the Icon Modify the Copy Change the order the Flows are listed

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. This article describes the behavior of the current version of the Launchpad.

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

Note: 

Any Launchpad style customizations in the Standard install will need to be added directly to your application's CSS, and not in Appcues. 

 

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 support@appcues.com, 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.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Javascript API (Developer)
  • Single-page Application (SPA) Guide (Developer)
  • Appcues Installation Overview
  • Flow Events Reference (Developer)
Appcues logo

Product

Why Appcues
How it works
Integrations
Security
Pricing
What's new

Use cases

User Onboarding Software
Feature Adoption Software
NPS & Surveys
Announcements
Insights
Mobile Adoption

Company

About
Careers
we're Hiring

Support

Developer Docs
Contact

Resources

The Appcues Blog
Product Adoption Academy
GoodUX
Case studies
Webinar Series
Made with Appcues
Appcues University

Follow us

Facebook iconTwitter icon greyLinkedin iconInstagram icon
© 2022 Appcues. All rights reserved.
SecurityTerms of ServicePrivacy Policy
Expand