---
title: "Add a floating action button"
slug: "/help/demos/edit/structure/floating-button"
last_updated: "2026-04-15T22:03:25Z"
zendesk_id: 32067952956435
zendesk_url: "https://help.walnut.io/hc/en-us/articles/32067952956435-Add-a-Demo-Floating-Button"
locale: "en-us"
category: "Getting Started"
section: "Designing Interactive Demo Experiences"
product: "demos"
topic: "edit/structure"
displayed_sidebar: "demosSidebar"
sidebar_position: 17
---

## **Overview**

The **Demo Floating Button** adds a clickable call to action across all screens in a template.

This gives viewers a clear next step while they are exploring the demo, whether that means opening a lead form, visiting an external page, booking time, or moving into another resource.

-   You can only have **one** Demo Floating Button per template.
-   The button color uses the **accent color** defined in your guide style settings.

:::note[Why teams use it]

The Demo Floating Button helps turn passive viewing into action by giving viewers an always-available next step without forcing them to leave the experience too early.

:::

For more ways to add interactivity with guides, see [**Create Guided Demos**](/help/demos/edit/guides/guided-demos).

---

## **Open the Demo Floating Button Settings**

The Demo Floating Button is managed from the **Guides** settings panel inside the template editor.

1.  From the right-hand toolbar, click the **Guides** icon. This opens the **Guides** pane. Then click the **gear** icon to open the available settings.   
![Guides icon in the Walnut Editor](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeUszeHYlAfx9R4J6YcQvxI_YalwDEHZSZBzZ0kH1JL9Nklm9ahbXfMY9U8yAP9qqx8RTTTR9WIqhJZCEV34LDSbHRoJWJ_JEPlridYxgFbjqaEPZ2h4wgimcNfsEyNh_Vc6OmW0PMr-RpSXE1LJtuL35cq?key=kPspBhHze6QZBlJGZEIyBQ)   
![Guides settings entry point in Walnut](https://lh7-rt.googleusercontent.com/docsz/AD_4nXf8or_ubXF2B1wV4s7QgVUAShfARnPNoR1vVcoqTYtKilEN18JVn5GjbfXacRu8weqvrS8Q-lew44kWfTNWERUsSN2assLQcZOn7GFfhwHg_xMysxAtSMuvX-5r0bxOEh85Kp_ipOJ4dyBxHcnJ4qs2m64T?key=kPspBhHze6QZBlJGZEIyBQ)

1.  Select **Demo Floating Button**.   
![Demo Floating Button option in Guides settings](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcbZsMXVvENbniUNKPN5vTW0jXvp0ZM8e_MuZYL0u_nfzUKvkXck5s3hB5H22r_veJYx-62_kO6HZYy1oUVcUCxJ1oKpwjf_aBMI6RARQOsoK9zUSnc6YUaO-9k3EOYTsrcgfrMCW5NxlGiepI04AEjB5s?key=kPspBhHze6QZBlJGZEIyBQ)

---

## **Activate the Demo Floating Button**

![Demo Floating Button settings in Walnut](https://lh7-rt.googleusercontent.com/docsz/AD_4nXciKYgQo6Fv_cpQXGMiYLxU0GgVyR2LsXj1T96ZROZcMbTLmtT0Yl_4_D76WuKdnNXmJfjyhCaviLVuPDwSHwyTfZbM5h-BTs3Hxk5psdEUzeJJ-TWqUopE1ff9hxEX-HXXRXSyRXb3roROlOuMmJA6oaA?key=kPspBhHze6QZBlJGZEIyBQ)

Once you open the settings, you can enable the button and define the action viewers should take.

1.  Set the **Enabled** toggle to **ON**.
2.  Enter the **call-to-action text** and add the destination link, such as a lead form or external URL.
3.  Choose the **position** where the button should appear on screen.
4.  Click **Done**. The floating button will now appear across all demo screens in that template.

:::warning[Best practice]

Keep the CTA action-focused and specific. Buttons like **Book Time**, **Talk to Sales**, **Start Trial**, or **View Pricing** are usually more effective than generic labels.

:::

To add lead forms to a demo, see [**Embedding Lead Forms**](https://help.walnut.io/hc/en-us/articles/21223322749075-Embedding-Lead-Forms).

---

## **Add Context to the Button Link with URL Parameters**

You can make the Demo Floating Button more powerful by adding **URL parameters** to its destination link.

This makes it possible to pass helpful context into the next step, such as campaign source, or other tracking values.

It is especially useful when the button links to a lead form, booking page, follow-up workflow, or external landing page that should reflect more context from the demo experience.

:::note[Why this matters]

URL parameters can help prefill forms, personalize follow-up experiences, support attribution tracking, and connect demo engagement more clearly to downstream workflows.

:::

For example, you might use URL parameters to pass:

-   Campaign or UTM source
-   Custom identifiers for routing or reporting
-   Demo name
-   Demo ID

Learn more in [**Track and Identify Viewers with URL Parameters (Email, UTM, and Custom)**](/help/demos/personalize/variables/url-parameters).

---

## **Summary**

The Demo Floating Button gives you a simple way to add a persistent call to action across the full demo experience.

It works best when the next step is clear, relevant to the story you are telling, and easy for the viewer to act on without breaking momentum.

Adding URL parameters makes that next step even stronger by carrying useful context into forms, booking flows, and follow-up destinations.

:::note[Final takeaway]

The best floating buttons do more than send viewers somewhere. They move the story forward with a clear, well-timed next step.

:::