In-App Widget Installation

Please note that in-app widget targeting is available as a feature only in our Growth plans and above.

The in-app widget allows users to access Appcues flows from a notification dropdown within your product. It looks something like this:

The widget 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.

The widget 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.

See the widget live in this demo (see the header bar).

How to install the widget

  1. Add this CSS to the <head> of the page:

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

    <script src="//" type="text/javascript"></script>
  3. Create a widget instance for the current Appcues visitor with the following JS:
    // This is your widget instance. 
    var widget = AppcuesWidget(Appcues.user());
  4. Initialize the widget to bind itself to an element on your site.
    // Some HTML element on your site
    <div id="my-widget"></div>
    // JS to bind the widget 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 the notification widget. You'll need to explicitly set them to show in the widget.

Any flows that are set to show in the widget, but have already been viewed by a user, will be shown below the 'Nothing new to see here' message. The Widget 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 the widget. You have two additional options when choosing how to publish a flow to the widget:

  • Anytime the Page matches (default): Choose this if you want the flow to only show in the widget when the page targeting (i.e the URL where you've indicated this flow should show) matches. 
    • Best used for targeting flows to the widget on only one specific page. For instance, if you publish a flow to the /analytics URL path it will only be accessible within the widget when users are on pages that match that criteria
  • Always: Choose this if you'd like the flow to always appear within the widget - 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 the widget, and never pop up automatically for any user. To do this, select "Show manually" in your Display settings.



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 class="appcues-widget-icon">
        <img src="/cat-icon.png" />

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 the widget 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, we're happy to assist!