How to Implement GDPR.Direct's Legal Hub on Your Website

Introduction

Legal compliance is no longer optional for modern websites. Whether you’re running an e-commerce store, a SaaS application, or a personal blog, you need properly structured and legally sound documents like privacy policies, cookie notices, and terms of service. However, creating these documents is only half the battle. The real challenge lies in implementing them correctly, keeping them updated, and ensuring they’re easily accessible to your users.

GDPR.Direct’s Legal Hub solves this challenge by providing a centralized, always-up-to-date legal document management system that integrates seamlessly with any website platform. Instead of manually updating multiple pages across your site every time privacy regulations change, the Legal Hub allows you to manage all your legal documents from one central location while automatically pushing updates to every page where they’re displayed.

In this comprehensive guide, you’ll learn everything you need to know about implementing GDPR.Direct’s Legal Hub on your website. We’ll cover implementation methods for popular platforms like WordPress, Shopify, Squarespace, Wix, and Webflow, as well as custom HTML sites. You’ll discover best practices for placement, testing strategies to ensure everything works correctly, and troubleshooting tips for common issues. By the end of this guide, you’ll have a fully functional Legal Hub that keeps your website compliant while saving you countless hours of manual document management.

What is GDPR.Direct’s Legal Hub?

The Legal Hub is GDPR.Direct’s solution for managing and displaying legal documents across your digital properties. Think of it as a centralized command center for all your legal compliance needs. Instead of creating static pages for your privacy policy, cookie policy, and terms of service, the Legal Hub provides dynamic, embeddable documents that automatically update whenever you make changes.

How the embed works

The Legal Hub uses a standard iframe embed to display your legal documents on any website. When you generate your embed code from the GDPR.Direct dashboard, you get a small HTML snippet containing an <iframe> tag and a lightweight inline script that handles auto-resizing so the document fits seamlessly into your page without scrollbars.

Here’s what the embed code looks like:

<iframe
  src="https://app.gdpr.direct/embed/privacy-policy?id=YOUR_COMPANY_ID&lang=en"
  style="width:100%;border:none;overflow:hidden"
  title="privacy policy"
  loading="lazy"
></iframe>
<script>
  window.addEventListener("message", function (e) {
    if (e.data && e.data.type === "gdpr-direct-resize") {
      var frames = document.querySelectorAll('iframe[src*="YOUR_COMPANY_ID"]');
      frames.forEach(function (f) {
        if (e.source === f.contentWindow) {
          f.style.height = e.data.height + "px";
        }
      });
    }
  });
</script>

There are no external scripts to load, no CDN dependencies, and no plugins to install. The iframe loads the document directly from app.gdpr.direct, and the small inline script listens for a postMessage event to adjust the iframe height dynamically. That’s it.

Because the document is served from GDPR.Direct’s servers, any updates you make in your dashboard are reflected instantly wherever the document is embedded — no redeployment or manual changes needed on your end.

What the Legal Hub provides

At its core, the Legal Hub serves three critical functions. First, it acts as a single source of truth for all your legal documents. When you create or update a privacy policy in GDPR.Direct, that change is immediately reflected everywhere the document is embedded. This eliminates the risk of having outdated or inconsistent legal information across different pages of your website.

Second, the Legal Hub provides a clean, mobile-responsive reading experience. Documents are rendered with clear typography, logical structure, and proper headings that make them easy to navigate. Premium users can customize the appearance with their own brand colors, fonts, and logo to match their website’s design.

Third, the Legal Hub maintains a complete audit trail of all document versions and updates. This is crucial for demonstrating compliance during regulatory audits or legal proceedings. You can prove exactly what information was displayed to users at any given time, which version of your privacy policy was active when a user signed up, and how you’ve evolved your practices in response to changing regulations.

For businesses operating multiple websites or applications, the Legal Hub becomes even more valuable. You can manage legal documents for dozens of properties from a single dashboard, customize documents for different regions or business units, and ensure consistent compliance standards across your entire digital ecosystem.

Prerequisites

Before you begin implementing the Legal Hub, you’ll need to ensure you have a few things in place. First and foremost, you need an active GDPR.Direct account. If you haven’t signed up yet, head to app.gdpr.direct and create an account. The free tier includes basic legal document generation and Legal Hub access, making it easy to get started without any upfront investment.

Once you have your account, you’ll need to generate at least one legal document through GDPR.Direct’s document wizard. This typically means creating a privacy policy, but you might also want to generate a cookie policy, terms of service, or data processing agreement depending on your business needs. The document generation process asks you questions about your business practices, data collection methods, and legal obligations. Answer these questions accurately and completely, as they form the foundation of your legally compliant documents.

After generating your documents, go to the Legal Hub section of your GDPR.Direct dashboard and click Embed Code on any document. This gives you the iframe snippet you’ll paste into your website. You’ll need one snippet per document (privacy policy, cookie policy, terms of service, etc.).

From a technical perspective, all you need is the ability to paste HTML code into your website. On platforms like WordPress, Shopify, Squarespace, and Wix, this means adding a “Custom HTML” or “Embed Code” block. For custom-built websites, you simply paste the snippet into your page’s HTML. No server-side configuration, API keys, or JavaScript libraries are required.

You should also have a clear plan for where you want to display your legal documents. Most websites place legal links in the footer, but you might also want dedicated full-page legal documents, links in your signup or checkout flows, or mentions in your cookie consent banner. Thinking through these placements before you start implementing will help you choose the right approach and avoid unnecessary rework.

Implementation Methods

No matter what platform powers your website, the implementation method is fundamentally the same: paste the iframe embed code into an HTML block on your page. The specific steps for getting to that HTML block differ by platform, so let’s walk through each one.

Method 1: WordPress Implementation

WordPress powers over 40% of all websites, making it the most common platform for Legal Hub implementation.

Creating a Dedicated Legal Page (Recommended):

1. Go to Pages > Add New
2. Title the page “Privacy Policy” (or “Cookie Policy”, “Terms of Service”, etc.)
3. Add a Custom HTML block (in the Gutenberg editor, click + and search for “Custom HTML”)
4. Paste your Legal Hub embed code from the GDPR.Direct dashboard
5. Publish the page
6. Repeat for each legal document you need
7. Add the pages to your footer menu under Appearance > Menus

Adding Legal Documents in the Footer Area:

If your theme supports footer widgets:

1. Navigate to Appearance > Widgets
2. Add a Custom HTML widget to your footer area
3. Paste your embed code
4. Save the widget

Note: Embedding full legal documents in the footer itself is unusual — most sites link to dedicated legal pages from the footer instead. The iframe approach works best on dedicated pages where the document has room to display fully.

Important: There is no GDPR.Direct WordPress plugin. The embed is a simple iframe that works in any Custom HTML block — no plugin needed.

Method 2: Shopify Implementation

Shopify stores require legal compliance for payment processing and customer trust.

Creating a Legal Information Page:

1. Go to Online Store > Pages
2. Click “Add page”
3. Title it “Privacy Policy” (or the relevant document name)
4. Click the Show HTML button (<>) in the content editor
5. Paste your Legal Hub embed code
6. Save the page
7. Go to Online Store > Navigation and add the page to your footer menu

Embedding in Theme Code (Advanced):

If you want the legal document embedded directly in a theme section:

1. From your Shopify admin, go to Online Store > Themes
2. Click “Actions” on your active theme, then “Edit code”
3. Create a new section or edit an existing template
4. Paste the iframe embed code where you want the document to appear
5. Click “Save”

Shopify’s content security policy allows iframes from external domains, so the GDPR.Direct embed works without additional configuration.

Method 3: Squarespace Implementation

Squarespace’s visual editor makes Legal Hub implementation straightforward, even for non-technical users.

Creating a Dedicated Legal Page:

1. Click Pages in the main menu
2. Click the + icon to add a new page
3. Choose “Blank” as the template
4. Title the page “Privacy Policy” (or the relevant document name)
5. Add a Code block to the page (click + to add a block, then choose “Code”)
6. Paste your Legal Hub embed code
7. Make sure “Display Source” is unchecked so the iframe renders properly
8. Add the page to your navigation menu

Styling the Embed:

You can optionally add custom CSS under Design > Custom CSS to control the container:

.sqs-block-code iframe {
  max-width: 100%;
  min-height: 600px;
}

The auto-resize script included in the embed code will override the min-height once the document loads, so this just prevents a layout jump during loading.

Method 4: Wix Implementation

Wix’s drag-and-drop interface uses HTML iframes for custom embeds, which maps perfectly to the Legal Hub’s approach.

Creating a Legal Information Page:

1. Click “Add Page” in the pages menu
2. Choose a blank template
3. Click the + icon to add elements
4. Choose “Embed” then “Custom Embeds”
5. Select “Embed a Widget”
6. Paste your Legal Hub embed code in the HTML code field
7. Resize the element to fill the page width
8. Add the page to your site menu
9. Publish your changes

Mobile Optimization:

1. Switch to mobile editor view
2. Adjust the embed element size and position for mobile screens
3. Ensure the document is readable and scrollable
4. Test the mobile preview before publishing

Wix renders custom embeds as iframes internally, so the Legal Hub embed works natively with the platform’s existing architecture.

Method 5: Webflow Implementation

Webflow’s professional-grade platform offers precise control over Legal Hub implementation.

Creating a Dedicated Legal Page:

1. Add a new page to your project
2. Name it “Privacy Policy” (or the relevant document name)
3. Add a Section to the page
4. Inside the section, add an Embed element (from the Components panel)
5. Paste your Legal Hub embed code
6. Style the section to match your site design (padding, max-width, etc.)
7. Add the page to your navigation
8. Publish your site

Responsive Design Tips:

1. Wrap the embed in a container with max-width and margin: 0 auto for centered layouts
2. The iframe is set to width: 100% by default, so it adapts to any container width
3. Use Webflow’s responsive design tools to adjust padding at different breakpoints
4. Test using Webflow’s preview feature at all breakpoints

Method 6: Custom HTML Sites and Single-Page Apps

For custom-built websites, static sites, or single-page applications (React, Vue, Angular, etc.), you have maximum flexibility.

Basic HTML Embedding:

Simply paste the embed code into your HTML wherever you want the legal document to appear:

<main class="legal-page">
  <h1>Privacy Policy</h1>
  <iframe
    src="https://app.gdpr.direct/embed/privacy-policy?id=YOUR_COMPANY_ID&lang=en"
    style="width:100%;border:none;overflow:hidden"
    title="privacy policy"
    loading="lazy"
  ></iframe>
  <script>
    window.addEventListener("message", function (e) {
      if (e.data && e.data.type === "gdpr-direct-resize") {
        var frames = document.querySelectorAll(
          'iframe[src*="YOUR_COMPANY_ID"]',
        );
        frames.forEach(function (f) {
          if (e.source === f.contentWindow) {
            f.style.height = e.data.height + "px";
          }
        });
      }
    });
  </script>
</main>

React / Next.js Example:

For React-based applications, you can create a reusable component:

import { useEffect, useRef } from "react";

function LegalEmbed({ src, title }) {
  const iframeRef = useRef(null);

  useEffect(() => {
    function handleMessage(e) {
      if (
        e.data &&
        e.data.type === "gdpr-direct-resize" &&
        iframeRef.current &&
        e.source === iframeRef.current.contentWindow
      ) {
        iframeRef.current.style.height = e.data.height + "px";
      }
    }
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      src={src}
      style={{ width: "100%", border: "none", overflow: "hidden" }}
      title={title}
      loading="lazy"
    />
  );
}

// Usage:
<LegalEmbed
  src="https://app.gdpr.direct/embed/privacy-policy?id=YOUR_COMPANY_ID&lang=en"
  title="Privacy Policy"
/>;

Simple Link Approach:

If you prefer not to embed documents and just want to link to them, you can link directly to the full-page view:

<footer>
  <nav>
    <a
      href="https://app.gdpr.direct/embed/privacy-policy?id=YOUR_COMPANY_ID&lang=en"
      target="_blank"
      rel="noopener"
      >Privacy Policy</a
    >
    <a
      href="https://app.gdpr.direct/embed/cookie-policy?id=YOUR_COMPANY_ID&lang=en"
      target="_blank"
      rel="noopener"
      >Cookie Policy</a
    >
    <a
      href="https://app.gdpr.direct/embed/terms-of-service?id=YOUR_COMPANY_ID&lang=en"
      target="_blank"
      rel="noopener"
      >Terms of Service</a
    >
  </nav>
</footer>

This opens the document in a new tab, styled by GDPR.Direct. It’s the simplest possible integration — no iframes, no JavaScript, just links.

Best Practices

Successful Legal Hub implementation goes beyond just adding the code to your website. Following these best practices ensures maximum compliance, usability, and user trust.

Placement Recommendations:

The most effective approach is to create a dedicated page for each legal document (e.g., /privacy-policy, /cookie-policy, /terms-of-service) and then link to those pages from your footer and anywhere else they’re needed. This gives each document a clean URL, good SEO, and plenty of space to display.

For signup forms, checkout pages, or newsletter subscriptions, include legal links directly adjacent to the action. A small line of text like “By signing up, you agree to our Privacy Policy and Terms of Service” provides transparency at the moment users need it most.

Mobile Optimization:

Over 60% of web traffic now comes from mobile devices, making mobile optimization crucial. The Legal Hub iframe is fully responsive by default — it’s set to width: 100% and the auto-resize script adjusts the height to fit the content. However, you should verify that the page containing the embed has proper mobile padding so the document text doesn’t touch the screen edges.

Test your implementation on actual mobile devices, not just browser emulators, as touch interactions and performance characteristics differ from desktop.

Accessibility Considerations:

Legal documents must be accessible to all users, including those using screen readers or keyboard navigation. The embed code includes a title attribute on the iframe, which is essential for screen reader users to understand what the embedded content is. If you modify the embed code, always keep the title attribute with a descriptive value like “Privacy Policy” or “Cookie Policy”.

Ensure that your footer links to legal pages use descriptive text rather than vague phrases like “Click here.” Use standard anchor tags — not JavaScript onclick events — for navigation to legal pages.

Update Management:

One of the Legal Hub’s primary benefits is automatic updates. When you change a document in GDPR.Direct’s dashboard, the change is live immediately on every page where the document is embedded — because the iframe loads fresh content from the server each time. There’s nothing to redeploy or cache-bust on your end.

Still, establish a review schedule. Set a reminder to review your legal documents quarterly, or whenever your business practices change significantly. If you’re making significant changes, consider communicating them to users via email or an on-site notification, demonstrating transparency and building trust.

Testing Your Implementation

Proper testing ensures your Legal Hub works correctly for all users in all situations. Follow this comprehensive testing checklist:

Verification Checklist:

1. Visit your website in an incognito or private browsing window to see the experience for first-time visitors
2. Navigate to each legal page and verify the document loads inside the iframe
3. Confirm the iframe auto-resizes to fit the document (no internal scrollbar should appear)
4. Check that the document content is accurate and up-to-date
5. Verify legal page links in your footer work correctly
6. Confirm that direct links to legal pages (e.g., from emails or signup forms) work

Cross-Browser Testing:

Don’t assume your Legal Hub works correctly just because it looks good in your favorite browser. Test in:

• Google Chrome (desktop and mobile)
• Safari (desktop and iOS)
• Firefox
• Microsoft Edge
• Samsung Internet (if you have significant mobile traffic)

The iframe embed uses standard web APIs (postMessage, addEventListener) that work consistently across all modern browsers.

Mobile Device Testing:

Use actual mobile devices, not just browser developer tools. Responsive design modes approximate mobile experience but don’t perfectly replicate touch interactions, performance characteristics, or device-specific rendering quirks. Test on both iOS and Android devices if possible. Verify that:

• The document is readable without horizontal scrolling
• The iframe resizes correctly on different screen sizes
• Legal page links in the footer are easily tappable
• Documents load quickly on mobile connections

GDPR Compliance Verification:

Beyond technical functionality, verify that your implementation meets compliance requirements:

• Privacy Policy is easily accessible from every page collecting user data
• Cookie Policy is linked from your cookie consent banner
• Terms of Service are clearly presented before account creation or purchases
• Data subject rights information is prominently displayed
• Contact information for privacy inquiries is included and accurate

Troubleshooting Common Issues

Even with careful implementation, you might encounter issues. Here are the most common problems and their solutions:

Document Not Loading in the Iframe:

If the iframe appears blank, first verify you’ve copied the embed code correctly from GDPR.Direct. Check that the src URL contains your correct company ID and a valid document type (privacy-policy, cookie-policy, or terms-of-service). Open the iframe src URL directly in your browser to confirm the document loads on its own.

If the document loads directly but not inside the iframe, your website may have a Content Security Policy (CSP) that blocks iframes from external domains. You’ll need to add app.gdpr.direct to your CSP’s frame-src directive.

Iframe Shows Scrollbars or Wrong Height:

The auto-resize relies on the inline <script> that listens for postMessage events. Make sure you’ve included both the <iframe> and the <script> from the embed code. If you only pasted the iframe without the script, the iframe will default to a small fixed height and show scrollbars.

If the script is present but sizing still seems off, check that no other JavaScript on your page is interfering with message events or overriding iframe styles.

Styling Conflicts:

Sometimes your website’s CSS applies styles to all iframes (borders, max-heights, fixed dimensions). Use browser developer tools to inspect the iframe element and check for inherited styles that might override the embed’s inline styles. You can fix this with a more specific CSS selector:

iframe[src*="gdpr.direct"] {
  border: none !important;
  max-height: none !important;
}

Mobile Display Issues:

If the document displays correctly on desktop but is cut off or too narrow on mobile, check that the parent container has proper responsive styles. The iframe is set to width: 100%, so it will only be as wide as its parent element allows. Make sure the parent doesn’t have a fixed width or excessive padding that shrinks the available space.

Loading Performance:

The iframe uses loading="lazy" by default, which means the browser won’t load the document until the user scrolls near it. This is ideal for legal pages in footers or below the fold. If you need the document to load immediately (e.g., on a dedicated legal page), you can remove the loading="lazy" attribute from the iframe.

Maintaining Your Legal Hub

Implementation is just the beginning. Proper maintenance ensures ongoing compliance and optimal user experience.

Automatic Updates:

When you update documents in GDPR.Direct, changes are live immediately on every page where the document is embedded. The iframe loads content from GDPR.Direct’s servers on each page visit, so users always see the latest version. No manual updating, redeployment, or cache clearing is required on your end.

Review and Update Schedule:

Establish a regular review schedule for your legal documents. Even if regulations haven’t changed, your business practices might have. Review your Privacy Policy whenever you:

• Add new data collection methods
• Integrate new third-party services
• Expand to new geographic markets
• Change your data retention practices
• Update security measures

Review your Cookie Policy when you add new tracking technologies, analytics tools, or advertising platforms. Review Terms of Service when you change pricing, add new features, or modify user obligations.

Version Tracking:

GDPR.Direct automatically maintains a version history of all your legal documents. This creates an audit trail showing what information was presented to users at any given time. Familiarize yourself with the version history interface so you can quickly reference previous versions during audits or legal inquiries. Document the reason for each version change in your internal compliance records.

Audit Trail Features:

The Legal Hub’s audit trail capabilities provide proof of compliance during regulatory audits. You can demonstrate that privacy information was accessible, accurate, and properly maintained. Regularly export version history reports and store them securely as part of your compliance documentation. If you’re subject to specific regulatory requirements like GDPR Article 30 processing records, incorporate Legal Hub version data into your compliance reports.

Conclusion

Implementing GDPR.Direct’s Legal Hub is straightforward: paste an iframe embed code into your website, and your legal documents are live. The iframe approach works on every platform — WordPress, Shopify, Squarespace, Wix, Webflow, or any custom site — without plugins, external scripts, or server-side configuration.

Once embedded, your documents stay current automatically. Every edit you make in the GDPR.Direct dashboard is reflected instantly wherever the document is displayed. This means reduced maintenance burden, improved user trust, and demonstrated regulatory compliance without ongoing technical work.

If you encounter any challenges during implementation or have questions about optimizing your Legal Hub setup, GDPR.Direct’s support team is ready to help at support@gdpr.direct. Take the first step toward effortless legal compliance today by implementing your Legal Hub and experiencing the peace of mind that comes with automated, professional legal document management.