Launchpad Installation

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 this CSS to the <head> of the page:

    <link rel="stylesheet" type="text/css" href="//fast.appcues.com/widget.css">
    	
  2. Add this script to the <body>:

    <script src="//fast.appcues.com/widget-bundle.js" type="text/javascript"></script>
    	
  3. Create a Launchpad instance for the current Appcues visitor with the following JS:
    // This is your widget instance.  var widget = AppcuesWidget(Appcues.user());
    	
  4. Initialize Launchpad to bind itself to an element on your site.
    // Some HTML element on your site <div id="my-widget"></div>
    	
    // JS to bind Launchpad to an element on your site widget.init("#my-widget", {     // Optionally specify the position of the content relative to the widget icon.     // Possible values: "center" (default; alias "bottom", "bottom-center"), "left" (alias "bottom-left"),     // "right" (alias "bottom-right"), "top" (alias "top-center"), "top-left", "top-right"     position: "left",     // Optionally add a header and/or footer.     header: "<h1>Tutorials</h1>",     footer: "<p>Your footer here</p>" });
    	

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 with the   .appcues-widget-icon class:

<div id="my-widget">     <div>         <img src="/cat-icon.png" />     </div> </div>

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

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!

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