Quality Check
Beefree SDK's Quality Check lets your user identify and fix issues with accessibility, image weight, links, and more, all without leaving the builder.
You can enable Quality Check if you are on a Beefree SDK paid plan (Essentials and above) at no extra cost.
Advanced customization options require a Superpowers or Enterprise plan. See Customization for details.
Overview
Quality Check is a built-in readymade widget that gives your end-users actionable feedback on their email and page designs inside the editor, answering the simple question “is this email or page ready to publish?”
Without leaving the builder, your users can identify and fix crucial issues related to accessibility, image weight, missing links, HTML size, and more.
For integrators, the setup is minimal: once you enable the feature in the SDK Console, the full checker experience becomes available to your end-users. It does not require you to build a custom UI or set up additional infrastructure.
If you want to develop your fully custom check solution, you can rely on our Check CSAPI endpoint.
API calls made through Quality Check don't count towards your CSAPI allotment. This means they have no separate billing or usage limits.
Availability
Quality Check is available for email and page designs.
You can activate Quality Check with the dedicated flag in the SDK Console.
How it works
Running a check
Once Quality Check is enabled, your end users see a shield icon in the editor. By clicking it, they run the check against the current email or page and open the Quality Check sidebar.
Quality Check evaluates the complete email or page JSON to ensure the final exported output meets quality and accessibility standards. The sole exception are Content details (Meta tag) checks which are only performed when the Meta tags (Title, Subject, Pre-header) are enabled in the SDK console.
Understanding the results
Quality Check organizes results into three groups, displayed in the sidebar as:
Warnings: critical issues that your users should resolve before exporting or sending.
Suggestions: non-critical issues worth addressing to improve quality and accessibility.
Passed: checks that found no issues.
Each group shows a badge count reflecting the number of individual element-level issues found. For example, if three images are missing alt text, the related badge will show 3.
Navigating to issues
When your users click a check result, the editor will highlight the related element in the stage. A click on the navigation arrow opens the associated editor sidebar, so your users can go straight to editing the element that Quality Check flagged.
Global-level checks (such as missing subject line) open the general settings panel instead, while other checks are informational only (e.g. “Add headings to improve structure”).
Checks reference
The tables below list all checks performed by the Quality Check widget. Columns show which content types each check supports.
Accessibility
The content your users create should be accessible to everyone, so Quality Check will highlight if your users’ designs don’t follow key accessibility best practices.
Missing alt text
missingAltText
✓
✓
✓
Images, GIFs, stickers, icons, social
Warning
Missing headings
missingHeadings
✓
✓
Headings
Warning
Missing main language
missingMainLanguage
✓
✓
Design settings (metadata)
Warning
Insufficient color contrast
insufficientColorContrast
✓
✓
✓
Buttons, headings, paragraphs, lists, menus, tables, icons
Warning
Missing primary heading (H1)
missingHeadings
✓
✓
Headings
Suggestion
Too many H1 headings
overageHeadings
✓
Headings
Suggestion
Insufficient font size
insufficientFontSize
✓
✓
✓
Buttons, headings, paragraphs, menus, lists, tables
Suggestion
Link presence
A missing link will negatively impact your users’ campaign performance, so Quality Check will highlight if your users missed adding them.
Missing link on interactive elements
missingCopyLink
✓
✓
✓
Buttons, social icons, menus
Warning
Missing link on images
missingImageLink
✓
✓
✓
Images, GIFs, stickers, icons
Suggestion
Image & HTML weight
Overly large images can cause loading issues (in particular on mobile), and large HTML files can cause messages to get clipped in Gmail. Quality Check helps your users prevent these mistakes.
Image exceeds weight limit
overageImageWeight
✓
✓
✓
Images, GIFs, stickers, icons, social
Warning
HTML exceeds size limit
overageHtmlWeight
✓
Full email HTML output
Warning
Here are the default limits that Quality check applies:
Maximum image weight: 500 KB for email, 700 KB for pages
Maximum HTML size: 80 KB for email HTML
You can override the default thresholds via BeeConfig (Superpowers and Enterprise plans only).
Content details (Meta tag)
These checks only appear when the corresponding Meta tag fields are enabled in the SDK Console.
Subject lines and preheaders for emails are often the first things recipients see, so missing them has an impact on deliverability and open rates. In a similar way, titles and descriptions for pages are fundamental for both users and search engines, and the lack thereof can hurt click-through and SEO.
Missing email details (subject / preheader)
missingDetailsEmail
✓
Meta tag: subject, preheader
Suggestion
Missing page details (title / description)
missingDetailsPage
✓
Meta tag: title, description
Suggestion
Customization
Selecting checks and thresholds
If you are on a Superpowers or Enterprise plan, you can customize the Quality Check behavior via beeConfig. As you can see in the code example below, the available options are passed inside a dedicated qualityCheck section.
You can control which checks are presented to end users. If this option is omitted, all available checks are shown by default.
Styling & copy
CSS-based styling is available to Superpowers and Enterprise plans.
You can use Custom CSS to customize
The badge counters in the side panel
Colors and UI. By default, warning badges use a system yellow token; suggestion badges use grey, and both are overridable. Themes are not currently supported.
Icons, as Quality Check by default inherits the icons configured in the content tab.
If you've customized content-tab icons using Custom CSS, those styles do not automatically carry over to the Quality Check panel. You'll need to apply the same CSS rules separately for the checker context.
Copy customization is possible by passing Translation configuration parameters. Here you can find the list of the labels used by Quality Check.
Permissions
Quality Check respects the permissions assigned to the current end user. This means that for a user with edit permissions, clicking a check result navigates to the relevant widget in the sidebar for direct editing.
When a user lacking editing permissions clicks on a check result, the commenting panel opens instead, allowing them to flag the issue for collaborators without making changes themselves. If commenting is not enabled, the click has no action.
AddOns
Quality Check supports the Giphy and Stickers AddOns, but only when they are configured using the default name. If you've renamed either AddOn during configuration, the widget will not recognize those elements and they will not be checked.
Other Partner and Custom AddOns are not supported.
Language support
Quality Check runs against the primary language of the design. Multi-language template alternatives are not currently supported.
Last updated
Was this helpful?