Buffalo’s Fire launches “The Daily Spark” widget for partner sites
Timely stories from Indian Country every day, ready to embed
Buffalo’s Fire, the independent news site from the Indigenous Media Freedom Alliance, has launched The Daily Spark widget—a new service that allows external websites to feature timely news and updates from Indian Country.
The widget delivers “daily sparks” — brief, must-read updates on essential stories—directly to the websites of partner organizations. This service broadens the reach of Native independent news and offers media outlets a steady stream of fresh, relevant content for their audiences.
The Daily Spark widget is easy to integrate and adapts to the look and feel of the host site. Administrators can choose from light, dark, or auto themes, and set the number of updates displayed—from three to ten. While the widget includes minimal styling to blend into existing layouts, it can be fully customized via CSS.
To implement the widget, websites embed a simple HTML snippet. Buffalo’s Fire asks interested sites to contact us for a partner ID, helping us track where the spark has caught fire.
The Daily Spark will include a sponsor, selected from organizations that share the values and principles of the Indigenous Media Freedom Alliance.
This initiative supports Buffalo’s Fire’s mission to foster conversation and understanding around tribal community, culture, and communication.
Technical Implementation Notes for "The Daily Spark" Widget
"The Daily Spark" widget is designed to be a lightweight, asynchronous, and easily embeddable solution for displaying curated news updates from Buffalo's Fire on partner websites. It consists of a single HTML div element that acts as a container and a JavaScript file that dynamically fetches and renders the content. The widget is designed to inherit the stylistic properties of the host page for seamless integration, while also offering several customization options via data attributes.
Core Implementation
To add the widget to a webpage, follow these two steps:
Place the Container: Insert the following HTML div element at the location in your page's <body> where you want the widget to appear.
<div class="spark" data-partner-url="https://your-website-url.com" data-partner-id="YOUR_PARTNER_ID" data-theme="light" data-limit="5"></div>
Include the Script: Place the following script tag just before the closing </body> tag of your HTML document. Placing it here ensures that it does not block the rendering of the rest of your page content. The async attribute allows the script to be downloaded in the background and executed when ready, further optimizing page load performance.
<script src="https://cdn.buffalosfire.com/the-daily-spark.js" async></script>
Configuration via Data Attributes
The widget's behavior is controlled through several data-* attributes on the container div:
- data-partner-url (Required): This attribute should be set to the full URL of the website where the widget is being displayed (e.g., "https://your-website-url.com"). This helps us understand where the content is being shared.
- data-partner-id (Required): This is a unique identifier provided by Buffalo's Fire. We kindly request that you contact us to receive your partner-id before deploying the widget. This allows for better partnership management and is essential for future features, such as the sponsored content opt-out.
- data-theme (Optional): This attribute controls the widget's color scheme.
- "light": Sets a light theme with dark text, suitable for light-colored page backgrounds."dark": Sets a dark theme with light text, suitable for dark-colored page backgrounds."auto": The widget will attempt to automatically detect the user's system preference (light or dark mode).If omitted, the theme will default to "light".
- data-limit (Optional): This attribute specifies the number of "spark" updates to display.
- It accepts an integer from 3 to 10.If the attribute is omitted, it will default to 5 items.
Styling and CSS Customization
The widget is intentionally designed with minimal styling to ensure it naturally adapts to the host website's existing CSS, particularly inheriting font families, sizes, and colors from the parent container.
For more advanced customization, you can target the widget using standard CSS. The main container has a class of .spark. You can use this class to override default styles or add new ones. For example, to add a border and custom padding, you could add the following to your site's stylesheet:
CSS
.spark { border: 1px solid #cccccc; padding: 15px; border-radius: 8px;}
By targeting child elements within the .spark container, you can achieve full control over the look and feel to match your site's branding perfectly.
Sponsor
We need help to spread our voice as loud as we can, so The Daily Spark will have a sponsor. Partners will be notified in advance on the modality it will be integrated in the widget.
Help us keep the fire burning, make a donation to Buffalo’s Fire
As a 501(c)(3) nonprofit, we exist to illuminate tribal government for everyone who cares about transparency in Native issues. Our work bridges the gap left by tribal-controlled media and non-Native, extractive journalism, providing the insights necessary for truly informed decision-making and a better quality of life. Because the consequences of restricted press freedom affect our communities every day, our trauma-informed reporting is rooted in a deep, firsthand expertise.
Every gift helps keep the fire burning. A monthly contribution makes the biggest impact. Cancel anytime.