How to Add the Hubspot Website Grader Widget to Your Site

The Hubspot Website Grader widget lets you place a powerful performance audit tool directly on your site so visitors can grade their website and become leads in your CRM. This guide walks you step by step through enabling the tool, customizing it, and embedding the code on any webpage.

What the Hubspot Website Grader Widget Does

Before you add the widget, it helps to understand what it delivers for your marketing team and your visitors.

• Allows visitors to enter a website URL and email address to receive a report.
• Captures submitted information as contacts in your CRM.
• Displays a score and recommendations based on performance, mobile, SEO, and security factors.
• Works as an embedded form you can place on blogs, landing pages, and resource centers.

Once installed, the widget runs entirely through your Hubspot account and requires no extra server configuration.

Requirements for Using the Hubspot Widget

To use this feature, you need an active account with access to lead capture tools. Check that you meet these conditions:

• You can log into your account and access the Website Grader tool.
• You have permission to edit website templates, landing pages, or blog layouts.
• You can add custom HTML or scripts to your site, either through a CMS, theme editor, or tag manager.

If you do not have sufficient permissions, ask an administrator to either grant access or place the embed code for you.

How to Generate the Hubspot Website Grader Embed Code

Use the Website Grader settings to create the JavaScript snippet you will place on your site.

Step 1: Open Website Grader in Hubspot

1. Log in to your account.
2. Navigate to your tools menu and open the Website Grader section.
3. Look for an option labeled something like Embed, Widget, or Website Grader widget.

This area is where you will configure the widget and obtain the embed code.

Step 2: Configure Basic Hubspot Widget Settings

Inside the configuration screen, you will see options for how the widget appears and behaves on your site. Common settings include:

• Form title and description – The heading and supporting copy above the input fields.
• Button label – The text on the call-to-action button.
• Input fields – Website URL and email address are typically required.
• Language – The display language for all labels and messages.

Adjust these options to match your brand tone and the type of audience that visits the page where you intend to deploy the widget.

Step 3: Choose Contact and CRM Options

Because the widget is tied into your Hubspot contact database, you can configure what happens after a visitor submits the form:

• Select a default lifecycle stage or lead status.
• Assign contacts to a specific owner or rotating owners.
• Add contacts to a list for follow-up workflows or nurturing campaigns.

These settings ensure each grader submission flows into your existing lead management process.

Step 4: Copy the Hubspot Widget Code

When configuration is complete, the settings screen will show a JavaScript embed snippet. It usually appears inside a code box or modal window.

1. Click the copy icon or highlight the entire snippet.
2. Copy it to your clipboard.
3. Save the configuration if required, so future changes are reflected in the code.

This code is what you will paste into your website or CMS.

How to Embed the Hubspot Website Grader Widget on Your Site

Once you have the embed snippet, use these methods based on how your website is built.

Method 1: Add the Hubspot Widget to a CMS Page

1. Open your CMS or website builder and edit the page where the widget should appear.
2. Add a custom HTML, code, or embed block to the content area.
3. Paste the entire JavaScript snippet into that block.
4. Position the block above or below other content as needed.
5. Publish or update the page, then view it in a browser to confirm the widget loads.

Most major CMS platforms support custom HTML blocks, making this method straightforward.

Method 2: Add the Hubspot Widget to a Template

If you want the Website Grader widget to appear across multiple pages, place it in a shared template instead of a single page.

1. Edit your theme or template file in your CMS or code editor.
2. Locate the section where you want the form to display, such as below blog posts or in a sidebar.
3. Paste the widget embed code into the template.
4. Save and redeploy the template.
5. Test several pages that use the template to confirm the widget appears correctly.

This approach is ideal for site-wide promotion of the grading tool.

Method 3: Deploy the Hubspot Widget via Tag Manager

If you use a tag manager, you may prefer to inject the script globally or on selected URLs.

1. Create a new custom HTML tag.
2. Paste in the Website Grader embed snippet.
3. Set a trigger for the specific pages or URL patterns where the widget should show.
4. Publish the tag container.
5. Test your live site to ensure the widget appears and that form submissions work correctly.

This method can reduce the need to edit templates directly and helps centralize script management.

Customizing the Look and Feel of Your Hubspot Widget

The default appearance of the widget is designed to work on most sites, but you can usually fine-tune it through styling.

• Use your CMS design tools to adjust container width, spacing, and alignment.
• Apply custom CSS to form inputs, labels, and buttons where supported.
• Ensure the widget is readable in both desktop and mobile layouts.

When editing styles, always test the form to confirm that focus states, error messages, and button states remain accessible.

Testing and Troubleshooting the Hubspot Website Grader

After installation, verify that the widget functions correctly end-to-end.

Step 1: Run a Test Submission

1. Open the page where the widget is installed.
2. Enter a sample website URL and a test email address you control.
3. Submit the form and wait for the report confirmation.

Check that the on-screen messages render properly and that no console errors appear in your browser developer tools.

Step 2: Confirm Contact Creation in Hubspot

1. Log back into your CRM.
2. Navigate to your contacts list.
3. Search for the test email address you submitted.
4. Open the contact record and verify that the source or activity indicates the Website Grader widget.

If the contact does not appear, verify that your tracking and embed settings are correct and that your account has not exceeded any limits.

Step 3: Review Lead Routing and Follow-Up

Use your test contact to confirm automation and routing behavior:

• Check that workflows triggered by the widget enrollment criteria are firing.
• Ensure assigned owners receive any internal notifications.
• Review the email sequence or nurture path configured for these leads.

This helps guarantee that every new grading submission enters the right nurturing journey.

Where to Learn More About the Official Hubspot Widget Setup

For the most current configuration instructions and supported options, refer to the official documentation. You can find detailed steps and screenshots on the vendor help center here: official Website Grader widget setup guide.

If you need help integrating the widget into a complex site structure or aligning it with a broader inbound strategy, consider working with a specialist. For example, Consultevo provides consulting services that cover analytics, lead capture, and optimization.

Make the Most of the Hubspot Website Grader Widget

Once the widget is embedded and tested, promote it as part of your content strategy. Link to pages that host the tool from blog posts, social media, and email campaigns. This approach increases engagement and steadily feeds new opportunities into your CRM while giving visitors immediate value in the form of a performance review for their site.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`