Hostinger

This guide walks you through embedding a Bodygraph chart calculator into Hostinger’s drag-and-drop website builder — including important setup tips, common mistakes, and troubleshooting advice.

⚠️ Important: This tutorial applies only to Hostinger’s own drag-and-drop website builder, NOT WordPress or custom-coded websites hosted on Hostinger.

Step 1: Log Into Both Platforms

Before starting:

1. Open Bodygraph in one browser tab.

2. Open Hostinger Website Builder in another tab.

3. Log into both accounts.

4. Enter Editor Mode inside Hostinger.

Pro Tip: When working across platforms, always log into everything first to avoid session timeouts during setup.

Step 2: Decide Where the Chart Should Appear

Your chart placement is extremely important for visibility and sales.

Best Placement Practices

• Place it on the homepage, OR

• Ensure it’s accessible within one click

• Use a clear menu link

• Add a strong Call-to-Action (CTA) button

Important Sales Tip:

The harder your chart is to find, the fewer reports you’ll sell.
Make it obvious and easy to access.

Step 3: Create or Edit an Embed Code in Bodygraph

Inside Bodygraph:

1. Navigate to Embed Chart section and click Create New

2. Give your embed code a name (for your internal reference) and select the chart type (e.g., Traditional Human Design)
   

3. Click Create

You’ll be redirected to your embed code panel.

Think of this panel as your remote control for everything that appears on your website.

Step 4: Copy the Embed Code and paste to Hostinger Embed code section

Simply:

1. Click Copy

2. Go to Hostinger

3. Inside Hostinger Website Builder navigate to the page where you want the char and then click Add Element.

4. Select Embed Code

5. Edit code, paste your Bodygraph embed code and click Save

Your chart form will instantly appear inside the editor.

Step 5: Give the Chart Full Width

Very Important Layout Tip:

Always allow the chart to expand fully.

If placed in a narrow column:

• The chart may look squished

• Elements may overlap

• User experience will suffer

Best practice:

• Use full-width layout

• Avoid tight sidebars

Step 6: Save and Publish

After embedding:

1. Click Save

2. Click Publish

3. Visit your live website

4. Test the form

Understanding the Embed Code Settings

Once embedded, you do not need to re-embed when making changes.

Any updates in Bodygraph go live automatically.

Maintenance & Testing (Critical)

All integrations require:

• Periodic testing

• Maintenance checks

• App connection monitoring

Especially important if:

• You use third-party apps

• You sell reports

• You collect emails

If Embed Code Stops Working

Most common reasons:

1. Unpaid Bodygraph subscription invoice/account cancelation

2. Redirection misconfiguration

3. Third party app (if enabled) updates

Important Billing Notice:

If your invoice is unpaid, embed codes may be suspended.

Always keep billing details updated.

For more in depth training and troubleshooting please check video guide below: