Preview and Test your Banner
Test your Banner using Preview mode, a staging environment, or internal testers before going live.
Table of Contents
Test your Banner before releasing it to your full audience. Verify that it renders correctly, appears on the right pages, targets the right audience, and handles dismiss behavior as expected. There are three testing methods — use whichever fits your setup.
Choose a testing method
| Method | Best for | Tests targeting? | Tests personalization? | Requires staging? |
|---|---|---|---|---|
| Preview in the Builder | Quick visual check of layout and content | No | No | No |
| Publish to staging | Full end-to-end testing in a safe environment | Yes | Yes | Yes |
| Publish to internal testers | Full testing when you don't have staging | Yes | Yes | No |
Preview in the Builder
Use this to visually check how the Banner looks on your page.
- Open the Banner in the Builder.
- Click Preview in the top bar. The Builder renders the Banner on your page as an end user would see it.
- Verify:
- The Banner appears at the top of the page in the correct display mode (inline or overlay).
- Text blocks, buttons, and links display correctly.
- The dismiss X appears (if dismiss behavior is enabled).
- If you chose slide-in animation, the Banner animates in from the top.
Preview does not test page targeting, audience targeting, user property personalization, or button actions that trigger Flows. For those, publish using one of the methods below.
Publish to a staging environment
This is the most thorough testing method. It puts the Banner live on an internal environment where real targeting, personalization, and dismiss behavior all work — without any risk to your end users.
- Add your staging domain to the Available Domains list. Go to Settings > Domains and enter your staging URL (e.g.,
staging.yourapp.com). You need admin permissions. See Manage Available Domains for details. - Open the Banner's settings page and go to Page Targeting.
- Under environment targeting, select your staging domain only. Deselect production domains so end users don't see the Banner during testing.
- Click Publish.
- Log in to your staging environment as a user who matches the audience targeting.
- Navigate to a page where the Banner should appear and run through the verification checklist below.
- When testing is complete, update the environment targeting to include your production domain and republish.
Publish to internal testers
If you don't have a staging environment, publish the Banner to production but restrict the audience to your team.
- Open the Banner's settings page and go to Audience Targeting.
- Select Specific users and add a condition that isolates your testers:
-
By email domain:
email→ contains →@yourcompany.com -
By specific user IDs:
userId→ equals → your test user's ID. To find your user ID, open the Appcues Debugger on any page where Appcues is installed — your user ID is displayed at the top. - By segment: Create a "QA testers" segment with your team's user IDs or email addresses, then select Users in a Segment → your QA segment.
-
By email domain:
- Click Publish.
- Log in to your production app as one of the targeted testers.
- Navigate to a page where the Banner should appear and run through the verification checklist below.
- When testing is complete, update the audience targeting to your intended end-user audience and republish.
While this method puts the Banner live in production, only users matching your restrictive audience see it. No end users are affected as long as your targeting conditions are correct.
What to verify during testing
After publishing to staging or internal testers, walk through these checks systematically.
Appearance and layout
- The Banner renders at the top of the page — not floating in the middle or hidden behind other elements.
- The display mode works as expected: Inline pushes page content down; Overlay floats above it.
- If Sticky is enabled, the Banner stays pinned to the top of the screen as you scroll.
- Text blocks are readable and buttons are clickable.
- The Banner's background color, border, and spacing match your brand.
- If you chose Slide-in animation, the Banner animates in smoothly from the top.
Personalization
- If you used user property tokens (e.g.,
{{name}}), confirm they render the correct values for your test user. - If a property value is missing for the test user, check how the Banner handles it — blank space or a fallback.
Page and audience targeting
- Navigate to a URL that should show the Banner — confirm it renders.
- Navigate to a URL that should not show the Banner — confirm it's absent.
- If possible, log in as a user who does not match the audience targeting and confirm the Banner doesn't appear.
Button actions
- If a button is set to Go to a URL, click it and confirm it opens the correct destination (and in a new tab, if configured).
- If a button is set to Trigger a Flow, click it and confirm the Flow launches.
- If a button tracks a custom event, check Events Explorer to confirm the event was recorded.
Dismiss behavior
- If Allow this banner to be dismissed is enabled, click the X and confirm the Banner disappears.
- Reload the page and confirm the Banner does not reappear — dismissed Banners stay dismissed permanently.
- If dismiss behavior is disabled, confirm there is no X button and the Banner persists across page loads.
Reset your profile for repeated testing
After dismissing a Banner during testing, it stays dismissed for your user ID. To test the Banner again, reset your user profile.
- Go to the Users page in Studio.
- Search for your test user.
- Open the user's profile and click Reset User Profile.
This resets all Flows, experiences, and tracked events for that user. The next time the user loads a page with Appcues installed, their profile is recreated in an empty state.
This resets everything for the user — not just the Banner you're testing. All Flow history, event history, and experience interactions are cleared. If you're testing alongside other live experiences, be aware they'll also reset.
- Return to your app and reload the page. The Banner should appear as if the user is seeing it for the first time.
- Walk through your test cases again.
If something isn't working during testing
- Banner doesn't appear after publishing. Open the Appcues Debugger and verify all installation checks pass. The most common causes are a domain mismatch (published to staging but testing on production, or vice versa) or an audience condition your test user doesn't meet.
-
Banner appears on the wrong pages. Check your page targeting URL rules for overly broad patterns. A rule like "contains
/app" may match more URLs than intended. -
Personalization tokens show raw curly braces. The property name in your Banner (e.g.,
{{name}}) doesn't match what your app sends to Appcues. Open the Debugger, check the user properties listed there, and confirm the exact property name and casing. - Button doesn't trigger a Flow. Confirm the target Flow is published and if it starts with a Tooltip or Hotspot confirm the elements exist on the current page. If the button is configured to trigger the Flow on a different URL, confirm the redirect happens first.
-
Banner doesn't reappear after profile reset. Make sure you reloaded the page after resetting the user profile. The reset takes effect on the next
Appcues.identify()call, which typically fires on page load. If it still doesn't appear, check that the user's refreshed profile still matches the audience targeting — the reset clears properties, so property-based conditions may no longer match until properties are re-sent.
If it's still not working, collect:
- Banner ID (from the URL on the settings page)
- User ID of the test user
- The URL where you're testing
- Screenshot of your page and audience targeting settings
- Screenshot of the Debugger showing installation status
Then contact Appcues support.