Add the Website Grader widget to your website
Last updated: June 28, 2023
Available with any of the following subscriptions, except where noted:
Partner Account |
The Website Grader widget is an embeddable version of HubSpot’s Website Grader that HubSpot solutions partners and providers can add to your HubSpot-hosted or external websites. The widget consists of a form and a module that you can add to your webpage.
Integration requirements
You must have the following permissions in HubSpot:
- A Marketing Hub or CMS Hub Professional or Enterprise subscription.
- Everything access for Contacts & companies and Deals
- Edit property settings
- Marketing Access
- Publish, Write, and Read access for Website tools (except HubDB)
- App Marketplace Access, Global content settings and Website settings
Add the Website Grader widget to your account
- Navigate to https://widget.grader.com/.
- Click Add to portal.
- Select the account you want to add the widget to, then click Choose Account.
- You'll be asked to grant permission for the Website Grader Widget to access your HubSpot account. Click Connect app.
- You can add the Website Grader widget to a HubSpot hosted page or an external website. Select an option, then follow the instructions to complete the widget set up in your account.
Embed the widget on a HubSpot hosted page
If embedding the widget on your HubSpot hosted website:
- Select the A HubSpot hosted page checkbox.
- Click Next.
- Add privacy disclaimer text to your form.
- In the Company name field, enter your company's name.
- In the Privacy policy URL field, enter a link to your company's privacy policy.
- Click Next
- To automatically add the Website Grader widget to your account, click Install module
- To view the module in your account, click Open portal. The module will be named “HubSpot Website Grader widget”.
After the module has been added to your account, you can edit the module’s fields and style the form fields, then add it to a page template, or add it to a page using the drag and drop page editor.
Embed the widget on an external page
If embedding the Website Grader widget on an external page:
- Select the An external website checkbox.
- Click Next.
- A form called “Website Grader Widget Form” will be created automatically in your account. To edit the form fields, click Edit this form. You can create a custom form as well.
- Click Next.
- Add privacy disclaimer text to your form.
- In the Company name field, enter your company's name.
- In the Privacy policy URL field, enter a link to your company's privacy policy.
- Click Next.
- In the Customize section, use the styling options to edit the logos and text that appear on the page. To review your changes, click Preview.
- Click Next.
- In the Add the widget to your website section, click Copy, then add the code to your website before the closing body tag.
After the widget has been added to your website page, visitors can scan a website URL after entering their email address and receive an overall grade for their website based on its performance. There will also be a marketing email titled Website Grader Result Email added to your portal. You can send this email to contacts who fill out the Website Grader on your website.
Segment contacts based on their website score
After adding the Website Grader widget to your account, the following contact properties will be created:
- Grader Result: Performance Score (out of 30)
- Grader Result: Mobile Score (out of 30)
- Grader Result: SEO Score (out of 30)
- Grader Result: Security Score (out of 10)
- Grader Result: Overall Score (out of 100)
- Grader Website
This is how you can interpret the scores and what is being measured:
Score type | What's being measured |
Performance | The size of the network payload. The number of requests the page makes. The amount of time it takes for the page to become fully interactive. The percentage of bytes used for caching website assets. The number of redirects on the page. The size of all unminified CSS and Javascript files. The number of images that are appropriately sized. |
Mobile | Whether the content is sized correctly for the viewport. How mobile-friendly the font size is. How mobile-friendly the tap targets on the page are. |
SEO | Whether the page is blocked from indexing by search engine crawlers. Whether the page has a meta description and descriptive text in the links. Whether the page has plugin-based content. |
Security | Whether the page loads over HTTPS or HTTP. If the page includes front-end Javascript with known security vulnerabilities. |
You can segment contacts into lists based on their scores in each category after they scan their website URL with the widget.
- In your HubSpot account, navigate to Contacts > Lists.
- In the upper right, click Create list.
- In the left panel, select Contact-based to create a list of contacts.
- In the right panel, enter a name for your list, then select Active list or Static list.
- In the upper right, click Next.
- In the Filter type section, select Website Grader Widget: Ran Grader.
- Click the name of the Website Grader properties, then refine the filter accordingly.