All posts
How-to

How to Embed an SEO Audit Widget on Your Website (Step-by-Step)

5 min read By WebSEO Auditor Embed Widget Setup Lead Generation

An embedded SEO audit widget turns your agency website into a lead generation machine that runs 24 hours a day. Visitors enter their URL, see their audit results, and hand over their email address in the process. You receive the lead, the audit data, and an AI-generated sales insight — all automatically.

This guide covers how to install the WebSEO Auditor widget on any website, with specific instructions for WordPress, Webflow, Framer, and plain HTML. Total setup time: under five minutes.

Ready to find SEO issues on any website?

Try WebSEO Auditor free — run your first audit in seconds.

Try it free

The embed widget is tied to your WebSEO Auditor account. Before generating the embed code, you need to:

  1. Create a free account at webseoauditor.com/try
  2. Go to your dashboard and click "Create audit link"
  3. Give your link a name — this appears in the audit header as your brand name
  4. Optionally upload your logo
  5. Go to the link settings and find the "Embed widget" section
  6. Copy the embed code snippet

The embed code looks like this:

<div id="webseo-widget" data-link-id="YOUR_LINK_ID"></div>
      <script src="https://webseoauditor.com/embed/widget.js" async></script>

Your actual data-link-id will be a unique identifier generated for your account. Copy the exact code from your dashboard — do not edit the link ID.

Where to Place the Widget

Widget placement dramatically affects how many leads you generate. Here is what works:

Best placements:

  • Homepage hero section — below your main headline, where visitors are deciding whether to stay. This is the single highest-converting placement.
  • Dedicated landing page — create a page at /free-seo-audit and drive traffic to it from LinkedIn, cold emails, and paid ads.
  • Services page — at the top or bottom of your SEO services page, where visitors are already considering your services.

Avoid:

  • Footer — almost no one sees it
  • Blog sidebar — distraction from the content, low conversion
  • Contact page — visitors there have already decided to reach out another way

Installation: WordPress

Method 1: Using a Custom HTML Block (Gutenberg)

  1. Open the page or post you want to add the widget to
  2. Click the + button to add a new block
  3. Search for "Custom HTML" and select it
  4. Paste your embed code into the HTML block
  5. Click Preview to verify the widget appears
  6. Click Publish or Update

Method 2: Using a Plugin (Elementor, Divi, Beaver Builder)

All major page builders support custom HTML elements:

  • Elementor: Search for "HTML" widget in the left panel → drag it onto your page → paste your embed code
  • Divi: Insert → "Code" module → paste your embed code
  • Beaver Builder: Add Module → "HTML" → paste your embed code

Method 3: Adding to functions.php (for theme developers)

If you want the widget to appear in a specific template position across multiple pages, add it directly to your theme's PHP template. This requires basic WordPress theme knowledge.

<?php
      // Add to your template file at the position you want the widget
      ?>
      <div id="webseo-widget" data-link-id="YOUR_LINK_ID"></div>
      <script src="https://webseoauditor.com/embed/widget.js" async></script>

Note: If your theme uses a strict Content Security Policy, you may need to whitelist webseoauditor.com as an allowed script source. Contact your hosting provider or check your security plugin settings if the widget does not load.

Installation: Webflow

  1. Open your Webflow project in the Designer
  2. Navigate to the page where you want to place the widget
  3. In the left panel, drag an "Embed" element onto your canvas at the desired position
  4. Double-click the Embed element to open the code editor
  5. Paste your embed code
  6. Click Save & Close
  7. Publish your site

The widget will appear in the published version of your site. In the Designer preview, you may see a placeholder — this is normal.

Tip for Webflow: Create a dedicated section with a contrasting background colour around the widget to make it visually distinct from the rest of your page content.

Installation: Framer

  1. Open your Framer project
  2. Add a Code component or use the Embed feature
  3. In the embed or code component, paste your widget code
  4. Set the component's width to 100% and height to auto
  5. Publish your site

Alternatively, use Framer's Custom Code feature (available in project settings) to add the script tag globally, then place the <div> element manually in your page HTML.

Installation: Plain HTML / Any Static Site

Add the embed code directly to your HTML file at the position where you want the widget to appear:

<!DOCTYPE html>
      <html>
      <head>
        <title>Free SEO Audit | Your Agency</title>
      </head>
      <body>
      
        <header>
          <h1>Get a Free SEO Audit for Your Website</h1>
          <p>Enter your URL below and see exactly what is holding your site back.</p>
        </header>
      
        <!-- WebSEO Auditor widget -->
        <div id="webseo-widget" data-link-id="YOUR_LINK_ID"></div>
        <script src="https://webseoauditor.com/embed/widget.js" async></script>
      
        <!-- Rest of your page -->
      
      </body>
      </html>

The async attribute ensures the widget loads without blocking your page rendering.

Installation: Squarespace

  1. Open the page editor for the page where you want the widget
  2. Add a Code Block (available in the block menu under "More")
  3. Paste your embed code
  4. Save and preview

Note: Squarespace restricts JavaScript on some plans. If the widget does not load, check your Squarespace plan level — Custom Code injection requires a Business plan or higher.

Verifying the Widget Works

After installation, always verify the widget in a browser:

  1. Open the page in an incognito/private browser window (to avoid cached versions)
  2. Check that the audit input form appears
  3. Enter a test URL (your own website works fine)
  4. Verify that the audit runs and returns results
  5. Check your WebSEO Auditor dashboard — the test lead should appear within a few minutes

If the widget does not appear, common causes are:

  • Ad blocker: Some aggressive ad blockers block embedded widgets. Test in a browser with no extensions.
  • Content Security Policy: Your server may be blocking external scripts. Add webseoauditor.com to your CSP script-src directive.
  • Conflicting JavaScript: Rarely, other scripts on the page can interfere. Check your browser console for JavaScript errors.

Customising the Widget Appearance

The widget adapts to your page's existing styles, but you can control several aspects from your WebSEO Auditor dashboard:

  • Brand name: appears in the audit header
  • Logo: displayed in audit reports sent to leads
  • Primary colour: the widget button and accent colour match your brand

More advanced styling (padding, borders, background) can be controlled with CSS targeting the #webseo-widget container.

What Happens After a Lead Completes an Audit

When a visitor completes an audit through your embedded widget:

  1. They enter their URL and email address
  2. They see their full audit results (Performance, SEO, Accessibility, Best Practices, GEO)
  3. Simultaneously, you receive in your dashboard:
    • Their email address and website URL
    • All audit scores and issue details
    • An AI-generated sales insight paragraph

If you have set up a Zapier webhook, the lead data fires to your CRM, Slack, or email platform instantly.

From this point, your follow-up process takes over. The key is to reach out within 60 minutes while the prospect is still thinking about their audit results.

Frequently Asked Questions

Share Twitter / X LinkedIn