Using & Installing the In-App Widget

Please note that in-app widget targeting is available as a feature flag. 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. Its also one of the most popular ways to allow your guests to replay a flow that they've seen before.

The widget is fully customizable to look like your application, 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).

Want to see the widget live? Here is a  link to a totally fake demo-app that has our widget in the toolbar so you can check it out.


..If you're already convinced, let's get it installed on your application!

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

 

Targeting and Customization

After the beta is turned on for your account, you'll notice the below options in the UI of the flow settings page. Flows published in your account will not automatically show up in the notification widget.

Any flows that are set to show in the widget, yet 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 beacon if there is new content that has not been viewed. 

Audience Targeting

You have two 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.

Customization

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

Modify

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 support@appcues.com, we're happy to assist!

Still need help? Contact Us Contact Us