> ## 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.

# Buttons

> The Buttons feature is a powerful tool designed to enhance user interactions within your platform. It allows you to strategically place actionable elements.

## Overview

The **Buttons** feature is a powerful tool designed to enhance user interactions within your platform. It allows you to strategically place actionable elements like call-to-action buttons that guide users toward completing key actions.

## Use Cases

* **Display a "New" Label**: Highlight new features or updates.
* **Subscribe**: Prompt users to sign up for newsletters or updates.
* **Request a Demo/Register for Webinar**: Provide easy access to demos or webinars.
* **Contact Sales**: Direct users to sales for more info.
* **Download Resource**: Offer quick access to resources like eBooks.
* **Start Free Trial**: Invite users to try your platform for free.
* **Get Started**: Guide users in setting up their account or process.
* **Upgrade Now**: Encourage users to upgrade to a higher plan.

  <img src="https://mintcdn.com/userpilot/i_hL61WZW7vm9Xm1/Screenshot2025-07-10at12.27.54.png?fit=max&auto=format&n=i_hL61WZW7vm9Xm1&q=85&s=49838dcadf6d2ad13e30f3c820ea63ba" alt="" width="1048" height="848" data-path="Screenshot2025-07-10at12.27.54.png" />

### Creating a Button

Adding a button is simple and straightforward. Follow these steps:

1. Go to the page where you want the button to appear and open the Userpilot Chrome extension builder.
2. Click on **"Start here"**, then select **Create a Spotlight > Create a Button.**
3. Choose the button design and name it accordingly. Explore further settings to customize as needed.

   <img src="https://mintcdn.com/userpilot/i_hL61WZW7vm9Xm1/Screenshot2025-07-10at12.16.11.png?fit=max&auto=format&n=i_hL61WZW7vm9Xm1&q=85&s=8f9ca4064d7f4b36abf3a67e8ab24964" alt="" width="1172" height="804" data-path="Screenshot2025-07-10at12.16.11.png" />

### Button Types

Userpilot offers several button types to suit different design preferences:

* **Primary Button**: A filled background button that stands out.
* **Outline Button**: A button with a border but no fill.
* **Text Link**: A button that functions like a simple link with text.

<img src="https://mintcdn.com/userpilot/i_hL61WZW7vm9Xm1/Screenshot2025-07-10at12.22.28.png?fit=max&auto=format&n=i_hL61WZW7vm9Xm1&q=85&s=1ca03203c6b6cd1e69bc00c05842e4f8" alt="" width="694" height="1052" data-path="Screenshot2025-07-10at12.22.28.png" />

###

Actions

Define what happens when the button is clicked. Available actions include:

* **Do Nothing**: The button remains interactive but triggers no action.
* **Go to URL**: Directs the user to a specified URL.
* **Trigger Flow**: Initiates a Userpilot flow.
* **Trigger Survey**: Opens a survey upon click.
* **Trigger JavaScript**: Executes a custom JavaScript function.
* You can also configure the button to update a user property or track events, similar to the flow action settings.

<img src="https://mintcdn.com/userpilot/KTNRMPjoIQw4COFA/in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at1.44.06PM.png?fit=max&auto=format&n=KTNRMPjoIQw4COFA&q=85&s=8233b9e04e3383772c187dc7eac28f86" alt="" width="560" height="932" data-path="in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at1.44.06PM.png" />

### Embedding Options

Buttons can be placed within the app in the following ways:

* **Overlay**: The button appears as a floating element above the target content.
* **Inline**: The button is inserted directly within the application’s HTML, appearing as part of the page content.
* **Allow Content Overlap Toggle**:
  * **Disabled**: The button pushes content to make space for the spotlight.
  * **Enabled**: The button overlays the content without expanding it.

<img src="https://mintcdn.com/userpilot/KTNRMPjoIQw4COFA/in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at1.45.02PM.png?fit=max&auto=format&n=KTNRMPjoIQw4COFA&q=85&s=286b24174ed7f8218f637d7c82b0c036" alt="" width="562" height="506" data-path="in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at1.45.02PM.png" />

### Frequency

Once you've created and edited your Banner, you can select the frequency of the Banner in the 'Frequency' tab. You will find two options:

* **Once**:  This will trigger the Banner one time only, and it will be dismissed once the user interacts with it.
* **Everytime**: The Banner will always appear in your web app.

  <img src="https://mintcdn.com/userpilot/KTNRMPjoIQw4COFA/in-app-engagement/spotlights/assets/images/Screenshot2025-03-11at5.02.43PM.png?fit=max&auto=format&n=KTNRMPjoIQw4COFA&q=85&s=bc5f31daa35dceab98492f154da33cec" alt="" width="540" height="204" data-path="in-app-engagement/spotlights/assets/images/Screenshot2025-03-11at5.02.43PM.png" />

### Design Tab

The Design tab allows for customization of the button’s visual elements, such as color, size, and borders. Key settings include:

* **General and Color Settings**: Adjust the button’s overall color and text style.
* **Border Settings**: Customize the button’s border width, color, and shadow effects.

<img src="https://mintcdn.com/userpilot/KTNRMPjoIQw4COFA/in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at1.45.52PM.png?fit=max&auto=format&n=KTNRMPjoIQw4COFA&q=85&s=4bf1c412655e8cb1b6974d048ce32f70" alt="" width="552" height="624" data-path="in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at1.45.52PM.png" />

### FAQs

<AccordionGroup>
  <Accordion title="Can I have more than one button on a single page?" defaultOpen="false">
    Yes! You can place multiple buttons on the same page in different positions or throughout the user journey.
  </Accordion>

  <Accordion title="What happens if I select 'Do Nothing' for the button action?" defaultOpen="false">
    If you choose the "Do Nothing" action, the button will still appear clickable, but it will not trigger any behavior when clicked. It's useful if you just want to provide a visual cue or placeholder.
  </Accordion>

  <Accordion title="What is the difference between Overlay and Inline button embedding?" defaultOpen="false">
    The **Overlay** button floats on top of content, and is typically used for pop-up messages or CTAs that should be visible on top of existing elements. **Inline** buttons, on the other hand, are placed directly within the content, seamlessly integrating with the page layout.
  </Accordion>
</AccordionGroup>

<Frame>
  [**For any questions or concerns please reach out to support@userpilot.com**](mailto:support@userpilot.com)
</Frame>
