This article demonstrates an alternative method for integrating the Preferred Sources library using an ES Module (.mjs) distribution. Alongside standard script tag inclusion, developers working in environments that utilize module bundlers or <script type="module"> tags can opt to import the SDK directly and coordinate runtime execution using top-level imports.
Below is a live widget instantiated entirely via top-level ES Module import and direct instance interaction:
preferredSource directly from publisher.mjs.preferredSource.init() directly on the imported instance to configure runtime options..onclick = () => { preferredSource.addPreferredSource(); }.<script type="module">
// 1. Import module singleton directly
import { preferredSource } from "https://news.google.com/swg/js/v1/publisher.mjs";
// 2. Initialize directly using the imported module instance
preferredSource.init({ theme: 'dark' });
// 3. Programmatically bind flow invocation via onclick
const triggerBtn = document.querySelector('#custom-esm-trigger-btn');
triggerBtn.onclick = () => {
preferredSource.addPreferredSource();
};
</script>