{"id":20314645,"url":"https://github.com/dashpilot/netlify-build-status-widget","last_synced_at":"2026-04-04T13:39:37.546Z","repository":{"id":44624868,"uuid":"236357299","full_name":"dashpilot/netlify-build-status-widget","owner":"dashpilot","description":"Widget that shows the current status of your Netlify builds. Ideal for use with Netlify CMS","archived":false,"fork":false,"pushed_at":"2022-02-03T20:36:26.000Z","size":12890,"stargazers_count":17,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T13:11:31.319Z","etag":null,"topics":["netlify","netlify-cms","status-widget"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dashpilot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-26T18:34:12.000Z","updated_at":"2023-06-06T17:57:15.000Z","dependencies_parsed_at":"2022-07-20T20:34:33.640Z","dependency_job_id":null,"html_url":"https://github.com/dashpilot/netlify-build-status-widget","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fnetlify-build-status-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fnetlify-build-status-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fnetlify-build-status-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fnetlify-build-status-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dashpilot","download_url":"https://codeload.github.com/dashpilot/netlify-build-status-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248447609,"owners_count":21105140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["netlify","netlify-cms","status-widget"],"created_at":"2024-11-14T18:16:10.007Z","updated_at":"2026-04-04T13:39:37.512Z","avatar_url":"https://github.com/dashpilot.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Stable 1.0.6](https://img.shields.io/badge/stable-1.0.6-33a2d8)\n![Dependancies up to date](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen)\n![vanilla javascript](https://img.shields.io/badge/vanilla-js-brightgreen)\n\n# Netlify Build Status Widget (with live status display)\n\nWidget that shows the current status of your Netlify builds. Ideal for use with Netlify CMS\n\n# The problem this widget solves\n\nIf you use Netlify CMS, there currently is no way to see the status of your build. You press save, visit your site, and the changes aren't visible (yet), and there's no way to know when the build is finished. This can be especially confusing for users who are used to Wordpress and other 'monolithic' CMS systems. I ran into this issue myself, and saw that [others](https://github.com/netlify/netlify-cms/issues/2324) were also looking for a solution.\n\nThis package displays a widget on your site (if you're logged in to Netlify CMS), displaying the current build status of your site. So you press save in Netlify CMS, visit your site, and get live updates of the build status! The script contains the widget code as well as a Netlify function that checks the build status.\n\n# Example\n\n[https://netlify-build-status-widget.netlify.com](https://netlify-build-status-widget.netlify.com/)\n\n# Preview\n\n![Preview](https://raw.githubusercontent.com/dashpilot/netlify-build-status-widget/master/assets/preview.jpg)\n\n# How to use?\n\n## Option 1: Standalone (without Netlify CMS / Netlify Identity)\n\nThis is the simplest option: deploy this project to Netlify, and create the following environment variables in Netlify (Settings \u003e Build \u0026 Deploy \u003e Environment):\n\n`NETLIFY_TOKEN` (create a token via User Settings \u003e Applications \u003e Personal Access Tokens)\n\n`NETLIFY_SITE_ID` (Settings \u003e General \u003e Site Details \u003e API ID).\n\n## Option 2: Integration with Netlify CMS and Netlify Identity\n\n### Step 1: add script\n\nJust add the widget CCS and JS to the head of your index.html:\n\n```javascript\n\u003clink href=\"assets/netlify-build-status-widget.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"assets/netlify-build-status-widget.min.js\"\u003e\u003c/script\u003e\n```\n\n### Step 2: init the script\n\nAssuming you already set up the [Netlify Identity redirect](https://www.netlifycms.org/docs/add-to-your-site/#add-the-netlify-identity-widget) in your index.html, simply modify it to look like this:\n\n```javascript\n\u003cscript\u003e\n  if (window.netlifyIdentity) {\n    window.netlifyIdentity.on(\"init\", user =\u003e {\n      if (!user) {\n        window.netlifyIdentity.on(\"login\", () =\u003e {\n          document.location.href = \"/admin/\";\n        });\n      } else {\n        checkBuildStatus();\n      }\n    });\n  }\n\u003c/script\u003e\n```\n\n### Step 3: add and configure the Netlify function\n\nRun: `npm i netlify --save` in your project's folder (this installs the Netlify API NPM package)\n\nDrop the status.js file in your Netlify functions directory, and create the following environment variables in Netlify (Settings \u003e Build \u0026 Deploy \u003e Environment):\n\n`NETLIFY_TOKEN` (create a token via User Settings \u003e Applications \u003e Personal Access Tokens)\n\n`NETLIFY_SITE_ID` (Settings \u003e General \u003e Site Details \u003e API ID).\n\nVisit your site and you should see the Netlify Build Status widget, showing you the current build status!\n\n# Todo\n\n-   make a button so you can easily refresh the page\n\nI welcome any feedback on the implementation, since it's been a while since I've released anything :-)\n\n## Press the :star: button\n\nDon't forget to press the :star: button to let me know I should continue improving this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Fnetlify-build-status-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdashpilot%2Fnetlify-build-status-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Fnetlify-build-status-widget/lists"}