How to Use & Install the In-App Widget

Please note that in-app widget targeting is in beta. To enable this feature in your account, please contact support@appcues.com

Belovedly known as "taco" within confines of AppcuesHQ, our in-app widget allows users to access Appcues flows from a notification dropdown within your product. You've probably seen the widget in our own application:

The widget is a great way to provide in-product tutorials and announcements without being overly intrusive of the user experience. The widget is fully customizable to look like your application, respects user targeting conditions (just like a normal Appcues flow), and can be configured to follow page targeting:

  • Respect page targeting (Include only when the URL matches): 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 with that exact path. 
  • Do not respect page targeting (Include in all widgets): Used for allowing modals to be viewed as "notifications", no matter on which page the end user is.

These options can be selected on the Settings page on a per-flow basis.

How to install the widget

1. Include these scripts within your app:

CSS goes in the <head> section.

<link rel="stylesheet" type="text/css" href="//fast.appcues.com/widget.css">

Javascript for the <body> tag.

<script src="//fast.appcues.com/widget-bundle.js" type="text/javascript"></script>

2. Create a widget instance for the current Appcues visitor.

// This is your widget instance.
var widget = AppcuesWidget(Appcues.user());

3. Initialize the widget to bind itself to an element on your site.

<div id="my-widget"></div>
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>"
});

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" />
    </div>
</div>

How to Publish Notifications

Flows published in your account will not automatically show up in the notification widget. Any tutorials that have already been viewed by a user will be shown below the list of "unread" tutorials. You have two options when choosing how to publish a flow to the widget:

The first option will cause the flow to only show up on pages where the page targeting matches. The second option will cause the flow to  always appear within the widget. The default value is for the widget to respect page targeting for a particular flow.

You can also set the flow to only show in the Widget and never show automatically to a user: 

Still need help? Contact Us Contact Us