AMP Floating Button - WordPress Plugin

A Guide to Configuring AMP Floating Button on WordPress AMP Pages

This guide to AMP Floating Button will help you decide when visitors need a floating button, prepare your AMP pages for installation, choose a clear action, and test it on phones and desktop computers. We’ll cover the path from choosing one useful contact option to checking the link, placement, accessibility, and behavior after clearing the cache. The goal isn’t to replace your site’s navigation. It’s to add a small, persistent element that stays available while visitors read the AMP version of a page.

AMP Floating Button has a specific purpose: it adds a fixed button with a selected icon to an AMP page. The extension description confirms ready-made options for WhatsApp and phone calls, the ability to choose a custom icon or upload an image, and display on mobile and desktop devices. That’s why a good setup starts with the action you want visitors to take after reading, not with the button’s color.

In this article, “button” doesn’t mean any bright banner on a regular website. It refers to a separate element in the AMP version of a page. A page may have its own theme, menu, form, and in-text buttons, but you should check the floating element at the AMP URL rather than on the familiar non-AMP page. This distinction helps avoid a common mistake: an editor changes the settings, checks the regular post, and concludes that the extension doesn’t work.

What a Fixed Button Does and When to Use One

A long article, service page, guide, or post with a phone number often presents the same problem: the contact details or link are near the top, but readers make their decision much later. They read the terms, compare details, scroll down, and only then decide to call or send a message. A floating element shortens the path to a specific action. It shouldn’t explain the entire product, display five interchangeable contact options, or compete with the headline. Its role is simpler and more useful: make the next step easy to reach when the reader is ready to take it.

For a local service, that next step might be a phone call during business hours. If a manager actually responds on WhatsApp, a WhatsApp button makes sense for consultations. For an informational article about a complex service, it’s safer to direct visitors to an internal inquiry page with a clear description than to squeeze the entire booking process into a small element. If the button leads to an external page, check in advance that the URL opens without intermediate pages and won’t change when an advertising campaign ends.

One button, one clear promise

A button that stays visible attracts more attention than a regular link in a paragraph, so it needs one clear purpose. “Call” promises to start a call; “Message us on WhatsApp” opens a conversation; “Get an estimate” opens a relevant page or form. Don’t use a vague label like “Learn more” if it actually leads to an inquiry form, and don’t use a phone icon for a link to a catalog. When the expected action doesn’t match what happens, you get fewer useful inquiries and a harder time checking whether the contact option works as intended.

This is especially noticeable on an AMP page. Visitors often arrive directly from search results, don’t know how the site is organized, and shouldn’t have to figure out its menu. Give them useful content first, then offer the button as a clear next step when they’re ready. If the action is secondary, a link in the text or a block at the end of the article may be enough. A floating button makes sense when keeping the action available during scrolling matters more than keeping the interface compact.

Who the extension is for

AMP Floating Button can help WordPress site owners who already publish AMP versions of their content and have a working way to communicate with visitors. It suits editors who can check a published page in a fresh browser session and marketers who can name a measurable goal for the button: a call, a message, or a visit to a specific internal page. Agencies can also use it as a small part of their publishing standards: one button for one type of content, one consistent label, and one check before publication.

The extension is less useful if AMP pages are disabled on the site, attract little traffic, link to an unmonitored contact channel, or need a different goal on every post. Don’t install it just because the regular site already has a widget with several contact options. That widget and AMP Floating Button could duplicate each other, cover text on small devices, and give visitors two competing paths. First choose the primary contact option for AMP pages, then compare it with the regular site.

How the extension differs from a contact panel or CTA block

It helps to distinguish three related elements. A floating button is one fixed element with an icon or custom image. A contact panel usually offers several ways to get in touch. A full call to action, or CTA, sits within the content and may include a heading, an explanation, and several buttons. AMP for WP has separate documentation for AMP CTA, which describes content blocks, modal elements, a contact panel, and a floating CTA. These tools have similar goals, but that doesn’t mean AMP Floating Button includes every AMP CTA feature.

This distinction matters before installation. If you need one small, persistent icon, start with AMP Floating Button. If you need a more detailed form with an explanation, terms, and two actions, first consider a separate CTA tool or a custom content block. If visitors need a phone number, email address, and messaging app at the same time, don’t turn one small button into a crowded menu without testing that experience first. Choose the primary contact option and put the others on the destination page.

Practical rule: Make a button persistent only if visitors can take that action right away. It shouldn’t open an empty chat, dial a number that doesn’t accept inquiries, or lead to a page where visitors have to search for what they need.

Before You Install: AMP Pages, Goals, and Overlap Risks

Preparing in advance takes less time than fixing an awkward element after publication. Make a short list of AMP URLs where a button might help: an article about a service, a category page, a post with a review, or a landing page. Don’t automatically carry over a decision from the regular site. The AMP template may have a different footer height, its own panel or widget, and some post types may not have an AMP version at all.

For each type of page you choose, note three things: the button’s goal, its destination or contact, and what should happen after a visitor taps it. For example: “repair article - service phone number - starts a call” or “consultation article - WhatsApp chat - opens a conversation with a clear first message.” This isn’t busywork. If a test reveals the wrong destination, you’ll have a clear reference to compare with what actually happened.

Make sure AMP pages are generated and open separately

The extension depends on a working AMP setup. The official AMP for WP installation guide shows the standard WordPress process: find the core plugin under Plugins, install it, and activate it. Before adding an extension, open the published AMP version of a page on a device or in a browser session that doesn’t retain old data. Check the heading, main content, menu, and URL. If the AMP page itself won’t open, fix that first. The button can’t make up for a missing AMP render.

Also keep AMP checks separate from search result checks. You don’t need to wait for indexing to configure the button, and the editor’s preview isn’t a reliable way to judge the result. What matters is the published server response and the page visitors can see. This helps avoid unnecessary changes to the extension’s settings.

Minimum checklist

• A published AMP page is available and can be opened separately from the regular version.
• The button’s purpose is clear: a phone call, WhatsApp, or a specific URL.
• The contact works outside the site: the number is answered, the messaging app is connected to a working account, and the page URL doesn’t return an error.
• The bottom of the viewport is clear of other fixed interface elements, consent notices, or ads.
• You have a test device with a typical mobile screen width and a way to check the desktop layout.

Discuss the button with whoever handles incoming inquiries. If a visitor taps it at night and the team can only respond in the morning, don’t promise an immediate consultation. A neutral label and a clear destination page are more honest than aggressive copy. You can prepare a short greeting in the messaging app itself, but don’t cram a long promotional pitch into the button.

Install and Activate the Extension Without Unnecessary Site Changes

Install AMP Floating Button as an addition to an existing AMP setup, not as a standalone way to create AMP pages. The extension page describes its purpose as adding a fixed button to the AMP version of a page and lists compatibility with other AMP solutions, including AMP by Automattic. That’s a useful reference, but it doesn’t guarantee the same behavior with every combination of theme, cache, and extensions. After installation, check the AMP version your site actually publishes.

Start with a change you can roll back: capture the current appearance of one AMP page and note its URL. If it already has a fixed bottom panel, chat icon, or consent banner, take a screenshot. You’ll use it to compare before and after, not as a report. When several fixed elements appear on a page, visitors notice the problem before the author does on a wide monitor.

Install through the WordPress admin dashboard

If you already have a legitimate copy of the extension archive, use WordPress’s built-in installer. Open Plugins, choose the option to add a new plugin and upload the archive, then finish the installation and click Activate. The labels in your version may be in English, but the process is the same: first, the file appears in the installed plugins list; then its status changes to Active. Don’t remove or disable the core AMP plugin to make the button appear sooner. The extension needs a working AMP setup.

If your site has a staging copy, it makes sense to install the extension there first. This is especially useful if several extensions generate AMP pages or if the site uses optimization tools, server caching, or a custom theme. A staging copy doesn’t replace checks on the live site, but it can reveal a conflict before visitors see it. Once the setup works, carry over only the settings you’ve confirmed, not a chain of experiments.

1. Open the plugins list and make sure the core AMP solution is active.
2. Add the AMP Floating Button archive using WordPress’s standard upload process, or update the installed extension through the regular plugins screen.
3. Activate the extension and wait for WordPress to return to the plugins list without an error message.
4. Find its settings panel under AMP or in a menu added by the extension. Don’t change unrelated AMP settings.
5. Save the initial setup with one action and a standard icon, then check the published AMP page.

If the settings option doesn’t appear, don’t immediately reinstall the archive. First check the extension’s activation status, your current user’s permissions, and whether the core AMP plugin is installed. Sometimes the extension’s settings are inside the main AMP section rather than in a separate top-level menu. If part of the AMP dashboard appears blank after an update, don’t edit files manually. The Floating Button for AMP changelog specifically mentions a fix for a blank AMP settings panel, so “update through the normal process - clear the cache - check again” is safer than modifying the source files yourself.

Don’t start by adjusting the appearance

The first test should answer four simple questions: Does the element appear on the AMP page? Can you click it? Does it go where you expect? Does it cover anything else? Adjust the color, custom image, and precise placement only after that. If you change the URL, icon, size, cache, and theme all at once, it will be hard to tell what caused a problem. A working button in its original form gives you a baseline for further changes.

Choose an action that’s easy to test. A phone call is easy to test on a real phone, as long as the number is intended for public inquiries. An internal page link is easy to test on a phone and computer. Test WhatsApp on a device where the app or web version can handle the link. If your team can’t access the intended contact channel, start with an internal test page and replace the URL after checking the placement.

Important: Check the published AMP page after clearing the cache, not the editing screen or an old browser tab. Otherwise, you may mistake a saved setting for the result visitors can see.

Set Up the Button’s Action: Icon, Destination, and Link Purpose

The product page confirms three core configuration options: choosing an icon, using ready-made WhatsApp and phone call options, and selecting a custom icon or uploading an image. These features are straightforward, but this is where a nice-looking icon can fail to provide real value. The icon should support the action, not define it. Choose the destination first, then select a clear icon and adjust its appearance.

Choose the destination first

A call button needs the correct phone number. A messaging button needs to open the right conversation. A regular link needs to lead to a destination where visitors can immediately continue with the action you promised. Don’t direct a button to the homepage if its label promises an estimate, and don’t use a temporary campaign URL as a permanent contact link without tracking when it expires. A good action is easy to explain: “The reader taps the button and reaches the right contact method or a clear next page.”

If the button leads to an internal page, consider the context. Visitors arrive from an AMP article and already know the topic, so the destination page shouldn’t make them search the menu for the service again. Put the next step near the top: a form, contact details, a pricing inquiry, or a list of available options. If you use analytics parameters in the URL, add them only if they don’t interfere with opening the link normally. First test the destination without extra parameters, then test it with them.

Test the call action

Agree on the phone number format and call-handling hours in advance. Open the AMP page on a real phone, tap the icon, and confirm that the device offers to call the expected number. Cancel the test call if you don’t want to tie up the line. Behavior may differ on a desktop computer: the system may offer an app or may not have a handler. That doesn’t prove the mobile button is broken, but the interface should still be clear and avoid sending visitors to a dead end.

Test the WhatsApp button

Test the WhatsApp link on the device visitors are likely to use. It should open the right chat, not a page where they’re asked to choose a contact that doesn’t exist. Verify the number outside the site, and don’t publish an employee’s personal number without approval. If you need to identify inquiries from AMP, use an agreed first-message text only if the link format supports it and the message makes sense to visitors. Don’t turn it into a long set of instructions.

Choose an icon or custom image

A ready-made icon is easy to recognize when the action is familiar. A phone icon suits a call, and the recognizable WhatsApp icon suits a link to that messaging app. A custom icon can help when the action isn’t a standard way to get in touch, such as booking a service or downloading a prepared document. But an image doesn’t replace a clear purpose. If visitors can’t tell where the icon leads at a glance, add a short explanation to the destination page or choose a clearer action.

Prepare any uploaded image as a small, high-contrast, easy-to-understand icon. It shouldn’t contain tiny text, a full phone number, or an entire promotional graphic. A small icon can’t convey a long sentence, and a very large file doesn’t help an AMP page. Use a simple silhouette with a little clear space around it. After uploading, check that the image isn’t blurry and hasn’t been stretched on a mobile screen.

Finally, don’t try to hide important legal or pricing information in an icon. The button should only start the process. Important terms, consent to data processing, and service details belong on the visible page or in the form the button opens.

Configure AMP Floating Button After Activation

Once the button appears successfully, you can move on to a working setup. The goal is to make it noticeable without being intrusive, clear without looking like an ad, and persistent without interrupting reading. Start with one option, save it, and run a quick check. Only then change another setting. This makes it easier to trace a change in behavior to the setting that caused it.

The available fields in AMP Floating Button depend on the installed version and core AMP setup. Don’t call an unconfirmed menu item “required” or copy a value from someone else’s screenshot. Focus on what each field does: the action, the icon or uploaded image, the placement, and saving the settings. If your dashboard has additional options for device type or visibility, use them only after checking that the basic button works. This approach avoids relying on an outdated screen or looking for a tab that doesn’t exist.

Basic setup steps

1. Open the extension settings under AMP or in a separate extension panel.
2. Choose one action type that matches your goal: a call, WhatsApp, or a custom link.
3. Enter the contact or URL and verify it outside the settings panel before saving.
4. Choose an icon from the ready-made options, or upload a simple custom one if it better represents the action.
5. Save your changes without changing unrelated AMP settings at the same time.
6. Open the published AMP page, scroll through it, and tap the button to test it.

This sequence may seem obvious, but it helps prevent two different mistakes. The first is a saved setting that doesn’t appear on the page because of caching or because you checked the wrong version. The second is a visible button that goes to the wrong place because you chose the icon before confirming the destination. Set the action first, then choose how to represent it.

Place the button in relation to the content

A fixed element always takes up screen space, which is especially valuable on a small phone. Check not only the button’s placement but also what’s around it: the browser’s system controls, a consent notice, the theme’s bottom navigation, a chat field, the on-screen keyboard, and ads. If a persistent panel is already there, don’t add a second button without comparing the options on the actual page.

The AMP for WP tutorial about floating CTAs describes fixed placement at the top or bottom of the screen, where the element stays in place during scrolling. It covers a different CTA tool, but explains the user experience well: test a fixed element while scrolling, not just above the fold. Apply the same testing principle to AMP Floating Button without assuming it has the same settings as the other extension. Scroll through a short and a long page, then return to the top and make sure the button doesn’t cover a key heading, link, or control.

Bottom of the screen

Placing the button at the bottom of the screen can work for actions visitors take after reading, provided the AMP template doesn’t already have a bottom panel and the button is compact. Check pages where the text ends with a form button, a table, or an embedded notice. If the fixed element covers the last paragraph or link when visitors reach the end, treat it as a placement problem, not a minor cosmetic issue.

Top of the screen

Top placement may work when visitors should be able to get help before reading a long page. However, it competes with the heading, breadcrumbs, and menu. On an AMP page, avoid making visitors choose between the logo, menu, notice, and another large button. Keep the hierarchy clear: navigation and the heading first, content next, and the persistent action in a small, predictable space.

Choose a size and color without chasing misleading “conversions”

Use contrast to make the button easy to find, not to make it look like an emergency alert. Choose a color that stands out from the AMP template’s background without resembling a system warning. If your custom icon is light, make sure its outline is visible against the background. Don’t combine a bright background, flashing animation, long label, and heavy shadow. One clear visual accent is enough for a persistent element.

Judge the size on an actual screen. A button that’s too small is hard to tap; one that’s too large covers text and invites accidental taps. There’s no universal size that suits every theme and browser, so compare how your AMP template behaves instead of copying pixel values from someone else’s guide. Ask someone who wasn’t involved in the setup to open the page and tell you what the button does. If they understand it without an explanation and can tap it easily, the size is probably reasonable.

The color shouldn’t promise something the button can’t deliver. For example, red may suggest an urgent call, while green may suggest a familiar messaging app, but neither replaces a clear label or recognizable icon. If you use a custom image, don’t imitate a well-known service unless the button actually leads to it. An honest visual cue helps build trust and makes inquiries easier to evaluate.

Which settings to enable only after the basic check

Enable additional visibility rules, custom images, or different layouts for screen types one at a time. First confirm that the simple button is visible and goes where it should. Then add a restriction, clear the cache, and check the same test pages again. If the button disappears, you’ll know whether the issue relates to the link, icon, AMP setup, or new visibility condition.

Pay special attention to mobile devices. The product is described as responsive, but that doesn’t eliminate the need to check your selected image, theme text, and other fixed elements. On a narrow screen, your logo may take up more room than the standard icon, and the browser’s system controls may change how much space is available at the bottom. Check the page at two common screen widths, rotate the device, and make sure the action is still clear after rotation.

Setup summary: In a working setup, visitors see one button, understand its purpose from the icon or label, can tap it easily, and reach the expected destination. Make other changes only after that’s working.

Why the Button May Not Appear on Every Page: From AMP Template to Visitor Experience

Understanding how the extension works helps you avoid guesswork during troubleshooting. A visitor opens a site URL, WordPress and the core AMP tool generate the AMP version, the extension adds its element to that version, and the browser displays it with the page content and styles. Between saving a setting and seeing it on the page are the template, AMP display rules, and possibly a cache. So “everything is enabled in the dashboard” confirms only that the settings were saved; it doesn’t prove visitors will see the button.

The steps are: saved action -> AMP page render -> extension element added -> HTML and styles generated -> visible button and working tap. When something goes wrong, find the step where the chain breaks. No AMP page? Check the core plugin. AMP page but no button? Check activation, display conditions, and the cache. Button appears, but the link is wrong? Check the destination rather than the theme markup.

This approach is especially useful after updates. The AMP for WP changelog includes changes and fixes related to buttons and compatibility, and Floating Button for AMP has a separate fix for a blank settings panel. That isn’t a reason to update a live site without a plan, but it is a good reason to follow a simple procedure: create a backup point, update through the standard process, then check a test AMP page and tap the button once.

What to check at each step

Start with the URL. Open the page where you expect to see the button and confirm that it’s actually being served as an AMP page. Then check the top and bottom of the screen without tapping anything. If the button is missing from one post but appears on another, compare the post type, template, category, and AMP availability rather than the color or browser. That difference may point to the core AMP solution’s display conditions or to different templates being used.

If the button is visible, check it as a visitor would. Scroll to about the middle of the page, pause, return to the top, then go to the end. The button should stay in a predictable position relative to the screen rather than jump between content blocks. After tapping it, check where you end up: the phone number, messaging conversation, or intended page. Don’t stop at seeing the browser open a new URL. The action works only if visitors can continue without having to search for what to do next.

If that works, test a return visit in a fresh browser session. This shows you the page without some of the local data that can hide problems. On a heavily cached site, it’s also useful to open the AMP URL on another device. This doesn’t replace a technical cache audit, but it helps distinguish “I’m seeing an old response” from “the element isn’t included in the generated page.”

Caching changes the order of checks, not the purpose of the setup

Caching plugins, server caches, and CDNs may serve an AMP page generated earlier. If the button doesn’t appear or still has its old icon after you save a change, don’t start by reinstalling the extension. First clear the cache layer you use according to its standard instructions, then open the published AMP URL in a fresh session. If the site uses multiple caching layers, clear them one at a time and check the page after each step. Otherwise, you might fix the problem on one device while some visitors still see the old version.

Don’t assume the cache is always to blame. After clearing it, check the basics: Is the plugin active? Is the correct contact saved? Does the destination have an AMP version? Is another fixed element covering the button? If the same issue persists across multiple devices after the cache has been cleared correctly, move on to the settings and compatibility rather than clearing the cache again and again.

Safely roll back a change that didn’t work

A useful fallback for this type of setting is to return to the last known working version. Before changing the custom icon or URL, make a short note of the icon, its destination, and the AMP pages you tested. If the new version covers content or leads to the wrong place, restore the previous action, clear the cache, and make sure the old behavior is back. Don’t edit the plugin files or try to patch AMP markup in the WordPress core. That complicates updates and isn’t necessary for ordinary extension configuration.

If the button disappears after an update along with other AMP elements, don’t adjust its appearance yet. First check the AMP output as a whole. The AMP for WP installation guide describes the standard process for installing and activating the core plugin, and the changelog lists fixes for various conflicts. Keep the working setup minimal and resolve the issue through compatibility checks rather than arbitrary code changes.

Accessibility and Usability: The Button Should Help Every Visitor

A floating element is easy to make noticeable and just as easy to make awkward. Usability starts with a large enough tap target, good contrast, and a clear action. Visitors shouldn’t have to guess whether a round icon is decorative or find it covered by the browser’s controls. Even if the button looks good on the author’s phone, it may sit too close to the edge, conflict with a consent panel, or cover the last paragraph on another device.

AMP documentation for interactive elements emphasizes that clickable elements should work with screen readers and keyboard navigation. Site owners don’t need to rewrite the extension’s markup to apply this principle, but they should avoid making accessibility worse: don’t replace a recognizable icon with an unclear image, hide the action in a low-contrast graphic, or add several competing floating elements. If your setup lets you add a label or alternative text, use a short name for the action rather than the brand name.

Check it with your thumb, eyes, and keyboard

The thumb test is simple: open the page on a phone, hold it in one hand, and tap the button with your thumb. If you have to shift your grip or aim carefully at a tiny icon, the size or placement is wrong. Check contrast by finding the button within a second or two on both light and dark parts of the page. If it blends into a photo, colorful ad, or theme background, adjust the specific contrast setting or icon rather than changing the entire design.

On a desktop computer, press Tab to move through the page and see whether you can reach the element in a logical order, if it participates in tab navigation in your setup. Visually fixed elements don’t all behave the same way, so this check doesn’t replace testing the extension’s own implementation. It can reveal confusing focus movement caused by custom wrappers or third-party widgets. If the button starts an action you can’t complete on a computer, give visitors a clear alternative on the page.

Keep the label, icon, and context clear and low-pressure

A clear icon reduces the need for a loud label. However, visitors need context when you choose a custom icon. For example, an article about booking a service might end with a regular “Contact the technician” link, while the floating button repeats that action with a compact icon. Visitors can then understand the purpose from both the content and the familiar symbol. If the button is the only cue, don’t expect an unusual image to explain a complex service on its own.

Don’t use pressure tactics such as artificial timers, scarcity claims, fake system alerts, or false urgency. Those tactics aren’t part of AMP Floating Button’s functionality and often turn a useful contact option into a distraction. A good persistent element feels like part of the service: it stays available without demanding attention and does exactly what it promises.

When to hide or leave out the button

Skip the floating element on pages where visitors need to use a form, make a payment, or complete a multi-step task and the button would cover something important. For an AMP cart, checkout, or sensitive form, first check that visitors can complete the task without extra distractions. On a privacy policy, technical documentation, or page without a working contact option, a regular contact block is more useful. Whether the button belongs on a page depends on whether it helps visitors, not simply on whether the extension can display it.

Keep in mind: A high-contrast button doesn’t need to be the brightest element on the screen. A good button is easy to find when visitors need it and lets them read in peace when they don’t.

Example: Let Visitors Request an On-Site Service Call from an AMP Article

Consider a practical example that could apply to many local businesses. A site publishes a detailed AMP article about preparing for an on-site service visit. Readers learn about signs of a problem, available services, and how to get in touch. By the time they decide to request service, the phone number above the fold is long gone. They don’t need another ad banner; they need one clear way to contact the dispatcher.

The goal is to show a fixed call button on the AMP article that stays visible during scrolling and connects to a working number. Before you start, make sure the AMP page is published, the number is verified, the bottom of the page has no second fixed widget, and the employee knows that the number may receive inquiries. These conditions matter more than the appearance. If nobody answers the line, set up a way to handle requests before you add the button.

Configure the call button for this example

1. Choose the call action in AMP Floating Button settings and enter the verified public number.
2. Keep the recognizable phone icon for the first pass instead of replacing it with an abstract custom image.
3. Choose a clear placement that doesn’t overlap the AMP template’s bottom panel or consent notice.
4. Save the settings and clear the site’s cache using its normal process.
5. Open the AMP article on a phone, scroll from the top to the final section, and tap the button.
6. Confirm the number in the system dialer, then cancel the test call or make one if you’ve arranged it in advance.

Success means more than seeing a round icon. Visitors can read the article, find the call action anywhere along the way, and see the same number listed in the company’s contact details when they tap it. If the button displays one number and the site header displays another, settle on a business rule first. A button that technically places a call but sends it to the wrong department isn’t working correctly.

One detail to watch is the end of the article. It often contains a regular form, a map, business hours, or a link to a detailed service request. The floating button shouldn’t cover these elements. Open the bottom of the page, scroll up and down a few lines, then tap each nearby element. If the button makes any of them difficult to reach, reduce the visual clutter: adjust its placement or use a regular contact block on the AMP page instead.

Use WhatsApp instead

If staff actually handle questions on WhatsApp, change only the action and the channel check. The goal stays the same: a visitor finishes reading the AMP page and gets a short path to a working contact. Preparation includes a test chat with the right number, a check of business hours, and an agreement about who will respond. Don’t add a messaging icon just for show if nobody monitors the messages. In that case, direct visitors to a form that states when they can expect a reply.

After saving the settings, open the AMP URL on a phone, tap the WhatsApp icon, and make sure it opens the intended conversation. Then send a neutral test message and confirm its receipt through the agreed process. If the link works only on a phone, that may be normal for the chosen channel. On desktop, still check that the button doesn’t look broken or get in the way of reading: visitors may see a link to the app or a regular path to the contact page.

This example shows why you shouldn’t combine phone, WhatsApp, email, and a form in one button. Each channel sets a different expectation, response time, and testing process. Choose one primary option for this type of AMP page. Leave other contact methods in a detailed contact block where visitors can compare them at their own pace.

Example summary

The setup is working when someone can use it without instructions: a new tester opens the AMP page, understands the icon, taps it while scrolling, and reaches the expected destination. If they have to ask “What does this button do?” or “Where does it go?”, revisit the icon and destination rather than adding more styling.

Check the Published Page: What to Look for and Measure

Check the page not only after installation. Updates to the AMP plugin, theme, caching system, or contact setup can all change how the button behaves. It helps to turn testing into a short, repeatable routine. It takes a few minutes and requires no code access: open the published AMP URL, check the placement, try a safe test action, confirm the destination, and see how the button sits alongside other elements.

Check the page on a phone

A phone is the main test device for this use case because a persistent button has the biggest impact there. Open the URL in a new tab or another browser. Don’t use a saved page from your history. Wait for it to load, then scroll slowly and faster. The element should stay in a predictable place and shouldn’t disappear when visitors reach the middle of the page. After tapping it, check the destination rather than the animation: the number in the dialer, the chat with the right contact, or the correct internal page.

Check at least two types of content. On a short post, the button shouldn’t feel like a constant obstacle. On a long article, it should remain accessible after several scrolls. If it works on one post type but not another, record that difference. Don’t explain it away as a general issue with the “mobile version.” Check whether AMP is generated, whether the template is the same, and whether the page has other fixed elements.

Check the page on a desktop computer

The extension is described as responsive, so you should check it on a desktop too. Open the same AMP page at a standard window width and a narrower width rather than relying only on developer tools. Look at three things: does the icon cover text, can visitors understand what it does without a mobile context, and does it conflict with pop-up elements on the site? A call button’s behavior on a computer may depend on an installed handler, but the URL and button’s meaning should still be clear.

Measure performance without drawing the wrong conclusions

You can track button taps using the analytics setup already approved for the site, but don’t promise more inquiries just because you added a fixed icon. Performance also depends on the topic, the quality of the offer, staff availability, the destination page’s speed, and seasonality. Start by comparing clear signals rather than overall traffic: visits to the intended channel, confirmed inquiries, and accidental taps, if you can distinguish them. Look at several periods with the same setup, not just one good day.

If tracking clicks requires extra configuration, discuss it with whoever manages analytics and personal data. Don’t add a third-party script to an AMP page just to track one metric without checking whether it’s allowed. For most sites, a reliable contact path and manual review of the first few inquiries are more useful than complicated tracking that slows the page or changes its interface.

The takeaway is simple: don’t look for a perfect design without considering the page. If the button performs the chosen action, doesn’t cover content, and is clear on the AMP page, it’s already doing its job. Make further changes only when there’s a reason you can verify, such as a new contact option or a real conflict with the theme’s panel.

Check before publishing: Keep one test AMP URL and one test phone in your publishing checklist. That’s more reliable than trying to remember the settings after the next update.

Troubleshooting AMP Floating Button: From Symptom to Safe Fix

Problems with this extension can look the same at first: the button is missing, looks wrong, or doesn’t do what you expect when tapped. In fact, each symptom points to a different step in the process. Troubleshooting is faster when you don’t change several things at once. Note the test AMP URL, device, time, and what the button does. Then work from the visible symptom toward the nearest step you can confirm: AMP page, extension activation, saved action, cache, surrounding interface, or destination.

The button doesn’t appear on the AMP page

Symptom: The extension is active and its settings are saved, but the button isn’t visible at the published AMP URL. Likely causes: You’re viewing the regular page instead of the AMP version; the core AMP solution is disabled or doesn’t generate AMP for this post type; an older cached response is being served; or a different template doesn’t use the expected AMP output. Don’t start by deleting and reinstalling the extension. That erases useful observations and rarely tells you which part failed to display the element.

What to check: Choose a published post where AMP is definitely enabled. Open its AMP version in a fresh browser session and compare it with the regular page. Then check the plugins list: both the core AMP plugin and the extension should be active. Clear the cache using the site’s normal process, then open the page on another device. If the button appears after clearing the cache, don’t change its settings; the problem was an old document being served. If the AMP page isn’t generated, stop and fix the core setup before continuing with the button.

How to fix it: Restore the working AMP setup, confirm that one test page displays, then enable a minimal version of the button with one action. When to roll back: If enabling the extension makes other AMP elements disappear or causes an error, temporarily disable only the extension and compare. Don’t edit the core plugin or theme code for this check.

The old icon, color, or URL is still showing

Symptom: You saved the changes, but visitors still see the previous image or are sent to the old destination. Likely cause: A cache is storing a generated AMP page, the browser has cached the extension image, or you’re checking an old tab that’s been open for a while. This is especially common after replacing a custom icon: the new file is in the media library, but the page still shows the old one.

What to check: First open the page in a fresh session, then clear the cache layer the site actually uses and test again on another device. Don’t change the link and icon at the same time. If clearing the cache fixes the old appearance, note which cache layer caused the issue. If the old destination still appears on a fresh page, check the destination field and verify the characters, number, and URL.

How to fix it: Make one change, save it, clear the cache, and check only that change. For a custom image, use a simple filename and don’t rename it several times during one round of testing. When to roll back: If the new icon is hard to recognize or doesn’t match the action, restore the previous working icon instead of trying to compensate with a larger size or shadow.

The button covers text, a form, or a system element

Symptom: On some phones, the button covers the last paragraph, a form field, the consent panel, or another fixed widget. Likely causes: Several persistent elements are active at once; the button is too close to the edge; the custom icon is larger than the standard one; or the AMP template has its own bottom panel. This problem may not be visible in a wide browser window, so checking only on a computer can create a false sense that everything is ready.

What to check: Open the same AMP page on two mobile devices or at two noticeably different widths. Scroll to the final section, tap nearby links, rotate the device, and open the system keyboard if the page has a form. See whether the overlap disappears when you temporarily disable another widget. Don’t leave two overlapping actions in place and hope visitors will choose one.

How to fix it: First choose one primary fixed element. Then adjust the placement or size using the extension’s available settings, clear the cache, and repeat the same test. If the theme forces its own panel, it may be better to keep a regular contact block in the AMP content. When to roll back: If the button still interferes with a form or payment, disable it for that use case. Access to an important form matters more than a persistent icon.

The icon appears, but tapping it leads to the wrong place

Symptom: A visitor taps the phone or WhatsApp icon but gets the wrong number, an empty chat, an outdated page, or a broken URL. Likely causes: The destination is wrong, the number has changed, the link is incorrectly formatted, the site redirects visitors, or a campaign URL has expired. The appearance is rarely the source of this problem. First check what the visitor is supposed to reach.

What to check: Copy the contact details or URL from the settings and test it outside the button. For a call, confirm the number in the system dialer. For a messaging app, open the link on a phone and confirm that it creates the right conversation. For a page link, test it in a fresh browser session and make sure it doesn’t send visitors to a general catalog. Check that the destination matches what the icon and article promise.

How to fix it: Enter the correct destination, save it, clear the cache, and test again on a device. If the contact channel has changed, update the site’s other contact details first, then update the button. When to roll back: If the destination is temporarily unavailable, restore the previous verified option or disable the button until the service is back. It’s better to hide a persistent action than send visitors to a dead end.

The AMP dashboard is blank or part of the interface disappeared after an update

Symptom: After a regular update, expected settings are missing from the AMP dashboard, the screen looks blank, or part of the configuration no longer applies. The Floating Button for AMP changelog mentions a fix for a blank AMP settings panel. Treat this as a version or compatibility issue, not as a reason to edit the plugin manually.

What to check: Record when the problem started, check the plugins list, confirm that the test AMP page is available, and look for WordPress messages. Try a fresh admin session, make sure your account has the usual permissions to manage plugins, and check whether clearing the cache normally resolves the issue. If you also updated the theme, core AMP plugin, and several optimization tools, don’t repeat all those changes without a plan.

How to fix it: Use a site backup and contact the developer through its official support channel. Include a brief description of the symptom, steps to reproduce it, and details of the core AMP setup. On a staging copy, you can isolate a conflict by temporarily disabling, one at a time, only extensions that affect AMP, caching, or the interface. When to roll back: If the update breaks the public AMP output, restore the last known working setup first. Keeping the button’s new icon is a lower priority.

The button works on one page but not another

Symptom: The button appears on the test AMP page but not on another page on the same site. Likely causes: The pages use different post types or AMP templates, some content is excluded from AMP, or one page has a conflicting element. A general fix like “make the button larger” won’t help here; the issue is with how the page is generated, not its appearance.

What to check: Compare the two URLs. Does each have an AMP version? Do they use the same content type and theme panel? Was the cache cleared in the same way? Eliminate variables: use the same browser, screen width, and time of day for both checks. How to fix it: If the difference is related to the AMP template or post type, make a decision for that use case rather than trying to compensate with a custom image. When to roll back: If the button makes one important group of pages harder to use, limit it to the content types where it works well instead of forcing it onto every page.

The button is noticeable, but visitors rarely use it

Symptom: Technical checks pass, but few visitors use the selected contact channel or the inquiries aren’t useful. This isn’t necessarily a problem with AMP Floating Button. Possible causes: The button leads to an inconvenient channel, the action doesn’t match the article, staff take too long to respond, the icon doesn’t explain the action, or the content doesn’t help visitors make a decision. Don’t draw conclusions from one click count or change every setting at once.

What to check: Compare what the article promises, what the icon suggests, and where the button leads. Ask someone new to try the flow without help. Ask the team whether inquiries are arriving and whether they fit the page’s purpose. How to fix it: Change one part, such as choosing a more direct contact option or restoring a familiar icon, and observe it for long enough to see a pattern. When to roll back: If the fixed button distracts visitors from the main form or brings in irrelevant inquiries, disable it for this content type and use a regular, context-specific link in the article.

Troubleshooting principle: Reproduce the symptom on one fresh AMP URL, change one step in the process, and check again before moving on. This preserves the working setup and helps you identify what caused the problem.

Keeping the Setup Working: Updates, Combinations, and Product Limits

Think of AMP Floating Button as a small, persistent element, not the center of your contact system. It works well alongside service pages, an inquiry form, and clear contact details. Its job is to take visitors to a specific next step while they read an AMP page. The form collects information; the manager responds; the service page explains the offer. When each part has a clear role, you can update one without disrupting the rest of the process.

One practical way to pair it with a regular WordPress form is to explain the service in the article and keep the standard form at the end. The floating button can lead to that internal page or to a verified contact channel. Don’t call this an official integration unless the developer says it is. It’s a straightforward division of responsibilities: the button speeds up navigation, while the form gives visitors a place to review the terms and provide details. After setup, check that the fixed element doesn’t cover the form’s submit button on the AMP page.

If you need a full promotional or contact experience with several options rather than one icon, consider the limits of this extension. The official AMP for WP guide to AMP CTA describes separate modes: a CTA block in the content, a modal action, a floating CTA, a bar, and a contact panel. That may be a better fit when the use case calls for text, multiple buttons, and terms. But don’t run two similar fixed elements without a reason. Decide which one should be primary on the AMP page, then disable the duplicate.

A quick check after updates

An update to WordPress, the core AMP plugin, the extension, the theme, or an optimization tool is a reason to run a quick check, not to panic. Save the test steps in your project notes: one AMP URL, the intended action, a test device, and the expected behavior. After the update, open the page in a fresh session, scroll through it, and tap the button. If it works, you’re done. Don’t change the color or icon “while you’re there” just because you’ve opened the settings.

If the update changes the public page, start with a safe before-and-after comparison. On a staging copy, disable only the extension you just added, check the core AMP output, and restore the last working setup if needed. Don’t manually update extension files or add unverified PHP or JavaScript snippets to control its markup. For this purpose, the extension’s standard settings, cache checks, and developer support are safer than a fragile change that a future update could remove.

What to include when contacting support

If your own checks don’t resolve the problem, a clear report can save time. Include the URL of one affected AMP page, the expected and actual behavior, the button action, steps to reproduce the issue, the status of the core AMP plugin, and whether you checked after clearing the cache. Don’t share customers’ personal phone numbers, passwords, or internal tokens publicly. For a WhatsApp button, it’s enough to say whether the correct conversation opens; you don’t need to share the messages.

“The plugin doesn’t work” doesn’t help much with troubleshooting. A more useful report would be: “The button doesn’t appear on the published AMP page after activation. The core AMP page opens, the cache has been cleared, and the same thing happens on another post.” This gives support a reproducible issue and lets you return to the original working setup if needed.

When AMP Floating Button Is a Good Fit

This extension makes sense when an AMP page has one verified next step: call, send a WhatsApp message, or visit a specific page to continue. Success comes from getting the details right, not from adding more effects: visitors recognize the icon, can read the page without content hidden behind the button, and reach the place they expected.

Before putting the button into regular use, save a short checklist: the AMP URL, action type, test device, expected behavior, and cache-clearing steps. It will help you handle an update, a changed phone number, or a new widget without making random adjustments. Once the check passes, you can download AMP Floating Button, install the extension through WordPress, and start with a minimal setup on one test page.