Embedding forms on your website

Learn how to embed your Human Design chart forms on your website using various methods.

Getting Your Embed Code

Step 1: Open Form Builder
Edit the form you want to embed, or create a new one and save it.

Step 2: Find Embed Code Section
After saving, scroll down to see the “Embed Code” section with code examples.

Step 3: Choose Your Platform
Select the appropriate tab: HTML, React, or WordPress.

Step 4: Copy the Code
Click the copy button to copy the embed code to your clipboard.

HTML Embed Code

For standard HTML websites, use this code:

<!-- Human Design Chart Form -->
<div id="hdai-embed-{token}" data-hdai-token="{token}"></div>
<script src="https://app.humandesign.ai/embed-widget.js"></script>

Replace {token} with your form’s embed token (found in the embed code section).

Step 1: Paste Code in Your HTML
Paste the code where you want the form to appear on your page.

Step 2: Replace Token
Make sure to replace {token} with your actual embed token.

Step 3: Save and Test
Save your HTML file and view it in a browser to verify the form appears.

React Embed Code

For React applications:

import React, { useEffect, useRef } from 'react';

export default function HumanDesignForm() {
  const containerRef = useRef(null);
  const initialized = useRef(false);

  useEffect(() => {
    if (initialized.current) return;
    initialized.current = true;

    const script = document.createElement('script');
    script.src = 'https://app.humandesign.ai/embed-widget.js';
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      if (containerRef.current && window.HumanDesignEmbedWidget) {
        new window.HumanDesignEmbedWidget(
          containerRef.current.id,
          '{token}'
        );
      }
    };

    return () => {
      // Cleanup if needed
    };
  }, []);

  return (
    <div 
      ref={containerRef}
      id="hdai-embed-{token}"
      data-hdai-token="{token}"
      style={{ width: '100%' }}
    />
  );
}

Note: Replace {token} with your actual embed token. The widget script loads asynchronously and initializes the form automatically.

WordPress Embed Code

For WordPress sites, use the shortcode:

[hdai_embed token="{token}"]

Step 1: Install Plugin (if needed)
You may need to install a WordPress plugin to enable shortcode support. Contact support for the plugin file.

Step 2: Add Shortcode
Paste the shortcode in any post, page, or widget where you want the form to appear.

Step 3: Replace Token
Replace {token} with your actual embed token.

Iframe Embed (Alternative Method)

You can also embed forms using a direct iframe:

<iframe 
  src="https://app.humandesign.ai/embed/{token}"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Warning: Iframe embedding may have limitations with responsive sizing. The widget method is recommended for better mobile support.

Customizing Form Appearance

All form styling is configured in the Form Builder. The embed code will automatically use your configured:

Colors (primary, background, text)
Font family
Border radius
Spacing and layout

No additional CSS is needed – the form will match your brand automatically.

Form Placement Tips

Above the fold: Place forms where visitors can see them immediately
Context matters: Add forms to relevant pages (landing pages, blog posts about Human Design)
Multiple forms: Create different forms for different purposes (free chart, detailed reading, etc.)
Test placement: A/B test different placements to see what works best

Embedding forms on your website

Getting Your Embed Code

HTML Embed Code

React Embed Code

WordPress Embed Code

Iframe Embed (Alternative Method)

Customizing Form Appearance

Form Placement Tips

Troubleshooting

Form Not Displaying

Styling Issues

More in Professional Features