Skip to main content

Brightspot Toolkit

note

Brightspot Toolkit works best on v.5.0 or greater.

Installation​

  1. From the Chrome Web Store, search for Brightspot Toolkit.
  2. Click Add to Chrome.
  3. Navigate to a Brightspot-powered page.
  4. Open the extension.

Edit in Brightspot​

You can open web pages and edit them in Brightspot.

To open pages in Brightspot:

  1. Open Brightspot Toolkit.
  2. At the top of the sidebar, click Edit in Brightspot.
  3. Edit the page as desired.
note

Brightspot Toolkit works with headless Brightspot sites. If users do not see the Edit in Brightspot button enabled for them, a lightweight meta tag implementation is required to unlock the full feature set for headless deployments.

Authentication​

Brightspot Toolkit checks whether you are logged in to the Brightspot CMS and reflects your authentication status in the header. Most features require you to be logged in.

The person icon in the header displays a status badge indicating your current authentication state:

  • Green badge—You are logged in to the CMS.
  • Red badge—You are not logged in to the CMS.

If the badge is absent, the extension has not yet checked authentication status, or the current page is not associated with a Brightspot site.

To log in to the CMS from the extension:

  1. Open Brightspot Toolkit.
  2. In the header, click the person icon. The CMS login page opens.

After you log in, the badge updates to green and the full feature set becomes available.If you are already logged in and click the person icon, the CMS dashboard opens instead of the login page.

Content quality analysis​

Brightspot Toolkit contains a number of helpful features that help you assess and improve the value of your pages built using Brightspot.

SEO​

You can view SEO auditing for Brightspot pages, including an analysis of key SEO factors and actionable feedback to help improve content visibility and search rankings. SEO analysis checks the following:

  • Title tag optimization—Verifies that the tag exists and is properly sized (30-60 characters), gives feedback on length optimization, and shows actual title text for review.
  • Meta description assessment—Checks for meta description presence, validates optimal length (120-160 characters), and flags missing or poorly sized descriptions.
  • Heading structure analysis—Ensures proper H1 tag usage (exactly one per page), maps heading hierarchy (H1, H2, H3 structure), and identifies missing or duplicate H1 tags.
  • Open Graph Tags—Verifies social media optimization tags (og:title, og:description, og:image), reports completeness of social sharing metadata, and helps ensure proper social media previews.
  • Canonical URL validation—Checks for canonical link tag presence, helps prevent duplicate content issues, and supports SEO consolidation strategies.
  • Content length evaluation—Analyzes word count for SEO value, recommends 1000+ words for optimal ranking, and provides specific word counts and improvement guidance.
  • Link strategy assessment—Identifies follow external links that boost authority, finds internal linking opportunities within your site, and ensures proper link attributes and destinations.

Click Run Analysis to rerun analysis.

GEO​

You can optimize content specifically for AI-powered search engines and large language models. GEO analysis checks the following:

  • AI indexing permissions—Scans noindex meta tags that block AI crawlers, checks robots.txt restrictions via meta tags, ensures AI engines can discover and index your content, and flags pages that may be hidden from AI systems.
  • Citations and source credibility—Finds <cite> tags and citation classes, identifies <blockquote cite="..."> elements, detects superscript notation and reference classes, looks for .source, .citation, and .reference CSS classes, and recommends more than five citations for optimal AI trust.
  • Structured information for LLMs—Analyzes ordered and unordered lists, counts meaningful list items for structured data, helps AI systems parse and understand content structure, and ensures content is presented in AI-friendly formats.

Click Run Analysis to rerun analysis.

Accessibility​

You can view comprehensive WCAG 2.1 AA compliance auditing for Brightspot pages. This automatically scans for web accessibility barriers and provides actionable feedback to help make content usable by people with disabilities, including those using screen readers, keyboard navigation, and other assistive technologies. Accessibility analysis checks the following:

  • Language declaration—Verifies lang attribute exists on <html> element, ensures screen readers can pronounce content correctly, and reports the detected language for proper assistive technology support.
  • Accessible names—Ensures all links and buttons have descriptive text or aria-label attributes, checks for missing text content on interactive elements, and identifies elements that assistive technology can't announce properly.
  • Semantic roles—Flags <div> or <span> elements acting as buttons without role="button", identifies links without href that should be buttons, and ensures all clickable elements have proper semantic markup.
  • Link purpose clarity—Flags generic text like "click here" and "read more", ensures link text clearly describes the destination or purpose, and validates links make sense when read out of context by screen readers.
  • Label consistency—Ensures visible text matches accessible names for voice control compatibility, helps users navigate with speech recognition, and prevents confusion between visual and programmatic labels.
  • Form accessibility—Ensures all form inputs have proper labels through <label for="">, aria-label, aria-labelledby, or wrapping labels, helping screen reader users understand form purposes and requirements.
  • Heading structure—Ensures exactly one H1 per page, checks for logical hierarchy without skipped heading levels, and validates proper document outline for assistive technology navigation.
  • Table accessibility—Ensures tables have <th> elements or scope attributes for header identification, validates table structure for screen reader understanding, and checks complex tables for proper data relationships.
  • Link integrity—Identifies empty href attributes or broken links, ensures all links lead to valid destinations, and prevents accessibility barriers from non-functional navigation elements.
  • Media accessibility—Ensures videos have play/pause controls, flags auto-playing media without user controls, checks for caption and subtitle tracks, and validates media doesn't interfere with assistive technology.

Click Run Analysis to rerun analysis.

Images​

You can evaluate image optimization and accessibility across three key performance areas—ensuring images are properly configured for both user experience and technical efficiency.

  • Alt text coverage — Verifies that images include descriptive alternative text for screen readers and accessibility compliance. Tracks the percentage of images with meaningful alt attributes and flags missing or empty alt text that could impact accessibility.
  • Lazy loading optimization — Identifies images that use the loading="lazy" attribute to improve page performance by deferring off-screen image loading. Reports on implementation coverage to optimize initial page load times.
  • Image sizing efficiency — Analyzes the relationship between an image's natural dimensions and rendered display size to identify oversized images. Flags images where the natural width is more than 2x the rendered width, indicating potential bandwidth waste and performance impact.

Click Run Analysis to rerun analysis.

You can add links to the Brightspot Toolkit to quickly navigate to pages of interest.

To add quick links:

  1. Expand the Quick Links dropdown.
  2. Click Add Quick Link.
  3. Enter a display name, URL, and target.
  4. Click Save.

Developer tools​

You can utilize a comprehensive suite of technical analysis and debugging capabilities for developers working with Brightspot sites. This section contains clusters of functionality designed to help optimize performance, debug issues, and streamline development workflows.

Performance​

The performance cluster tracks page timing and trends.

Page timings

  • Time to first byte (TTFB)—The time from when the browser makes a request to when it receives the first byte of response from the server.
  • Largest contentful paint (LCP)—The time when the largest visible content element (like an image or text block) finishes rendering on the page.
  • Cumulative Layout Shift (CLS)—How much visible content unexpectedly shifts during page load.

Developer tools​

You can use certain tools to streamline development and debugging workflows.

  • QR Code—Generates a QR code for the current page URL, enabling quick mobile testing and easy sharing of page links. Opens the QR code in a new tab for convenient scanning with mobile devices during cross-platform testing workflows. You can also use a shortcut to open via ⌥⇧M (Alt+Shift+M on Windows, Command+Shift+M on macOS).
  • JSON View—Opens the JSON renderer view of the current page, displaying the structured content data as returned by Brightspot's JSON API. Useful for debugging content structure, inspecting field values, and understanding how content is serialized for frontend consumption. You can also use a shortcut to open via ⌥⇧J (Alt+Shift+J on Windows, Command+Shift+J on macOS).
  • Styleguide—Opens the Brightspot styleguide view for the current page, providing access to the design system components and patterns used in the site. Helpful for frontend developers to reference styling guidelines and component specifications. You can also use a shortcut to open via ⌥⇧S (Alt+Shift+S on Windows, Command+Shift+S on macOS).
  • Raw Data—Opens the raw content data view in the CMS, displaying the unprocessed content object with all fields and metadata. Provides deep inspection capabilities for debugging content issues and understanding the complete data structure. You can also use a shortcut to open via ⌥⇧D (Alt+Shift+D on Windows, Command+Shift+D on macOS).

Support​

You can use diagnostic and troubleshooting tools specifically designed to help gather technical information for support requests.

To use Support features:

  1. Expand the Support cluster.
  2. Ensure DevTools is open (press F12).
  3. Click Start Recording.
  4. Refresh the page.
  5. Once the page is fully loaded, click Stop Recording.

A HAR file will be generated which you can attach to a support ticket.

Page JS​

You can view and analyze JavaScript scripts on your pages. This allows you to do the following:

  • Find script-heavy domains that may slow pages down
  • Track third-party scripts
  • Audit external domains serving JavaScript to your site
  • Optimize script loading strategies
  • Compare script usage across different page types or environments

If scripts are detected, Brightspot Toolkit lists the total number of scripts and the top six script domains (and the number of individual scripts from those top six domains). You can click Copy to copy the full list of scripts.

note

Clicking Start Recording records all network requests made while browsing, capturing detailed HTTP traffic data in HAR (HTTP Archive) format. Once recording, you can start recording, browse to reproduce issues, then stop and export the HAR file to attach to support tickets. This enables support teams to analyze network behavior, API calls, and connectivity issues.

  1. Next to Copy My Device Info, click Copy.
note

Clicking Copy copies information like extension version, browser name and version, operating system, screen resolution, device pixel ratio, language settings, timezone, and Brightspot version. Use this information in your support request to assist the representatives in solving your issue.

Activity​

You can view a history of your activity over the last 24 hours. Actions include:

Each action is marked with an OK status with the exception of an Edit action, which may be marked with a — if it fails.

note

History is stored locally on the device where you are using Brightspot Toolkit.

Settings​

Advanced settings​

Advanced settings provide configuration options for hostname mappings, UI preferences, and performance testing capabilities.

Custom hostnames​

You can configure custom hostname mappings when the CMS is not hosted on the same domain as the site. This allows the extension to properly connect to your Brightspot CMS for authentication and content editing features.

note

Failing to configure custom hostname mappings when the CMS is not hosted on the same domain as the site will prevent you from clicking on the profile icon or opening any clusters.

To add custom hostnames:

  1. Open settings by clicking the gear icon.
  2. Under Advanced Settings, locate the Custom Hostnames section.
  3. Click Custom Hostname.
  4. Enter a display name for the mapping.
  5. Enter the frontend hostname (e.g., www.example.com).
  6. Enter the corresponding CMS hostname (e.g., cms.example.com).
  7. Click Save.

You can add multiple mappings for different sites or multiple mappings for the same site (for example, both www.example.com and example.com could map to cms.example.com).

UI settings​

UI settings allow you to customize how the Brightspot Toolkit extension appears and behaves in your browser.

  • Pop-up—Opens the extension in a traditional pop-up window when you click the extension icon.
  • Drawer—Opens the extension in Chrome's side panel as a drawer that slides in from the side.

The default display style is Drawer mode.

PageSpeed Insights​

PageSpeed Insights integration provides optional lab-based performance testing using Google's PageSpeed Insights API. This feature requires a free API key and supplements the built-in browser performance metrics with additional testing capabilities.

To configure and use PageSpeed Insights, get a free API key and enter it in the extension settings. For detailed information about PageSpeed Insights metrics and testing, see Google's PageSpeed Insights documentation.

Additional resources​

At the bottom of the Brightspot Toolkit sidebar, three links provide quick access to external resources:

Was this page helpful?

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.