# Runaway Button

> Plugin page: <https://bubble.io/plugin/runaway-button-1726928264686x378213214655873000>

## Description

Free Runaway Button plugin adds a fun, interactive element to your site - a button that playfully runs away from the user! Want to keep your users entertained while they wait? Or perhaps create a mini-game? This is the plugin for you!

## Features

* **Absolutely Free**: The Runaway Button plugin is completely free to use!
* **Customizable Catchability**: You can decide whether the user can catch the button or not. If you don't want them to catch it, they won't!
* **Button Style Customization**: Customize the button's styles to match your site's design.
* **Adjustable Speed**: Control the speed at which the button runs away.

## How to Use

1. **Install the plugin**: Find the plugin and add it to your application.
2. **Enable ID attributes**: Go to settings of your application, then switch to "General" tab. Here, scroll down and find "Expose the option to add an ID attribute to HTML elements". Check it. &#x20;

   <figure><img src="https://2724459464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FieHgbes9PiGXkKXGiaIW%2Fuploads%2F5TdaSUCQIBWlHJmsZAsg%2Fimage.png?alt=media&#x26;token=9145b63b-dee1-4588-a749-62693ad01abe" alt=""><figcaption></figcaption></figure>
3. **Configure the wrapper:** Create a group that will be the wrapper for the Runaway Button. Specify ID attribute for this group, e.g. "button-wrapper". \
   If you want the button to use the whole page as a wrapper, skip this step.&#x20;

<figure><img src="https://2724459464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FieHgbes9PiGXkKXGiaIW%2Fuploads%2FjZ57IXJclSClLyOQJrla%2Fimage.png?alt=media&#x26;token=866c7c2e-946d-482a-b36a-1b0bbacdcaed" alt=""><figcaption></figcaption></figure>

4. **Place the button:** Find the "Runaway Button" in elements sidebar and drag it into the wrapper area. Set the parameters:

* *Wrapper* is the ID attribute that you specified in the previous step. Leave blank if you did not set the ID attribute.
* *Is possible to catch* determines if the click event will occur once the user clicks on the button.
* *Animation Speed* (sec) shows the speed of the button.&#x20;

<figure><img src="https://2724459464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FieHgbes9PiGXkKXGiaIW%2Fuploads%2FIw7Y3rQj1pSEgB5288NI%2Fimage.png?alt=media&#x26;token=1e9fc1f7-8443-4c13-a11b-07627b07d24a" alt=""><figcaption></figcaption></figure>

5. **Create the workflow**: Define the workflow that happens when the user clicks the button. It can be anything - be creative!&#x20;

   <figure><img src="https://2724459464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FieHgbes9PiGXkKXGiaIW%2Fuploads%2FPUtCTNtYUz6Kc7NwdDrx%2Fimage.png?alt=media&#x26;token=4676f549-305e-4fb3-8ded-5eb4656861ce" alt=""><figcaption></figcaption></figure>

   If you have any questions, feel free to reach out at [<mark style="color:blue;">support@thesimplelabs.com</mark>](mailto:support@thesimplelabs.com)

## Found a bug?&#x20;

If you suspect something isn't working quite right, please don't hesitate to send us a bug report. [Here's](https://docs.thesimplelabs.com/welcome-to-thesimplelabs-docs#how-to-report-a-bug) an instruction on how to file a bug report. \
\
Your input helps us quickly address issues and strive for continuous improvement. \
Thank you for your cooperation!