Preferred Sources: Implement with JS

When you need programmatic control over runtime settings (such as dark theme formatting or multi-language localization), or wish to manually trigger the Preferred Source flow from a custom user interface, you can integrate via JavaScript using traditional IIFE callback queues.

Try it out

This demo uses preferred-sources-control="manual" to suppress automatic DOM scanning, sets a custom dark theme via preferredSource.init({theme: 'dark'}), and connects a custom styled HTML button to manually fire preferredSource.addPreferredSource():

How to Implement

Include publisher.js with the preferred-sources-control="manual" attribute.
Push an initialization callback onto the global self.PREFERRED_SOURCE queue.
Call preferredSource.init(options) with your configuration options and bind custom buttons via .onclick = () => { preferredSource.addPreferredSource(); }.

<script async preferred-sources-control="manual" src="https://news.google.com/swg/js/v1/publisher.js"></script>
<script>
  (self.PREFERRED_SOURCE = self.PREFERRED_SOURCE || []).push(function(preferredSource) {
    // 1. Initialize buttons with explicit dark styling
    preferredSource.init({ theme: 'dark' });

    // 2. Programmatically launch flow on custom button click via onclick
    const triggerBtn = document.querySelector('#custom-trigger-btn');
    triggerBtn.onclick = () => {
      preferredSource.addPreferredSource();
    };
  });
</script>

Subscribe with Google