Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.userpilot.com/llms.txt

Use this file to discover all available pages before exploring further.

Card allows you to place Userpilot content directly inside your product UI, so guidance, nudges, and key actions appear exactly where users need them.

​
Overview

Card introduces a more seamless way to deliver in-app experiences by integrating them into your existing layout. Rather than floating on top of the UI (like modals or slideouts), embedded components live within the page structure, aligned with your design and user journey. Key capabilities include:
  1. Native, inline placement within your UI
  2. Flexible styling to match your design system
  3. Smart targeting and placement rules
  4. Responsive behavior across layouts
  5. Built-in analytics to track engagement (views, clicks, interactions)

​
Use Cases

Contextual Onboarding: Guide users step-by-step within the interface instead of redirecting or interrupting them. For example, showing a Card next to a feature they need to set up. Feature Discovery: Highlight new or underused features directly inside relevant pages, right when users are most likely to engage. Product Education: Provide helpful tips, best practices, or explanations inline, reducing confusion without overwhelming the user. Persistent Guidance: Unlike temporary overlays, embeds stay visible within the UI, making them ideal for ongoing guidance or reference points. Contextual Social Proof (Testimonials): Use Embed Cards to surface short, relevant customer quotes directly within the product experience. This works best when tied to a specific feature or action, for example, showing how another customer succeeded using that exact feature. Upgrade Nudges (Expansion): Use Embed Cards to gently encourage users to upgrade when they’re close to experiencing value. For example, when a user hits a limit or tries to access a premium feature, an embedded Card can highlight the benefit of upgrading, paired with a clear CTA.

​
Create Cards in Userpilot

  1. Open the Userpilot Chrome Extension and navigate to the page where you want the card to appear.
  2. Click “Start here” and select Embed and then Card
  3. Name your card and choose your preferred theme
Screen+recording+2026 05 03+at+14 14 46 1
  1. Once you select Card, you can add up to 4 Cards within the same Embed experience. You can:
    1. Place each Card on different elements across your product
    2. Or group multiple Cards on the same element
    3. Arrange them vertically (stacked) or horizontally (side-by-side)
Add New Card
This gives you the flexibility to design simple or more structured layouts depending on your use case.

​
Card settings and design

​
Settings

  1. Display (Default vs Flexbox)
The Display option controls how the Card layout behaves inside the selected element. By default, the Card follows the layout of the selected element. If the element already uses flex, the Card will inherit that behavior; otherwise, it will behave like a standard block. This is best when you want the Card to blend naturally with your existing UI without additional configuration. Flexbox lets you control how Cards are arranged within the selected element. You can define whether they appear horizontally or vertically and ensure consistent spacing and alignment. This is especially useful when working with multiple Cards and you want a more structured and organized layout.
  1. Direction
Vertical: Vertical arranges multiple Cards on top of each other in a stacked layout. This works best when you have more content to show or when you want to guide users step-by-step in a clear, structured way. Horizontal: Horizontal arranges multiple Cards side-by-side in a single row. This is useful for more compact layouts, quick actions, or when you want to present options or information next to each other.
  1. Position
Defines where the Card appears relative to the selected element.
  1. Placement
Select where the Card will appear: top or bottom of the element. You can further fine-tune the placement using margin adjustments to suit your design preferences.
  1. Element
Defines where the card will appear in your UI. By default, it attaches to the selected element (e.g., a button). You can reselect a different element at any time, or choose one of its parent levels if you want the card to be positioned relative to a broader container instead of the exact element.
  1. Margin
Margins control the spacing around each card. They add space between the card and the selected element, and also create spacing between multiple cards when more than one is added to the same element.
  1. Z-index
Use it to decide which card appears in front when elements overlap, higher values bring the card forward, while lower values push it behind.
Add New Card3

​
Design

Customize your Card’s look in the Design tab:
  1. Theme: Select from different themes to change the overall design of your Card.
  2. Background: Choose a background color for the Card, or upload your own image to use as the background. Userpilot will then apply your selection to the entire Card.
  3. Close Button: Enable a close button to dismiss the Card. You can control its behavior with three options:
    1. Dismiss: The Card will reappear if the frequency is set to “Every time”.
    2. Dismiss and never show again: The Card will not trigger again.
    3. Dismiss and show in the next session: The Card will reappear after a new session (defined after 30 minutes of inactivity).
  4. Size: Size settings control how the card fits in the layout. Full width and Auto height let it match the selected element, making it feel more native, but you can uncheck them to customize the width and height manually.
  5. Responsive Design: ensures it adapts well across different screen sizes.
  6. Box Settings: Adjust the width, corner roundness, border settings, and the shadow to refine the look of your Card.
Dessign 1
You can also localize the cards if you’re targeting international users. Once you’re happy with the design, click Next to configure targeting, triggering, audiences, and frequency.