The Magic Button

Wouldn’t it be nice to have a button that you can program to streamline your job? Just imagine getting a task done with one click where it used to take a few annoying steps to complete every single time.

The Uncanny Automator Pro plugin has the button for you. It’s appropriately called the Magic Button because it can do wondrous things from any page on your site. Here’s but a small sample of what’s in store if you have Automator’s Magic Button.

• Send an email notification to a manager, group leader, or an admin: A course participant can click on your Magic Button to flag a course administrator that the participant is ready for a review to proceed to the next course. There’s no need to fill out a form or bring up an email app. One-click is all it takes.
• Register for an event. Use a Magic Button to simplify your event registration process. Again, with one-click, anyone can register for your event without going through the trouble of submitting a form.
• Reset course progress (i.e., retake a course) or skip an optional lesson in a course. With the Magic button, you can provide your customers with a flexible and efficient learning experience. A Magic Button can empower course participants to redo something or even advance themselves to the next level with one click.
• Add yourself to a group of courses or remove yourself from a group that you no longer need to be a part of.  Just think how easy it is to allow your students to press a button to add themselves to a set of courses or remove themselves from a group. It’s instant gratification and instant satisfaction. There are no extra steps or hoops to jump through.

This is just for starters. What’s even harder to fathom is, these huge time-savers aren’t doable today without Automator.  Plugins like LearnDash, LifterLMS, bbPress, and the Events Calendar don’t provide any of this functionality through their shortcodes. Only Automator can do this in a click.

In other words, since the Magic Button is powered by the Uncanny Automator plugin, the Magic Button can run any set of actions supported by Automator!

In this article, we’ll first cover how the Magic Button works. Then, we’ll guide you through how to create one step by step, and how to use it. Before we let you go, we’ll give you some cool tips on how to style a Magic Button using custom CSS.

How the Magic Button works

The Magic Button functionality comes with the Uncanny Automator Pro plan. Within Automator, the Magic Button is available as a trigger that falls under the WordPress Core integration.

A Magic Button trigger needs to be defined in an Automator logged-in recipe. When a Magic Button trigger is created, Automator generates a WordPress shortcode. Shortcodes make it possible to place your Magic Button anywhere on your page or post you want it to show up.

This is an example of the Magic Button shortcode that Automator generates:

Click here

Here’s an example of what the shortcode above would render for the browser to display:

Behind the scenes, WordPress works a little of its own magic. Browsers understand HTML—they don’t understand shortcode. When WordPress goes to render your page to a browser, WordPress will expand your shortcode into a longer version of valid HTML. The browser will see that HTML and then display a button that people can see and can click.

Creating a Magic Button

Create the recipe

1. From your /wp-admin/ dashboard, navigate to Uncanny Automator > Add New.

2. When the Select a recipe type popup appears, select Logged-in. Click Confirm.

Note: The Magic Button is available only for Logged-in recipes.

3. Name your recipe, e.g., “My first Magic Button”. Select WordPress for the integration.

4. Select A user clicks a magic button for the trigger. Automator will generate the Magic Button shortcode and display it.

5. Now, you can copy the shortcode. This includes the square brackets []. Paste the shortcode into your page or post. Feel free to come back to this later if you want to finish the recipe first.

More on how to add the shortcode into your page or post coming up in the next section.

6. Complete your recipe by adding at least one action. For a Magic Button recipe, it’s good practice to check Redirect when the recipe is completed. Doing so gives people a clear indication that the Magic Button worked its magic (pun intended).

7. Activate your recipe by switching all toggle buttons from Draft to Live.

Using the Magic Button

Once you have the shortcode to the Magic Button, you can add it anywhere in your WordPress page or post. Using the classic editor, copy the shortcode and paste it into the Visual or Text tab of the editor. Be sure to include the opening and closing square brackets [].

Here’s an example of pasting the Magic Button shortcode into the classic editor:

With the Gutenberg block editor, add a shortcode block first, then paste the shortcode into the shortcode block.

How to style a Magic Button

In this section, we’ll show you how to style your Magic Button using CSS. CSS stands for cascading style sheets. CSS is the language for styling HTML. HTML is the language the browser understands for rendering a webpage. Another way to look at this is, a web page’s content is organised using HTML and CSS is used to make the content look good.

There are a few ways to add CSS to WordPress. For simplicity, we recommend that you use WordPress’s built-in Customizer. From the WordPress admin dashboard (/wp-admin/), navigate to Appearance > Customize > Additional CSS. This is where we put all the CSS used in the examples below.

A quick tour of CSS

Before diving into the actual CSS we’ll be using, let’s cover the basics. Feel free to jump ahead if you are already comfortable with CSS terminology and syntax.

CSS is applied to HTML to make webpages look how they do. To apply CSS to HTML, we need to specify the following items for the CSS to work:

• Element selector: The element selector can be an HTML tag, a class (a group of things), or an ID (one unique thing). In this article, we’re only dealing with one class selector—the Automator button class.
• Rules: CSS rules have a property (aka name or attribute) and value. Here’s an example: color: white;. In this example, color is the property and white is the value. Rules must be inside curly braces {}. A colon : must separate the property from the value. Each rule (property/value pair) must end in a semicolon ;. The semicolon for the last rule is optional.
• Target HTML: The target HTML is the HTML that is modified by the CSS rules we define. In this article, our target HTML must have the class name automator_button in its list of classes for our CSS styles to take effect. E.g., <button class="automator_button">. The Magic Button shortcode generates this code for us.

Default styles

Here’s what the Magic Button looks like by default on our Automator test site.

The CSS rules for this button look like this:

To see what’s going here, let’s deconstruct each CSS rule that styles this particular button:

• border-radius: 50px; This gives the button noticeably rounded corners so that the button takes on a pill shape. Lower pixel (px) values make the corners less rounded. Higher pixel values create more rounded corners.
• padding: 12px 30px; This creates space between the button text and the button border. In this case, there will be a little more than twice as much space to the sides of the text than the top and bottom of the text.
• color: #ffffff; This turns the button’s text colour to white.
• border-color: #0984e3; This makes the button’s border colour blue.
• background-color: #0984e3; This turns the body of the button to blue.
• font-size: 16px; This specifies the size of the button’s text. 16px is usually the default for browsers.

Button text colour

If you want to change up the text colour,  you can update the automator_button class’ color attribute. Below is an example of using a web-safe colour name instead of a hex value. If we used the Automator green (#6bc45a), it would be harder to read because there isn’t enough contrast with the Automator blue. Hence, we’re going with the color: lightgreen to make the text pop just a bit more.

Button colour

To control the colour for the body of the button, you’ll need to change the property values for background-color and border-color. These colours can be the same or different. You can use hex values or colour names.

No rounding

If you prefer straight edges instead of rounded, change the border-radius property value to 0 with no units.

Slight rounding

For softer corners, a border-radius of 10-12px does nicely.

Hover animation

Animating a button when a cursor or finger hovers over the button implies that your button is ready for action. It’s an encouraging cue for people to click.

To add a hover animation on your button, create a new CSS ruleset. This time you’ll need to add a :hover after your element selector (no spaces) as shown below. Then, add the rules to set the button’s colour to white while you set the button’s text and border colours to Automator blue.

Swapping the white on top of the blue from the original state to blue on top of the white creates an inverse effect during a hover over the button. This makes the animation jump out even more for attracting attention to your Magic Button.

Positioning using Gutenberg

WordPress’s block editor, Gutenberg, comes with a convenient Columns block that makes positioning other blocks a breeze. The example below shows how you can align your Magic Button on the left side, middle, and right side of a page.

All you have to do is add a 3-column Columns block to your page or post. Then plop your Magic Button shortcode into the column that works best for your layout design.

Here’s what you’ll see when you publish your Gutenberg page:

Positioning using the classic editor

Positioning objects using the classic editor is more involved. We’ll start with the HTML part first.

In the Text tab of the classic editor, you’ll need to copy and paste the Automator shortcode first. Then “wrap” the shortcode with an HTML div tag. In the opening div tag, you’ll assign a CSS class that we’ll define later. This class will be responsible for positioning the Magic Button. In the example below, we named the CSS class automator-button-container.

Below is the CSS you’ll need to apply to the HTML above. Place this CSS in Appearance > Customize > Additional CSS. This code as-is will display the Magic Button in the centre of the page. Replace the place-items: center; rule with either place-items: center left; if you want the button left-justified. Or, replace the place-items: center; rule with place-items: center right; if you want it right-justified.

Conclusion

By now, you are probably thinking of the Magic Button as your very own do-it button. We agree.

Furthermore, having this button is like saying, “Let’s get things done!” It’s a way to say goodbye to yet another intimidating form to fill out. It’s a way to say farewell to the precious time wasted on convoluted approval processes.

Instead, you can say hello to faster customer turnaround times, quicker time-to-market for your products and services, and glowing approval ratings from your audience because of the time you saved them. Remember this whenever a customer clicks on your Magic Button.

As Benjamin Franklin said, “Time is money.” We hope this article not only inspires you to create a Magic Button (or two—or three) but also allows you to reflect on how automation, in general, can save you money.

We think you’ll agree that the Magic Button is indeed a time-saver that lets you focus on what’s important. After all, shouldn’t you be spending more time running your business than on your website?