How to Add a Support Me Button to Your Website

The fastest way to add a support button to your website is to link a short piece of HTML — text or an image wrapped in an <a href> tag — to a hosted payment page, placed in your site header, sidebar, or footer. No embedded checkout or custom backend code is required.

Scope note: this guide uses FanBell as the worked implementation, but the anchor-tag method is identical for Stripe Payment Links, a PayPal Donate button, Ko-fi, or Buy Me a Coffee — a neutral fee comparison of those hosted destinations, with each platform's own published fee, appears further down.

Most creator websites already get visitors who read a post, watch an embedded video, or land from a search result — and then leave with no way to pay. A support button closes that gap without a shopping cart, an invoice, or a redirect to a third-party marketplace with its own branding. Don't have a website at all yet? See how to take commissions without a website for the no-site version of the same setup.

What does a "support me" button actually do?

A support button is a styled link, not a payment processor: it sends a visitor from your website to a hosted checkout page where the actual charge happens. Your site stores no card data and runs no payment code — the destination page handles amounts, offers, receipts, and payouts entirely.

For most creator websites, the simplest and most reliable version is a plain hyperlink styled to look like a button, pointing to a hosted page such as a FanBell link. FanBell's product documentation at fanbell.link/how-it-works states, under "From bio link to getting paid, in five steps," that "a fan pays the full price upfront — checking out as a guest by card, with no account to create and no app to install". FanBell's pricing page states that "the fan pays only the displayed price" and that "creator earnings = fan payment − platform fee − processing fee," so the button adds nothing to what the visitor is charged. The visitor clicks, lands on the destination page, and chooses an amount or offer — Tips, a Paid Private Question, a Personalized Shoutout, a Creator Service, or Wishlist / Project Support — without your website processing or storing any payment details.

Which hosted payment page should the button point to?

A support button can point at any hosted payment page, and the practical difference between options is the platform fee and what the destination page can sell. FanBell, Stripe Payment Links, PayPal, Ko-fi, and Buy Me a Coffee each produce a public URL you paste into one anchor tag, so the HTML is unchanged across all five.

Buy Me a Coffee's help center states plainly that "we charge a 5% transaction fee, and creators keep 95% of the earnings," and that "we don't charge a monthly fee," per its Frequently Asked Questions article. Ko-fi's pricing page lists its free Standard plan at "$0/month + 5% service fee" and Ko-fi Gold at "$12/month" with a "0% service fee," per ko-fi.com/pricing — so a Ko-fi tip on the free plan is not fee-free. PayPal's US merchant fee schedule sets the Donate Button rate for domestic donations at 2.89% plus a fixed fee of $0.49 USD, per PayPal's business fees page. Stripe charges "2.9% + 30¢ per successful transaction for domestic cards" with "no setup fees, monthly fees, or hidden fees," per stripe.com/pricing, and a Stripe Payment Link adds no platform fee on top of that rate. FanBell's pricing page lists a 12% platform fee at $0/month, charged only when a fan completes a payment. Platform fee is not the only variable worth comparing: a plain donation page collects money, while a page built around paid questions, shoutouts, or services collects money and a defined piece of work. Every setup instruction in this guide uses a FanBell link as the destination, but each instruction works unchanged with a Ko-fi, Buy Me a Coffee, Stripe Payment Link, or PayPal Donate URL.

Where should you place a support button on your website?

Place the support button where a visitor sees it without hunting: the site header or navigation bar, a sidebar, the end of each post, and the footer are the four spots that survive most page templates and mobile breakpoints. Combining two of those placements is a recommendation in this guide, not a measured conversion result.

Placing the button high on the page has measured support in eye-tracking research. Nielsen Norman Group's eye-tracking study found that users spent about 57% of their page-viewing time above the fold and 74% of their viewing time within the first two screenfuls, defined as the first 2,160 pixels, per NN/g's article Scrolling and Attention. The same NN/g article reports that its 2010 eye-tracking studies put 80% of users' viewing time above the fold, so attention has shifted down the page but not evenly: a header button still sits inside the region holding 57% of viewing time, while a footer-only button sits below the first two screenfuls that hold 74%.

The four placement notes in this section are practical guidance drawn from how site templates behave, not measured conversion data. A header or nav-bar button renders on every page and on both desktop and mobile templates, which is why a header button is the usual first choice when you can only add one. A sidebar button suits blogs and long-form content sites but is hidden by most responsive mobile layouts, so a sidebar button is worth pairing with a second placement. A button at the end of each post sits directly after the content the reader just finished. A footer link is the lowest-effort fallback and catches visitors who scroll to the bottom looking for contact or "about" information.

The table below compares the four placements on template behavior, not on measured conversion rates:

Avoid a single popup or modal as the only support mechanism: a static button in the layout cannot be dismissed by accident, while an interstitial can.

Should you embed a widget or just link a plain button?

For a personal or small creator website, a plain hyperlink styled as a button is the safer default: it adds no third-party JavaScript, has nothing that breaks on a template update, and renders identically on every browser. Reserve an embedded widget for sites that genuinely need in-page checkout rather than a redirect.

Third-party embed widgets (an iframe or a JavaScript snippet that renders a form in place) can look more polished, but they add page weight and a dependency your site does not control. The median desktop page already uses 708 KB of JavaScript and the median mobile page 646 KB, per HTTP Archive's 2025 Web Almanac page weight chapter; the same chapter puts the median desktop home page at 2,412 KB in total weight. Every additional embed adds to that budget and to page load time.

"To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads." — Google's web.dev guide to Largest Contentful Paint

Largest Contentful Paint measures how long the largest visible element on a page takes to render, and Google counts LCP as one of the three Core Web Vitals. Google's published good-LCP threshold is 2.5 seconds or less at the 75th percentile of page loads, per web.dev's LCP guide — a budget a heavy support-button widget can eat into, which is a poor trade for a component whose entire job is to be clicked.

How do you add a support button with plain HTML and CSS?

The minimum working version is a single anchor tag pointing at your payment page, plus one optional CSS rule that gives the link padding, a background color, and rounded corners. Any static site, template, or hand-written HTML page can host those two snippets without a plugin, a build step, or a JavaScript framework.

Hand-written HTML is not a niche case: 30.9% of all websites use none of the content management systems that W3Techs monitors, per W3Techs' content management systems usage report — so the anchor-tag route covers close to a third of the web on its own.

<a href="https://fanbell.link/yourname" class="support-btn">Support Me</a>

.support-btn {
 display: inline-block;
 padding: 10px 20px;
 background: #111;
 color: #fff;
 border-radius: 6px;
 text-decoration: none;
 font-weight: 600;
}

Open the destination link in the same tab rather than a new one — that is, skip target="_blank" — so the button behaves like the rest of your site's navigation. The reason is accessibility rather than popup blocking: W3C technique G200 states that "in general, it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content," per G200: Opening new windows and tabs from a link only when necessary. If your site builder does not allow custom CSS, an unstyled text link still works — a working plain link beats a broken styled one.

How do you add a support button in WordPress?

In WordPress the route depends on your theme type. Block themes use Appearance → Editor to place a Buttons block inside the Header template part. Classic themes use Appearance → Widgets to place a Buttons or Custom HTML block in a sidebar or footer widget area. Neither route needs a plugin or any PHP editing.

WordPress is the largest content-management system on the web, used by 40.7% of all websites and holding a 58.9% CMS market share, per W3Techs' content management systems usage report — which is why the block-theme and classic-theme paths are both worth knowing.

Block themes (Twenty Twenty-Four, Twenty Twenty-Five, and other modern themes). WordPress.org's Site Editor documentation confirms that block themes are edited from Appearance → Editor in the dashboard. The steps:

1. Go to Appearance → Editor in the WordPress dashboard.
2. Open Patterns → Template Parts → Header (or Templates if you want the button on one template only).
3. Click Edit, then click the + Block Inserter and choose the Buttons block. WordPress.org's Buttons block documentation describes exactly that step: "To add the Buttons block to a page, click the + Block Inserter button in the top-left corner of the editor and choose the Buttons block".
4. Type the label — "Support Me" — then select the text, click the link icon, and paste your payment-page URL.
5. Click Save. The button now renders in the header on every page that uses that template part.

Classic themes (themes without a Site Editor entry). WordPress.org's Block-based Widgets Editor documentation states that the block-based widgets editor "was introduced in 5.8 for those who use classic themes with widgets", so any classic theme on WordPress 5.8 or later can hold the same blocks. Go to Appearance → Widgets, pick the sidebar or footer widget area, click the + inserter, and add either a Buttons block or a Custom HTML block containing the anchor tag <a href="https://fanbell.link/yourname" class="support-btn">Support Me</a>.

For a button after every post. Add the Buttons block at the end of a post, then save it as a synced pattern so one edit updates every copy. WordPress 6.3 renamed Reusable Blocks to Patterns, and "a synced pattern will behave in exactly the same way as a reusable block," per WordPress.org's Block Patterns documentation.

How do you add a support button in Squarespace or Wix?

Squarespace and Wix both ship a native button element and a site-wide header, so no HTML is required in either. In Squarespace you edit the header button from Edit site header; in Wix you drag a Text & Icon Button into the header area. Placing the button in the header makes it appear on every page in both builders.

Wix holds a 6.1% CMS market share (4.2% of all websites) and Squarespace a 3.5% share (2.5% of all websites), per W3Techs' content management systems usage report — smaller shares than WordPress's 58.9%, but neither builder's native button requires writing any code.

Squarespace. The Help Center's Build your site header article gives the header-button steps directly — to add it, "hover over the header and click Edit site header. Click Add elements. Switch the Button toggle on," and to point it somewhere, "click the header button, then click Edit design. Under Content, edit the button text and link". For an in-page or end-of-post button instead, Squarespace's Button blocks article instructs you to "hover over the section and click Add block or + to open the block menu, then click Button," then enter the label in the Text field and your payment URL as the destination. Documented limitation: Squarespace's header article describes editing the header button in the singular, and a second side-by-side header button is not a documented option in the Help Center as of September 2026 — a header button plus an in-page Button block is the supported way to get two.

Wix. Wix's Adding and Setting Up a Text & Icon Button article documents the insert step — "Click Add Elements on the left side of the editor. Click Button. Click Text & Icon Buttons," then click or drag the button onto the page — and Adding a Link to a Button covers setting the destination URL. For site-wide placement, Wix's Placing Elements in Your Header, Footer and Page article states that "your header and footer are visible on all pages, meaning that elements you place inside them can be accessed from every page of your site". Documented limitations: Wix confirms that per-page header designs are "currently not possible" in its request article on different header and footer designs, and its mobile header and footer article notes that some mobile layouts do not display headers, footers, or elements set to show on all pages.

Neither Squarespace's Button blocks article nor Wix's Text & Icon Button article lists a pricing-plan restriction on button elements or header buttons; the documented limits in both Help Centers concern layout and mobile rendering, not plan tier.

What makes a support button easy to tap on mobile?

A support button needs a tap target large enough for a thumb and a style visible enough to spot while scrolling. The W3C sets a concrete minimum size for pointer targets, so the requirement is measurable rather than a matter of taste, and mobile now accounts for the majority of worldwide page views.

Mobile devices accounted for 50.13% of worldwide page views in August 2026 against desktop's 49.87%, per StatCounter GlobalStats' Desktop vs Mobile Market Share Worldwide. A button that is comfortable only with a mouse therefore fails for slightly more than half of the visitors who will see it.

"The size of the target for pointer inputs is at least 24 by 24 CSS pixels" — W3C Web Accessibility Initiative, Understanding Success Criterion 2.5.8: Target Size (Minimum)

WCAG 2.2 sets two numeric tap-target sizes for a button like this one: Success Criterion 2.5.8 (Level AA) requires pointer targets of "at least 24 by 24 CSS pixels," per the W3C's Understanding SC 2.5.8, and Success Criterion 2.5.5 (Level AAA) raises that to "at least 44 by 44 CSS pixels," per the W3C's Understanding SC 2.5.5. In practice, hitting 44 by 44 CSS pixels means padding the button element itself rather than only its text, leaving clear space between the button and neighboring links so a thumb tap does not hit the wrong one, and choosing a color that contrasts with the surrounding background.

Two automated-testing figures show how often buttons and links get this wrong. Low-contrast text below the WCAG 2 AA thresholds was found on 83.9% of the one million home pages tested, up from 79.1% the year before, per the WebAIM Million report. Empty buttons — a button with no discernible text for a screen reader — were detected on 30.6% of those same one million home pages, up from 29.6% the year before, and empty links on 46.3% of them, per the WebAIM Million report, which is the argument for giving your support button real text rather than a bare icon.

What should the button say to get more clicks?

Label the button with what clicking actually does: "Support Me," "Tip Me," or "Ask Me a Question" name the transaction, while "Links" or "More" hide the offer inside a menu the visitor must open first. Match the label to whichever offer your destination page leads with.

Specific link text is also an accessibility requirement, not only a style preference: WCAG Success Criterion 2.4.4, Link Purpose (In Context), requires that "the purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context," per the W3C's Understanding SC 2.4.4. "Support Me" passes that test on its own; "More" does not. Ambiguous link text remains widespread: 15.2% of the one million home pages tested had ambiguous link text such as "click here," "more," or "continue," up from 13.7% the year before, per the WebAIM Million report.

The label advice that follows is practical guidance rather than measured data. If your FanBell page leads with Tips, "Support Me" or "Tip Me" sets accurate expectations. If the page leads with Paid Private Questions, "Ask Me a Question" names the transaction instead of asking the visitor to guess. Stacking several vague calls to action beside one another gives the visitor more to decide about, not less. The same plain-language principle applies to the words around the button, not just the label — see how to ask fans for support without sounding desperate.

What fees apply when someone clicks and pays?

Two costs apply when a visitor clicks through and pays: FanBell's 12% platform fee, taken only on a completed payment, and the card-processing fee Stripe charges on the same transaction. FanBell charges no monthly subscription and nothing for clicks that never become payments. A $10 payment nets the creator $8.21 under FanBell's 12% fee plus Stripe's US card rate.

FanBell's pricing page is the primary source for the 12% figure, and its "How payments & payouts work" section states the arithmetic directly: "Creator earnings = fan payment − platform fee − processing fee." Stripe lists 2.9% + 30¢ per successful transaction for widely used domestic credit and debit cards, plus an additional 1.5% for international cards, on Stripe's published pricing page — so 2.9% + 30¢ is a US domestic online-card rate, not a universal one, and it varies with currency conversion and payment method.

Worked example on a $10 support payment, using FanBell's 12% and Stripe's US online-card rate:

The flat 30¢ makes small payments proportionally more expensive: at FanBell's 12% platform fee plus Stripe's 2.9% + 30¢ US online-card rate, a $5 payment nets about $3.96 (roughly 79%), a $10 payment nets $8.21 (roughly 82%), and a $50 payment nets $42.25 (roughly 85%). Nudging the default amount up is therefore a fee-efficiency argument as well as a revenue one.

FanBell sets no follower minimum and no audience threshold for adding or using a support button, and FanBell's pricing page lists no plan requirement beyond connecting a payout account. On payouts, FanBell's pricing page is explicit under "How payments & payouts work": "Payments are processed by Stripe. To receive money, creators connect a Stripe Express account," and "Stripe handles the creator's payout schedule".

What comes next after the button is live?

After the button is live, the destination page does the remaining work: a headline, a specific reason to give, and a clear offer give a visitor something to act on that a bare payment form does not. Connecting a payout account is a separate step from placing the button, and can be done after the button ships.

For the copy that destination page needs, see what to write on a creator tip page. If you have not connected a payment account yet, see whether you need Stripe or a business account for your first tip before publishing the button live.

A website button is also not the only place to link out. Many creators pair a website button with a bio link on Instagram or TikTok pointing to the same destination page, so a visitor arriving from either channel lands on the same offer.

A Tips offer is the simplest thing to put behind a website support button — no scope to define, no turnaround to promise, and no reply required — but the same button can point to any combination of offers on your paid fan interaction page.

Frequently asked questions

Common questions about website support buttons fall into five areas: whether adding one requires a developer, whether the link should open a new tab or the same tab, what the button costs while nobody clicks it, whether a single button can serve several paid offers, and whether receiving payouts requires a registered business.

Do I need a developer to add a support button to my website?

No. A plain HTML anchor tag styled as a button takes one copy-paste snippet, and page builders have native button blocks that need no code at all. WordPress documents its Buttons block at wordpress.org/documentation/article/buttons-block, Squarespace documents Button blocks at support.squarespace.com, and Wix documents its Text & Icon Button at support.wix.com.

Should the button open a new tab or the same tab?

Open it in the same tab. W3C technique G200 advises that "in general, it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content," per W3C G200. Use target="_blank" only when you have a specific reason to keep your own page open alongside the payment page.

Does the button cost anything to have on my site if no one clicks it?

No. FanBell has no monthly fee, and the 12% platform fee applies only to a completed payment, per FanBell's pricing page. The only ongoing cost is whatever you already pay to host your website.

Can I use the same button for tips, paid questions, and services?

Yes. A single link to a FanBell page can lead to multiple offers — Tips, Paid Private Questions, Personalized Shoutouts, Creator Services, and Wishlist / Project Support — so one website button can support all of them at once rather than needing a separate button per offer, per FanBell's how it works page, which lists those offer types under "Turn on the offers that fit you."

Do I need a business account to receive payments through the button?

No registered business is required. FanBell's pricing page states only that "to receive money, creators connect a Stripe Express account", and Stripe's own required verification information documentation shows that a connected account's business_type can be set to individual rather than company. Verification requirements vary by country and account type, so check Stripe's country-specific requirements for your own location. See do you need Stripe or a business account for your first tip for the full setup requirements.

Create your free FanBell page