0121 468 0600 | info@opace.co.uk
Get in Touch

Free SEO tool · Seven platforms covered

Google Preferred Source Button Generator

Configure Google's official Preferred Sources button, or a custom-styled one, and copy ready-to-paste code for WordPress, Elementor, Webflow, Shopify, Astro, React and plain HTML.

Build your button Check eligibility first
On WordPress? See Opace WordPress development
  • 7platforms covered
  • 3button modes
  • 0data sent to servers

Use the generator

Build your button.

Pick a platform and mode, style it, preview it live and copy exact snippets. Code generation runs entirely in your browser; your domain and label are never transmitted.

Needed for the deeplink; never sent anywhere.

Platform
Mode
Theme

Shown on custom and deeplink buttons. The official button's text is set by Google.

Style preset
Jump to your code ↓

Live preview

Add as a preferred source

Preview only. The button is rendered by Google's script for this page's domain; on your site it will offer your domain. If the button doesn't render here, Google's script may not recognise this preview context; your embedded code is unaffected.

Head script

▸ Paste inside your page's <head>:

<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>

Button element

▸ Paste where you want the button to appear:

<div google-add-preferred-source-btn></div>

Three things worth knowing before you ship it:

  1. Placement converts. The header is the worst place, because readers ignore CTA clutter. The spots that work: straight after your strongest insight in an article, the end of posts, and a quiet footer link.
  2. No conversion callback exists. Google's SDK reports nothing back when a reader completes the flow, so any analytics can only count button clicks, not confirmed adds. Anyone claiming otherwise is guessing.
  3. Check eligibility first. Only domains and subdomains qualify, and your site must appear in Google's source tool. Run it through our eligibility checker in ten seconds.

How the generator works

Configure it once. Copy exact code.

Every snippet uses only Google's documented API surface, assembled for the platform you actually publish on.

01 / Configure

Pick your platform and mode.

Official popup, custom button or deeplink, across seven platform tabs from plain HTML to React.

02 / Preview

Style it and see it live.

Themes, thirty languages and colour presets, previewed in a sandboxed frame before you commit.

03 / Copy

Paste it where it belongs.

Each block says exactly where it goes: head, template, widget, Liquid file or component.

The API surface comes straight from Google's official Preferred Sources documentation.

Which mode?

Popup button, custom button or deeplink.

01

Auto mode

The official popup button.

Two lines of code. Google's script renders its standard button where you place a div, and clicking it opens the add-source popup without the reader leaving your page. Quickest to ship and instantly recognisable, but Google controls the look.

02

Manual mode

Your button, Google's popup.

The script's manual mode exposes exactly two methods, init and addPreferredSource, and your click handler calls the second. Choose this when the standard button clashes with your brand.

03

Deeplink fallback

A plain link that works everywhere.

No JavaScript, so it works in email newsletters, RSS footers and anywhere scripts are stripped, at the cost of sending readers to Google's page. Many publishers ship the popup on-site and the deeplink in their newsletter.

WEBPopup on-siteAuto or manual mode inside articles and footers @Email newslettersThe deeplink works where scripts never load RSSFeed footersA plain link survives every feed reader TXTSanitised HTMLComment areas, syndication and script-stripped pages

Honest by design

Documented API only. No inflated claims.

What this generator does, and deliberately does not do.

  1. 01Documented API only. Every snippet uses Google's published surface: publisher.js, two attributes, two methods, one deeplink. Nothing invented.
  2. 02No conversion callback. Google's SDK reports nothing back when a reader completes the flow. Our code and our plugin count clicks, never confirmed adds.
  3. 03Your domain stays yours. Code generation runs entirely in your browser. Your domain and label are never transmitted, stored or logged.
  4. 04The SDK stays in its box. Google's script loads only inside the sandboxed preview frame, never on this page itself.
  5. 05No ranking promises. The button confers no ranking benefit. It persuades readers to opt in; that's its whole job, and it's enough.
  6. 06Honest previews. The official button is rendered by Google for this page's context. If it won't render here, we say so rather than faking it.

On WordPress?

Skip the code entirely.

Our free plugin ships the popup button, a Gutenberg block, a shortcode, a floating banner and GA4 click analytics, built by the Opace WordPress development team. The snippets this generator produces remain the manual alternative.

Get the WordPress plugin Check eligibility first
Manual route · functions.php
Generated for WordPress, auto mode
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script( 'google-preferred-source',
        'https://news.google.com/swg/js/v1/publisher.js',
        array(), null,
        array( 'strategy' => 'async' ) );
} );

✔ Then one Custom HTML block for the button

The Preferred Sources suite

One set of free tools, whatever your stack.

Everything you need to check eligibility, add the button and measure clicks, alongside the wider Opace tool catalogue.

Questions before you ship it

Modes, tracking and placement, in plain English.

What does the official Google Preferred Sources button do?

It's rendered by Google's own script (publisher.js). When a reader clicks it, a Google popup opens on your page letting them add your site as a preferred source in a couple of clicks, without leaving your article. It replaced the older approach of linking readers away to Google's preferences page.

What's the difference between auto mode, manual mode and the deeplink?

Auto mode renders Google's standard button into a <div> you place. It's the quickest, but Google controls the look. Manual mode lets your own styled button trigger the same popup via Google's JavaScript API. The deeplink is a plain link to google.com/preferences/source?q=yourdomain.com with no JavaScript at all, so it works everywhere, including email newsletters, but it takes readers off your page.

Is this generator using an official Google API?

Yes, and only the documented surface: Google's publisher.js script, the google-add-preferred-source-btn element with data-theme and data-lang, the manual-mode init() and addPreferredSource() methods, and the documented deeplink URL. Nothing proprietary, nothing undocumented.

Can I track how many readers add my site as a preferred source?

Only partially, and honestly: Google's SDK provides no completion callback or event, so nobody can count confirmed adds. You can count clicks on the trigger by wrapping your own analytics event around the button click (our WordPress plugin does this with GA4 out of the box).

Where should I place the button for the best conversion?

Not in your header, where it competes with primary CTAs and converts poorly. The high-performing spots are: immediately after your strongest insight within an article, the end of posts, and a persistent but quiet footer link.

Will the custom-styled button still open Google's popup?

Yes. Manual mode exists exactly for this: your button, any styling you like, and clicking it calls Google's addPreferredSource() which opens the same official popup.

Which languages does the button support?

Dozens. You set data-lang with an ISO code, or let it follow the reader's browser language. Google publishes the full supported list as a CSV linked from its Preferred Sources documentation.

Does adding the button help my SEO by itself?

No, the button confers no ranking benefit. Its job is persuasion: every reader who opts in sees more of your content in Top Stories, Discover and AI Overviews, and preferred users click through roughly twice as often per Google. Treat placement and wording as conversion optimisation.

My site is on a platform not listed, like Ghost, Hugo, Drupal or Squarespace?

Use the Plain HTML tab: the head script goes in your platform's "code injection" or head area and the button markup anywhere HTML is accepted. Framework packages (React, Vue, Svelte, Astro and more) are on our GitHub.

Created by Opace Digital Agency

Need more than the generator?

Opace builds practical SEO and publishing systems from Birmingham for organisations across the UK and internationally, and this free suite comes from that client work.

Under a minute to working code

Configure it. Copy it. Ship it.

Build your button Browse all Opace tools

This tool is independently developed by Opace Digital Agency and is not affiliated with, endorsed by or sponsored by Google. Google and the Google logo are trademarks of Google LLC.