# Floating button
### **What is the Floating Button?**
The **Floating Button** is a modern, non-intrusive display option in the AOV Free Gift app. It appears as a small, persistent icon on your storefront. When clicked—or triggered automatically—it slides open a gift selection panel without interrupting the shopping experience.
It’s a sleek alternative to traditional pop-ups or congratulatory bars, offering a smoother and more elegant way to promote gifts, experiences. This offers an alternative to traditional pop-ups or congratulatory bars.
{% hint style="success" %}
**Who can use this feature?**
The floating button is available for all users.
{% endhint %}
### Why use a Floating Button?
Less disruptive: Keeps your storefront clean and unobtrusive
Maintains the shopping flow by avoiding intrusive pop-ups.
Modern UX: Promotes gifts without disrupting the browsing flow
Matches current ecommerce trends with interactive, slide-in elements.
Highly customizable: Creates a smooth, mobile-friendly customer experience
Easily adapts to store branding and layout.
Consolidates offers: combines and organizes multiple eligible offers into a single
Supports multiple active campaigns in one unified panel.
Increases engagement: Boosts visibility and engagement for your campaigns
Encourages interaction without pressuring the shopper.
### How to set up:
{% hint style="info" %}
To give merchants **full flexibility and control**, the Floating Button feature is configured in two distinct places, each serving a different purpose:
* **Campaign ( Display setting )**
This section lets you define the message content shown inside the Floating Panel for each campaign. It’s campaign-specific because different campaigns may have different offers, tones, or messages.
* **Widget Styling (Gift alerts on qualification)**
This section controls how the floating button looks across your storefront, regardless of the campaign. It ensures consistent design and branding across your store.
{% endhint %}
**Step 1: Navigate the Floating Button on the Campaign setting screen**
Select the **Display setting** section on the bar, then choose **Floating button** (third option). This will activate the floating gift panel on your storefront instead of the pop-up or congrats bar.
**Step 2: Customize Floating Button Text**
Once selected, configure the following text that will appear on the floating panel.
**Floating button**
* Sets the text that appears on the floating button. Keep it short and action-driven to grab attention.
**Title**
* Sets the header text in the floating panel once it opens. You should highlight the excitement and exclusivity of the offer.
**Description**
* Sets the text that appears below the title in the gift panel to explain what users should do.
**Variant Picker (Optional)**
* Toggle it **on** if your gift products include variants and you want to allow customers to select variants and quantities directly from the floating panel.
Once complete, click **Save** and publish the campaign.
#### Step 3: Navigate the Floating button widget
Go to your AOV Free Gift app dashboard. After creating at least one campaign, you can set up the floating button.
In the **Widget styling** section, select **Floating button**, then choose Customize the button to start setting it up.
*\*From the **Display setting section,** there's a shortcut you can click on the **Edit Widget** button to navigate to the Customize Widget section.*\
\
**Step 4: Set up the Floating button's style**
This section controls the **appearance** of the floating button and panel across your storefront.\
These settings apply store-wide, not just to a specific campaign.
**Display behavior:**
* **Auto-open panel when conditions are met:** Toggle to enable the panel to automatically slide in when a customer qualifies for a gift. Use this if you want the gift to appear without requiring a click.
* **Display location:** Choose where the button appears on screen. There are two available options, left and right.
**Themes:** Select a **theme preset** to apply consistent color styles to your widget.
**Widget styles:**
* **Floating button:** Toggle on the **Gradient banner background** to use a two-color gradient for the button. If disabled, the button will use a solid background. You can choose the color of the background and the text
* **Icon:** Choose one icon to appear on the button
* **Popup:** Toggle on the **Gradient banner background** to apply gradient styling to the panel’s header background. If disabled, the panel will use a solid background. Select the text color for the header and sale price as you want, too.
* **Add To Cart button:** Set the background and text color for the “Add to Cart” button inside the panel.
#### **Step 4: Set up the Floating button's content**
* **'Add to cart' button:** Customize the text on the button according to the messages you want to deliver.
* **'Gift(s) selected' text:** Customize the selected gift text above the button according to the messages you want to deliver.
**Step 6: Preview and Publish**
Utilize the preview feature on desktop and mobile versions to visualize how your customizations appear in real time
Test the Floating button on your storefront to ensure it displays correctly and functions as expected. This is an example of the floating button displaying on your store:
The Floating Button provides a clean, conversion-friendly alternative to conventional pop-ups. It empowers merchants to promote gifts in a subtle, modern format that enhances the shopping journey. Try it out and turn passive shoppers into gift-grabbing customers with just one click!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.aov.ai/set-up-gift-recieving-method/floating-button.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
