Hostinger AI Builder Manual Mode Custom Code

Hostinger AI Builder’s manual mode lets you add custom code and third‑party integrations directly to your website, giving you full control over the HTML, CSS, and JavaScript that the AI generates. You can access this by opening the site editor, switching from AI mode to manual mode, and then using the custom code blocks or the site’s header/footer settings to paste your snippets. This article explains exactly how to do that, what limits apply, and how to avoid common pitfalls.

Background: What Manual Mode Is and Why It Matters

Hostinger’s AI Builder is a website builder that creates a site from a text prompt. In its default AI mode, the tool generates pages, sections, and styling automatically. Manual mode is a separate editing state that reveals the underlying code structure. It is designed for users who want to go beyond the visual drag‑and‑drop options—for example, to add a custom tracking pixel, embed a third‑party widget, or tweak the styling of a specific element.

Because the AI builder is relatively new, many users are unsure whether it supports custom code at all. The answer is yes, but the implementation is not identical to a traditional code editor. You are not editing the entire source file; instead, you insert code snippets into predefined areas. This keeps the AI’s core structure intact while allowing targeted modifications.

How to Enable Manual Mode and Add Custom Code

To start, open your website in the Hostinger AI Builder editor. Look for a toggle or a button labeled “AI mode� or “Manual mode� in the top toolbar. Click it to switch to manual mode. The interface will change, showing a more traditional editing panel with options for pages, sections, and code.

Once in manual mode, you have two primary ways to add custom code:

• Custom Code Block: In the left sidebar, find the “Add elementâ€� or “+â€� button. Search for “Custom Codeâ€� or “HTMLâ€� and drag it onto your page. A block will appear where you can paste your HTML, CSS, or JavaScript. This block renders exactly as you write it.
• Site‑wide Header/Footer: Go to the site settings (usually a gear icon) and look for “Custom Codeâ€� or “Header/Footerâ€� options. Here you can insert code that will load on every page, such as Google Analytics, Facebook Pixel, or a custom font link.

After pasting your code, click “Save� or “Publish� to apply the changes. Always test on a staging site or a preview before going live.

Common Use Cases for Custom Code

Manual mode is useful for several practical scenarios that the AI builder doesn’t handle out of the box:

• Analytics and tracking: Add Google Analytics, Meta Pixel, or other tracking scripts to measure visitor behavior.
• Third‑party widgets: Embed a live chat widget, a booking system, or a review feed from services like Tawk.to or Trustpilot.
• Custom fonts: Load a Google Font that isn’t in the builder’s default library by adding a <link> tag in the header.
• CSS overrides: Write custom CSS to adjust spacing, colors, or responsiveness beyond the theme’s options.
• JavaScript enhancements: Add interactive elements like a countdown timer, a cookie consent banner, or a custom form validation.

How to Choose Between the Custom Code Block and Site‑wide Code

Deciding where to place your code depends on its purpose:

• Page‑specific code: If the code only applies to one page (e.g., a landing page with a unique script), use the Custom Code Block on that page.
• Global code: If the code should run on every page (e.g., a tracking pixel, a global stylesheet, or a chat widget), use the site‑wide header/footer option.
• Performance: For large scripts, prefer the site‑wide footer so they load after the main content, improving perceived speed.

Common Problems and How to Fix Them

Users often run into a few typical issues when adding custom code in manual mode:

• Code not appearing: Make sure you saved and published the site. Also check that you placed the code in the correct block—a common mistake is pasting CSS in an HTML block without proper <style> tags.
• JavaScript not executing: Some scripts require the page to be fully loaded. Wrap your code in a DOMContentLoaded event listener or place it in the footer instead of the header.
• Conflicts with the AI’s generated code: The AI builder may override your custom CSS if you use the same class names. Use unique class prefixes or inline styles for critical changes.
• Form validation issues: If you embed a custom form, ensure it doesn’t conflict with the builder’s own form handling. Test thoroughly.

Comparison: Manual Mode vs. Hostinger’s Other Options

Hostinger offers several ways to add code, and it’s helpful to know the differences:

• AI Builder Manual Mode: Best for quick, AI‑generated sites where you need a few custom snippets. It’s limited to the builder’s framework.
• WordPress with Hostinger: If you use Hostinger’s WordPress hosting, you have full access to the theme editor, child themes, and plugins like “Custom CSS & JSâ€� for unlimited code modifications.
• Hostinger Website Builder (non‑AI): The classic builder also has a custom code feature, but it may be more limited than the AI builder’s manual mode.

For heavy customization, WordPress is more flexible. For a simple site with a few tweaks, manual mode is sufficient.

Safety and Best Practices

Adding custom code carries risks, especially if you copy scripts from untrusted sources. Follow these guidelines:

• Backup your site: Before making major changes, export a backup from Hostinger’s dashboard.
• Use a staging environment: Test code on a copy of your site first to avoid breaking the live version.
• Validate your code: Use online validators for HTML and CSS, and check JavaScript for syntax errors.
• Keep code minimal: Unnecessary scripts slow down your site and increase security risks.
• Never paste code you don’t understand: Malicious scripts can steal data or redirect visitors.

Frequently Asked Questions

Can I add custom CSS in Hostinger AI Builder manual mode?

Yes. You can add a Custom Code block and wrap your CSS in <style> tags, or add a <link> to an external stylesheet in the site‑wide header.

Will my custom code break when I update the AI‑generated design?

It can. If you regenerate the site or change the prompt, the AI may overwrite sections. Manual mode changes are usually preserved, but it’s wise to keep a backup of your code snippets.

Can I add a Google Analytics tracking code?

Yes. Paste the tracking snippet into the site‑wide header or footer. The AI builder will load it on every page.

Is there a limit to how much code I can add?

Hostinger doesn’t publicly specify a strict character limit for custom code blocks, but very large scripts may affect performance. Keep code concise and consider hosting large files externally.

Can I use manual mode to edit the entire HTML of my site?

No. Manual mode only allows inserting code blocks and editing the header/footer. It does not give you full access to the entire source file. For full control, consider Hostinger’s WordPress hosting.

Why is my custom JavaScript not working?

Common reasons include: the script is placed in the header before the DOM is ready, there’s a syntax error, or the script conflicts with the builder’s own code. Try moving it to the footer or wrapping it in a DOMContentLoaded event.

Related

• Speed Keyboard Escape Auras? What It Means
• Control Messages Error: Fix & Meaning
• Move Text With a Picture in Word: The Real Fix