ChartMasters Artist Data Widget

Hello music fans and webmasters!

Want to display the latest streaming data for your favorite artists directly on your own website or fan page? ChartMasters.org now offers an easy way to embed reel time artist data with our new Artist Data Widget!

What is the ChartMasters Artist Data Widget?

Our widget allows you to showcase key performance indicators for a music artist of your choice. The first version focuses on total streams on Spotify, sourced directly from our extensive database. We may add more data shortly, looking for your feedback!

The widget is a super-efficient way to keep your visitors informed with up-to-date, reliable information, while making your page dynamic. An example below.

Loading ChartMasters Data...

Features:

Easy to Use: Add to your site with a simple WordPress plugin or a small HTML snippet.
Always Up-to-Date: Data is fetched live from ChartMasters.org.
Credible Source: Showcases data from a trusted name in music analytics.
Customizable: Display data for any artist in our database by using their unique artist ID.
Backlink: Includes a respectful attribution link to ChartMasters.org, helping us maintain this service.

How to Add the Widget to Your WordPress Site (Recommended Method):

The easiest way to add the widget is by using our official WordPress plugin.

Download the Plugin:
- Download ChartMasters Artist Data Widget Plugin ZIP File
Install the Plugin:
- Log in to your WordPress admin dashboard.
- Navigate to Plugins > Add New.
- Click Upload Plugin at the top.
- Choose the ZIP file you downloaded and click Install Now.
- Once installed, click Activate Plugin.
Find the Artist ID:
- To display data for a specific artist, you need their ChartMasters Artist ID. Currently, these are based on Spotify Artist IDs.
- You can find an artist’s Spotify ID by:
  - Going to the artist’s page on Spotify.
  - Clicking the “…” (three dots) menu next to their name.
  - Choosing “Share” -> “Copy Spotify URI” or “Copy link to artist”.
  - The ID is the alphanumeric string in the URI (e.g., for spotify:artist:ID_HERE, the ID is ID_HERE) or at the end of the URL path.
Use the Shortcode:
- Go to the page or post where you want to display the widget.
- Add a “Shortcode” block (in the Gutenberg editor) or paste the following into the classic editor’s text view:
  [cm_artist_widget artist_id="YOUR_ARTIST_ID_HERE"]
- Replace YOUR_ARTIST_ID_HERE with the actual Artist ID you found.
- Save your page, and the widget will appear!

Example Shortcode:

To display data for Taylor Swift (ID 06HL4z0CvFAxyc27GXpf02), you would use:
[cm_artist_widget artist_id="06HL4z0CvFAxyc27GXpf02"]

Alternative: Manual HTML Embed (For Non-WordPress Sites or Advanced Users):

If you’re not using WordPress or prefer a manual setup, you can use the following HTML code.

Find the Artist ID (See step 3 in the WordPress plugin instructions above).
Copy and Paste Code: Copy the code block below and paste it into your website’s HTML where you want the widget to appear.
Update Artist ID: In the copied code, find data-artist=”YOUR_ARTIST_ID_HERE” and replace YOUR_ARTIST_ID_HERE with the actual Artist ID.

<!-- ChartMasters.org Artist Widget Start -->
<div id="chartmasters-widget-container"
     data-artist="06HL4z0CvFAxyc27GXpf02">
    <p style="text-align: center; color: #555; padding: 20px 10px;">Loading ChartMasters Data…</p>
</div>

<style>
    #chartmasters-widget-container {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
        padding: 12px;
        max-width: 280px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        color: #333;
        margin: 1em auto;
        overflow: hidden;
    }
    #chartmasters-widget-container h3 {
        background: linear-gradient(135deg, #6f42c1, #4a148c);
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        margin: -12px -12px 10px -12px;
        padding: 10px 12px;
        text-align: center;
        border-bottom: 1px solid #eee;
    }
    #chartmasters-widget-container p {
        margin: 8px 0;
        font-size: 13px;
        color: #555;
    }
    #chartmasters-widget-container p strong {
        color: #333;
        font-weight: 500;
    }
    #chartmasters-widget-container .cm-data-item { /* Class for data lines */
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
    }
    #chartmasters-widget-container .cm-data-item span:last-child {
        font-weight: 600;
        color: #4a148c;
    }
    #chartmasters-widget-container hr {
        border: 0;
        border-top: 1px solid #f0f0f0;
        margin: 10px 0;
    }
    #chartmasters-widget-container .cm-footer {
        font-size: 11px;
        text-align: center;
        margin-bottom: 0;
        padding-top: 5px;
    }
    #chartmasters-widget-container .cm-footer a {
        color: #6f42c1; /* Link color */
        text-decoration: none;
        font-weight: 500;
    }
    #chartmasters-widget-container .cm-footer a:hover {
        text-decoration: underline;
    }
    #chartmasters-widget-container .cm-error-message {
        color: #d8000c; /* Red for errors */
        background-color: #ffdddd;
        border: 1px solid #d8000c;
        padding: 10px;
        border-radius: 4px;
        text-align: center;
        font-size: 13px;
    }
</style>

<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1">
(function() {
    const widgetContainer = document.getElementById('chartmasters-widget-container');
    if (!widgetContainer) {
        console.error('ChartMasters Widget: Container not found.');
        return;
    }

    const artistId = widgetContainer.getAttribute('data-artist');
    if (!artistId || artistId.trim() === '' || artistId === 'ARTIST_ID_PLACEHOLDER') {
        widgetContainer.innerHTML = `<div class="cm-error-message">Error: Artist ID not specified. Please check the data-artist attribute.</div>`;
        return;
    }

    const apiUrl = `https://chartmasters.org/wp-admin/admin-ajax.php?action=get_artist_widget_data&artist_id=${encodeURIComponent(artistId)}`;

    widgetContainer.innerHTML = '<p style="text-align: center; color: #555; padding: 20px 10px;">Fetching Artist Data...</p>';

    fetch(apiUrl)
        .then(response => {
            if (!response.ok) {
                return response.json().catch(() => null).then(errData => {
                    let detail = `HTTP error! Status: ${response.status} ${response.statusText}`;
                    if (errData && errData.data && errData.data.message) detail = errData.data.message;
                    else if (errData && errData.data && typeof errData.data === 'string') detail = errData.data;
                    throw new Error(detail);
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.success && data.data) {
                const artistData = data.data;
                widgetContainer.innerHTML = `
                    <h3>${escapeHTML(artistData.name)}</h3>
                    <div class="cm-data-item">
                        <span><strong>Total Streams:</strong></span>
                        <span>${escapeHTML(String(artistData.streams))}</span>
                    </div>
                    <hr>
                    <p class="cm-footer">
                        Data from <a href="${escapeHTML(artistData.chartmasters_url || 'https://chartmasters.org')}" target="_blank" rel="noopener noreferrer" title="Visit ${escapeHTML(artistData.name || 'ChartMasters')} on ChartMasters.org">ChartMasters.org</a>
                    </p>
                `;
            } else {
                let errorMessage = 'Could not load artist data.';
                if (data.data && typeof data.data === 'string') errorMessage = data.data;
                else if (data.data && data.data.message) errorMessage = data.data.message;
                else if (data.message) errorMessage = data.message;
                throw new Error(errorMessage);
            }
        })
        .catch(error => {
            console.error('ChartMasters Widget Error:', error);
            widgetContainer.innerHTML = `<div class="cm-error-message">Error: ${escapeHTML(error.message)}</div>
                                         <p class="cm-footer" style="margin-top: 8px;">
                                             Powered by <a href="https://chartmasters.org" target="_blank" rel="noopener noreferrer">ChartMasters.org</a>
                                         </p>`;
        });

    function escapeHTML(str) {
        str = String(str || '');
        return str.replace(/[&<>"']/g, function (match) {
            switch (match) {
                case '&': return '&';
                case '<': return '<';
                case '>': return '>';
                case '"': return '"';
                case "'": return ''';
                default: return match;
            }
        });
    }
})();
</script>
<!-- ChartMasters.org Artist Widget End -->

Terms of Use:

By using the ChartMasters Artist Data Widget (“Widget”), you agree to the following terms:

Attribution: You agree to maintain the visibility and integrity of the attribution link back to ChartMasters.org that is included within the Widget. This link helps us continue to provide and improve this free service. The link should not be hidden, removed, or altered in a way that diminishes its visibility or function.
Permitted Use: The Widget is provided for the purpose of displaying ChartMasters artist data on your website or platform.
Data Accuracy: While we strive for accuracy, ChartMasters.org does not guarantee the absolute correctness or timeliness of all data displayed and is not liable for any discrepancies.
No Modification of Core Functionality: You may not alter the core data-fetching or display mechanisms of the Widget in a way that misrepresents the data or its source.
Right to Terminate: ChartMasters.org reserves the right to modify or discontinue the Widget service, or your access to it, at any time, particularly in cases of misuse or violation of these terms.
No Warranty: The Widget is provided “as is” without any warranties of any kind.
Limitation of Liability: ChartMasters.org will not be liable for any damages arising from the use or inability to use the Widget.

Need Help or Have Feedback?

If you have any questions, encounter issues, or have suggestions for improving the widget, please visit our forum below.

This article is being discussed in our forum, join us to share your comments! »